Tuesday, 22 January 2008

Browser CSS Differences (IE6 IE7 Firefox)

Typically the 3 major browsers used are Firefox, IE6 and IE7. Perhaps you thought they would behave the behave the same when rendering CSS in the browser window? If only life were that simple.

Although Firefox and IE7 and more similar than ever in rendering CSS, IE6 has always had a mind of its own, adding padding and spacing amongst other things in random locations. However, there is a simple way to cater specifically for the major browsers. IE6 recognises underscore lines, but IE7 does not. IE6 and IE7 recognise period lines. For example...

#header
{
margin-top: 8px;
.margin-top: 10px;
_margin-top: 4px;
}

Firefox, and every other non-IE browser, will only see and use the 8px, IE6 will see the 10px line, but then the 4px line will stomp on it, and only IE7 will see the 10px line. You can now support all major browsers without having to write a serverside script, clientside script or even a horrible CSS expression :)

17 comments:

Richard Thomas said...

This has to be a first - I did a Google search for a CSS problem, the first result has the exact fix I am looking for, it's clearly explained and it works perfectly. Thanks Neil!

Neil kilbride said...

Glad I could be of service Richard :)

Tom Bigbee said...

Hi Neil,

I am 25 year veteran DOS and Windows programmer and am just now learning XHTML/CSS to create a web site.

This method seems to work in these 3 major browsers and assume it will not kill any others.

When I submit it to the W3 CSS Validator it complains. A sample:
html {
font-size: 12px; /* Firefox+ */
.font-size: 75%; /* IE6, IE7 */
_font-size: 100%; /* IE6 only */
font-weight: normal;
}

W3C CSS Validator Results for file://localhost/TextArea
Sorry! We found the following errors
URI : file://localhost/TextArea
3 html Parse Error - .font-size: 75%;
6 Parse Error - : 100%; font-weight: normal; }

I also found a similar suggestion using a pound sign instead of period but it also fails.

Using the !important validates but doesn't give as much control.

Is this something we will have to live with?

Thanks
Tom
(:-{>

bkrall said...

Thank you. This just helped me out a TON.

melih.gumuscay said...

Small but very helpful trick/hack thank you

Anonymous said...

Awesome! Thanks

Neal Walsh said...

Wow from one Neal to another Neil...Thanks! What a beautiful fix! You saved me a lot of hair-pulling time and stress! Cheers,

N

Anonymous said...

Thanks! Just what I was looking for.

-Paul

Terry said...

Thanks Neil .. spent hours poring over my stylesheet, and solved the problem 5 seconds after typing the question into google :)

Paul said...

This is handy for quick results, but beware it'll fail on the W3S Validation check.

Normally the problem is IE is presumming padding, so, sometimes declaring padding:0 px; fixes it.

fromtheranks said...

This is a perfect solution! I was totally stuck on how to tweak a CSS file when a friend on another site turned me on to your solution. Brilliantly simple! :-)

Martin Evans said...

Thanks Neil. Just what I was after. Have a free beer on me!

Anonymous said...

You need to proof read your posts fool!

Anonymous said...

PS A/S/L?

rikkog said...

thanks neil - just the thing for the problems i was seeing rendered by IE6.

Anonymous said...

Thanks Neil. After hours of trying came upon your solution ... and it worked in seconds. Thks again. FF

raj said...

Thanks Neil i am really very thankful to you as i was trying to resolve this issue from past few days but could not but after seeing this blog it was very helpful for me it completely resolved my issue

Thank you very much once again

Raj