PDA

View Full Version : Position problem; works in IE7,8 FF3,3.5 but not Safari / Chrome



Salami1_1
Jul 8th, 2009, 10:10 AM
Hi,

I just recently switched browsers because I got so fed up with FF (since 3.x slow and **** in my opinion) so I installed chrome and I noticed my website wasn't working well (I always tested for IE & FF not others).

So now I want to fix it for Chrome & Safari (same problem) but I have no idea how.. I always thought that FF redering would be the same as Chrome / Safari.

If I change the css to fit chrome / Saf the website is bad in FF..

The weird thing is that for IE < 8 (lte 7) I have a fix in place which does the exact opposit that what Chrome / saf need... so to me it looks like chrome and safari actually are picking up the:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="srs-ie.css" />
<![endif]-->

stylesheet which they should ignore..

Link; www.unlocksamsungonline.com (http://www.unlocksamsungonline.com)

The problem is that the content div (directly under the horizontal dropdown menu) is positioned too high (parts are falling away). The lte7 fix actually puts this div higher because otherwise there would be a big white space there (so without the fix IE7 and lower would display the content div too low creating a big white space).

Anybody can give me any pointers? Does Chrome / Safari parse the IE specific stylesheets?

Best regards,

SB65
Jul 8th, 2009, 03:37 PM
Chrome and Safari are not reading the IE stylesheet.

The problem is caused by the negative top margin applied to #srs-languages - causing subsequent elements to be too high. I'd suggest using absolute positioning for #srs-languages to take it out of the flow completely. Try the following changes to srs.css:



#Samsung-content-wrap {/*changed from samsung - case sensitive*/
position: relative;
clear: both;
margin: 0;
padding: 0;
background: #FFF;
}

ul#languages{margin:0;padding:0}/*remove the inherited padding and margins on the ul*/

#srs_languages{
/*margin-left: -79px;
margin-top: -200px;*/
position:absolute;
top:0px;
left:-35px
}



Making these changes it looks OK in FF3, Safari4 and Chrome2 for me.

However, everything is too far down now in IE7 - caused by the additional margin-top applied by your conditional css for IE. I think you'll find you can lose this now.