IE7 vs. Everything Else : Position

**zachmedia** · 11-29-2007, 09:48 AM

Hello everyone,

This has probably been discussed before, and if so would like to be pointed in the right direction:

My website (www.orlandocitychurch.com) is part Javascript, CSS and Wiki. The main problem I have is inconsistancies in positioning. On IE 7 (the browser I initially used to create the website) the positions are what they need to be. However, on Opera, Firefox, and Safari the positioning is completely different and makes the site look absurd. Is there something I can do to make the website look the same on all browsers?

Thanks in advanced,
Zachary

**whym** · 12:03 PM

The answer: ignore IE most of the time when initially designing the site.

Design for Firefox or Safari - both of these are standards compliant browsers and tend to display things AS THEY ARE SUPPOSED TO BE DISPLAYED. IE is a wild beast - it messes up many sites as it isn't as web standards compliant. IE6 is even worse than IE7!

Design it in Firefox or another standards compliant browser, then fix it in IE. You can do this using conditional comments to get the browser to use the correct stylesheet that has fixes for the particular browser. In the <head> part at the top of the HTML, include the following HTML (this particular code is for IE7 and all browsers below it - IE6, IE5.5 etc.):

Quote:

It basically says, if Lower Than or Equal to IE 7, use this stylesheet - of course you can change the name or whatever of the stylesheet - it doesn't have to be iefixes.css, but I just think that's quite a descriptive title

**LadynRed** · 11-29-2007, 03:38 PM

I can't even get to the site to look, keep getting a DNS error.
It's never a good idea to design with IE first, it will always cause you grief.

You need to be careful about using old CSS hacks - IE7 will choke on most of them.

**whym** · 12-01-2007, 11:46 AM

Quote:

Originally Posted by LadynRed

You need to be careful about using old CSS hacks - IE7 will choke on most of them.

That's true LadynRed. I tend not to use hacks too much - just normal CSS but changing the position slightly to make it the same across all browsers. For example, with my latest site, IE was completely messing up the menu so I gave it a separate stylesheet and altered the positions slightly to make it the same as Firefox.

If CSS hacks are involved, particularly the IE6 transparent filter that I use, I make a special IE6 CSS file and then a separate IE7 CSS file if required.

I know it's not the best practice, but it's hard to find ways around IE's annoying habits