943,520 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > css and browser issues ....
Ad:
Permalink
Feb 6th, 2009
0

css and browser issues ....

Expand Post »
hi all,

i am sorry i know this is a trivial issue but it has bugged me and it seems like i dont ve any clue whatsoever to correct this ....

i ve a site which i want to look centered and in place ... its working fine in firefox (for which i ve a generic css) but not in IE7 .... for which there is a separate css .....

i m getting a lot of space at the bottom ...... not quite sure how browsers render css ......

here's the link to the test page : http://bag.idifysolutions.com/bagtheplanet

the css for ie7 is the following:
html Syntax (Toggle Plain Text)
  1. /* CSS Document */
  2. body{
  3. padding:0px 0px 0px 0px;
  4. text-align: center;
  5. margin: 0 auto;
  6. min-width: 1024px;
  7. height:100%;
  8. font-size:100%;
  9. }
  10.  
  11. #wrapper {
  12.             width: 1024px;
  13. 			height:1300px;
  14.             margin: 0 auto;
  15.             text-align: left;
  16. 			}
  17.  
  18. #wrapper_quote {
  19.             width: 1024px;
  20. 			height:700px;
  21.             margin: 0 auto;
  22.             text-align: left;
  23. 			}
  24.  
  25. #wrapper_abt {
  26.             width: 1024px;
  27. 			height:1300px;
  28.             margin: 0 auto;
  29.             text-align: left;
  30. 			}
  31.  
  32. .imgHeader{
  33.     position:relative;
  34. 	z-index:1000;
  35. 	left:0px;
  36. 	right:0px;
  37. 	top:0px;
  38. }
  39.  
  40. .firstdiv{
  41.     position:relative;
  42.    	left:25px;
  43. 	top:-330px;
  44. 	width:250px;
  45. 	z-index:1000;
  46. }
  47.  
  48. .seconddiv{
  49.     position:relative;
  50.    	left:255px;
  51.     top:-935px;
  52. 	width:20px;
  53. 	z-index:1000;
  54. }
  55.  
  56. .thirddiv{
  57.     position:relative;
  58.    	left:285px;
  59. 	top:-1990px;
  60. 	width:660px;
  61. 	z-index:1000;
  62. 	font-family:"Trebuchet MS", Helvetica, Verdana;	
  63.     font-size:11px;
  64.     font-weight:bold;
  65.     color:#B0B0B0;
  66. }
  67.  
  68. .desc_font_head{
  69. font-family:"Trebuchet MS", Helvetica, Verdana;	
  70. font-size:16px;
  71. font-weight:bold;
  72. }
  73.  
  74. .desc_font{
  75. font-family:"Trebuchet MS", Helvetica, Verdana;		
  76. font-size:12px;
  77. font-weight:bold;
  78. }
  79.  
  80. .divHeader_phone{
  81.     font-family:arial, verdana;
  82. 	color:#825702;
  83. 	float:left;
  84. 	font-size:22px;
  85. 	font-weight:bold;
  86. 	font-style:italic;
  87.     position:relative;
  88.    	left:165px;
  89. 	top:-283px;
  90. 	width:200px;
  91. 	z-index:1000;
  92. }
  93.  
  94. .divHeader_para{
  95. float:left;
  96. 	font-family:arial, verdana;
  97. 	color:#FFFFFF;
  98. 	font-size:16px;
  99. 	font-weight:bold;
  100. 	position:relative;
  101. 	left:385px;
  102. 	width:411px;
  103. 	z-index:1000;
  104. 	top:-350px;
  105. }
  106.  
  107. .divBelHead{
  108. 	font-family:arial, verdana;
  109. 	color:#ffffff;
  110. 	font-size:22px;
  111. 	font-weight:bold;
  112. 	position:relative;
  113. 	left:29px;
  114. 	width:625px;
  115. 	z-index:1000;
  116. 	top:-295px;
  117. }
  118.  
  119. .divBelHead_para{
  120.     font-family:arial, verdana;
  121. 	color:#000000;
  122. 	font-size:11px;
  123. 	font-weight:bold;
  124.     position:relative;
  125.    	left:35px;
  126. 	top:-290px;
  127. 	width:600px;
  128. 	z-index:1000;
  129. }
  130.  
  131. .abtbtp{
  132.     font-family:"Trebuchet MS",arial, verdana;
  133.     color:#000000;
  134.     font-size:15px;
  135.     position:relative;
  136.     left:50px;
  137.     top:-200px;
  138.     width:850px;
  139.     z-index:1000;
  140. }
  141.  
  142. .abt_h1{
  143. font-family:"Trebuchet MS",arial, verdana;
  144.     position:relative;
  145. 	color:#007138;
  146. 	top:-205px;
  147. 	left:-560px;
  148. 	z-index:1000;
  149. }
  150.  
  151. .blogbtp{
  152. position:relative;
  153.     top:-14px;
  154. 	left:20px;
  155. }
  156.  
  157.  
  158.  
  159. .abtbtp h2
  160. {
  161. color:#FB7D00;
  162. }
  163.  
  164. .abtbtp a{
  165. color:orange;
  166. text-decoration:none;
  167. }
  168.  
  169. .abtbtp a:hover{
  170.     color:#007138;
  171.     text-decoration:none;
  172. }
  173.  
  174. .divBelHead_ul{
  175.     font-family:arial, verdana;
  176. 	color:#000000;
  177. 	font-size:11px;
  178. 	font-weight:bold;
  179.     position:relative;
  180.    	left:5px;
  181. 	top:-288px;
  182. 	width:600px;
  183. 	z-index:1000;
  184.  
  185. }
  186.  
  187. .divBelHead_button{	
  188. 	position:relative;
  189. 	left:670px;
  190. 	width:295px;	
  191. 	z-index:1000;
  192. 	top:-482px;
  193. }
  194.  
  195. .divBelHead_button_table{
  196.     font-family:arial, verdana;
  197. 	color:#FFFFFF;
  198. 	text-align:center;
  199.     position:relative;
  200.    	left:695px;
  201. 	top:-480px;
  202. 	width:300px;
  203. 	z-index:1000;
  204. }
  205.  
  206. .divBelHead_button_link{
  207.     font-family:arial, verdana;
  208. 	font-size:14px;
  209. 	font-weight:bold;
  210. 	color:#009900;
  211. 	text-align:center;
  212.     position:relative;
  213.    	left:642px;
  214. 	top:-480px;
  215. 	width:300px;
  216. 	z-index:1000;
  217. }
  218.  
  219. .div_bags{
  220.     position:relative;
  221.    	left:11px;
  222. 	top:-490px;
  223. 	width:800px;
  224. 	z-index:1000; 
  225. }
  226.  
  227. .video1{
  228.     position:relative;
  229.    	left:675px;
  230. 	top:-1290px;
  231. 	width:250px;
  232. 	z-index:1000; 
  233. }
  234.  
  235. .video2{
  236.     position:relative;
  237.    	left:675px;
  238. 	top:-1275px;
  239. 	width:250px;
  240. 	z-index:1000; 
  241. }
  242.  
  243. .video3{
  244.     position:relative;
  245.    	left:675px;
  246. 	top:-1260px;
  247. 	width:250px;
  248. 	z-index:1000; 
  249. }
  250.  
  251. .indexfooter{
  252. 	position:relative;
  253. 	text-align:center;
  254. 	left:85px;
  255.     width:900px;
  256. 	z-index:1000;
  257. 	top:-1150px;
  258. 	bottom:0px;
  259. }
  260.  
  261.  
  262. .abtfooter{
  263.     position:relative;
  264. 	text-align:center;
  265.     left:85px;
  266. 	width:900px;
  267.     z-index:1000;
  268.     top:-100px;
  269. 	bottom:0px;
  270. }
  271.  
  272. .orderfooter{
  273.     position:relative;
  274. 	text-align:center;
  275. 	left:85px;
  276.     width:900px;
  277. 	z-index:1000;
  278. 	top:-1900px;
  279. 	bottom:0px;
  280. }
  281.  
  282. .quotefooter{
  283. 	position:relative;
  284. 	text-align:center;
  285. 	left:85px;
  286.     width:900px;
  287. 	z-index:1000;
  288. 	top:10px;
  289. 	bottom:0px;
  290. } 
  291.  
  292. .blogfooter{
  293.     position:absolute;
  294.     left:85px;
  295.     width:860px;
  296.     z-index:1000;
  297.     top:3000px;
  298. }
  299.  
  300.  
  301.  
  302. #footer 
  303. {
  304. text-align:center;
  305. color:#007138;
  306. font-family:Arial, Helvetica, sans-serif;
  307. font-style:italic;
  308. }
  309.  
  310. #footer1 
  311. {
  312. text-align:center;
  313. color:#000000;
  314. font-size:14px; 
  315. font-family:Arial, Helvetica, sans-serif;
  316. font-weight:300;
  317. }
  318.  
  319.  
  320.  
  321. .divorderBel_text{
  322.     font-family:"Trebuchet MS",arial, verdana;
  323. 	color:#007138;
  324. 	font-size:32px;
  325. 	font-weight:bold;
  326.     position:relative;
  327.    	left:25px;
  328. 	top:-293px;
  329. 	width:700px;
  330. 	z-index:1000;
  331. }
  332.  
  333. .divorderBel_para{
  334.     font-family:arial, verdana;
  335. 	color:#000000;
  336. 	font-size:15px;
  337. 	font-weight:bold;
  338.     position:relative;
  339.    	left:30px;
  340. 	top:-288px;
  341. 	width:520px;
  342. 	z-index:1000;
  343. }
  344.  
  345.  
  346. .divorderBel_ul{
  347.     font-family:arial, verdana;
  348. 	color:#000000;
  349. 	font-size:12px;
  350. 	font-weight:bold;
  351.     position:relative;
  352.    	left:540px;
  353. 	top:-335px;
  354. 	width:450px;
  355. 	z-index:1000;
  356. }
  357.  
  358.  
  359. .divHeader{
  360. 	font-family:arial, verdana;
  361. 	color:#FFFFFF;
  362. 	text-align:left;
  363. 	font-size:11px;
  364. 	font-weight:bold;
  365. 	font-style:italic;
  366. 	position:relative;
  367. 	z-index:1000;
  368. 	left:82px;
  369. 	width:800px;
  370. 	top:-383px;
  371. }
  372.  
  373. .divQuote{
  374.     font-family:arial, verdana;
  375. 	color:#007138;
  376. 	border:solid 1px #007138;
  377. 	text-align:center;
  378. 	font-size:18px;
  379. 	background-color:#faddaf;
  380. 	font-weight:bold;
  381. 	font-style:italic;
  382.     position:relative;
  383.    	z-index:1000;
  384. 	left:80px;
  385. 	top:-115px;
  386. 	width:850px;
  387. }
  388.  
  389. .Button_text
  390. {
  391.     font-family:"Trebuchet MS", arial, verdana;
  392. 	color:#FFFFFF;
  393. 	font-size:26px;
  394. 	font-weight:bold;
  395. 	text-align:center;
  396. 	padding:0;
  397. 	line-height:45px;
  398. 	z-index:1000;
  399. }
  400.  
  401. .link
  402. {
  403.     font-family:"Trebuchet MS", arial, verdana;
  404.  	color:#666666;
  405.     text-decoration:none;
  406.     text-align:center;
  407.     padding:0;
  408. 	font-size:10.5px;
  409. }
  410.  
  411. .Header{
  412.     font-size : 12px;
  413. 	font-family: Arial, Verdana, Helvetica, sans-serif;
  414. 	/*line-height : 16px;*/
  415. 	color : #ffffff;
  416. 	position:relative;
  417. 	/*top:-153px;*/
  418. 	/*margin-bottom:-100px;*/
  419. 	border: 0px black solid;
  420.  
  421. }
  422. .thanks_font{
  423. font-family:"Trebuchet MS", Helvetica, Verdana;	
  424. /*background-color:#EAEAEA;/*#EBEBEB;
  425. filter: alpha(Opacity=75);
  426. opacity:0.75;*/
  427. text-align:center;
  428. font-size:14px;
  429. font-weight:bold;
  430. color:#009B00;
  431. vertical-align:middle;
  432. }
  433. #head .divHeader a:link, .divHeader a:visited, .divHeader a:active{
  434. color:#FFFFFF;
  435. text-decoration:none;
  436. }
  437.  
  438. #head .divHeader a:hover{
  439. 	color:#FF9933;
  440. 	text-decoration:none;
  441. }
  442.  
  443. h2
  444. {
  445. color:#FFFFFF;
  446. }
  447. .text
  448. {
  449. border:solid thin #8B8B8B;
  450. }
  451.  
  452. .error_strings{ 
  453. font-family:"Trebuchet MS", Helvetica, Verdana;	
  454. font-size:10px; 
  455. color:#FF0000;
  456. }
  457.  
  458.  
  459. /**************zoom in*************/
  460. .customGal {
  461. 	display: block;
  462. 	float: left;
  463. 	margin: 0 10px 10px 0;
  464.    cursor: url(../images/zoomin.cur), default;
  465. }
  466.  
  467. #getQuote {
  468.   width:700px;
  469. }
  470.  
  471. #getQuote form {
  472.   padding:17px;
  473.   width:700px;
  474.   float:left;
  475. }
  476.  
  477. #getQuote .contactInfo {
  478.   background:url(../images/orderform/tell.png) no-repeat top left;
  479.   padding-top:40px;
  480.   width:225px;
  481.   margin-right:14px;
  482.   float:left;
  483. }
  484.  
  485. #getQuote .bagDetails {
  486.   background:url(../images/orderform/confirm.png) no-repeat top left;
  487.   float:left;
  488.   padding-top:40px;
  489.   width:420px;
  490. }
  491.  
  492. #getQuote .bagDetails .left {
  493.   float:left;
  494.   width:200px;
  495. }
  496.  
  497. #getQuote .bagDetails .right {
  498.   float:left;
  499.   width:200px;
  500. }
  501.  
  502. #getQuote .bagDetails input, #getQuote .bagDetails select, #getQuote .bagDetails textarea, #getQuote .bagDetails file {
  503.   width:180px;
  504. }
  505.  
  506. #getQuote input.submitInput {
  507.   width:auto;
  508.   margin-bottom:0px;
  509.   margin-top:10px;
  510. }
  511.  
  512.  
  513. #getQuote form label, #getQuote form p {
  514.   font-size:11px;
  515.   font-family:arial;
  516.   color:#888;
  517. }
  518.  
  519. #getQuote form label {
  520.   display:block;
  521.   margin-bottom:5px;
  522. }
  523.  
  524. #getQuote form input.textInput {
  525.   padding:5px;
  526. }
  527.  
  528. #getQuote form input.textInput, #getQuote form select {
  529.   border:1px solid #ccc;
  530.   margin-bottom:10px;
  531. }
  532.  
  533. #getQuote form .contactInfo input.textInput {
  534.   width:210px;
  535. }
  536.  
  537. #getQuote .privacyStatement {
  538.   background:url(../images/orderform/padlock.gif) no-repeat top left;
  539.   padding-left:30px;
  540. }

please help me out .... the css for firefox is similar apart from some minor adjustments in pixel positioning ....

Thanks a million in advance..
Similar Threads
Reputation Points: 10
Solved Threads: 1
Newbie Poster
chinmayu is offline Offline
11 posts
since Nov 2008
Permalink
Feb 11th, 2009
0

Re: css and browser issues ....

I see several errors.

1. Stop using pixels for measurement. This locks the design to one screen resolution. It fails on other screen sizes.

2. Don't put dimensions on 0 values (e.g. 0px). If Firefox finds one of these, it throws away the entire style.

3. Don't put nonzero surrounding styles (margin, border, padding) in the same tag or style that contains size styles (width, height). This makes IE render it differently than other browsers.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Feb 11th, 2009
0

Re: css and browser issues ....

Click to Expand / Collapse  Quote originally posted by MidiMagic ...
I see several errors.

1. Stop using pixels for measurement. This locks the design to one screen resolution. It fails on other screen sizes.

2. Don't put dimensions on 0 values (e.g. 0px). If Firefox finds one of these, it throws away the entire style.

3. Don't put nonzero surrounding styles (margin, border, padding) in the same tag or style that contains size styles (width, height). This makes IE render it differently than other browsers.
Thanks a lot for replying man .......

for 1. what should i use in lieu of pixels .... sorry but i m a newbie ..... and is it going to ve any adverse effect on the general page layout ....

got the 2. one .... thanks mate ....

3. is a bit elusive to me ... could you explain it a bit more .... cuz i think i ve done that almost every time ....
Reputation Points: 10
Solved Threads: 1
Newbie Poster
chinmayu is offline Offline
11 posts
since Nov 2008
Permalink
Feb 11th, 2009
0

Re: css and browser issues ....

Click to Expand / Collapse  Quote originally posted by MidiMagic ...
I see several errors.

1. Stop using pixels for measurement. This locks the design to one screen resolution. It fails on other screen sizes.

2. Don't put dimensions on 0 values (e.g. 0px). If Firefox finds one of these, it throws away the entire style.

3. Don't put nonzero surrounding styles (margin, border, padding) in the same tag or style that contains size styles (width, height). This makes IE render it differently than other browsers.
yeah i wouldnt do #1 unless your site is completely expandable, if you are using fonts as em instead of px you'll have xbrowser issues if you have any fixed height elements
Reputation Points: 37
Solved Threads: 1
Posting Whiz in Training
cmills83 is offline Offline
249 posts
since Jun 2004
Permalink
Feb 15th, 2009
0

Re: css and browser issues ....

There's a host of things to use instead of pixels, but I would definitely reccomend percents. (%)

It will render things, obviously, in percentages of the screen, so it will work across different monitors. =D

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

It may not work as great as you would like across different monitors and browsers, but it'll work.

Play around with it and get something you like. =D
Reputation Points: 10
Solved Threads: 1
Newbie Poster
SmartBeaver is offline Offline
14 posts
since Jan 2009
Permalink
Feb 17th, 2009
0

Re: css and browser issues ....

Use percent for horizontal location.

Use points to define fonts and things relative to fonts.

Don't attempt vertical centering. It is almost impossible to achieve on all browsers, resolutions, and window sizes.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Easy Question About Different Web Browsers
Next Thread in HTML and CSS Forum Timeline: Messy code





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC