Sizing good in Firefox, bad in Explorer

[jesstp]

Hi,

I am updating a website and in the CSS all widths are in em. When I open in Firefox v3.6 the sizing is perfect and the border edges line up and in Explorer v8 the borders do not line up.

This is my first time using em so im unsure if that is the reason it isn't working.

Does it have anything to do with using em instead of px, should I be using different css files for the different browsers or is there another solution?

Thanks

[drhowarddrfine]

IE8 is the worst browser on the planet so having issues with it is typical. There are bugs associated with IE and em but it depends on the situation. We need to see the complete markup to tell.

[piatkow]

IE8 is the worst browser on the planet

worse than IE6?

[drhowarddrfine]

IE6 is obsolete. As is IE7. No one should be using either and neither is produced by Microsoft anymore.

No one should be using IE8 either but that's a different story.

[tedster]

The two units are quite different, especially in how they relate to the calculated values in their parent containers. It's a topic that has been discussed quite often here. A Site Search [webmasterworld.com] will turn up many clarifying discussions and may help you discover what pitfalls you are running into.

[jesstp]

Thanks tedster, I did scan the search pages for em vs px but couldn't find if this was the reason I am having the problem. I will, however, devote more time to looking into the benefits.

The page is set up:

Image header = 775px
Inline List Navigation
Main content

The CSS used for this is:

.nav{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
align: center;
padding: 0em;
margin: 0em;
width: 77.5em;
}

.nav a{
float: left;
text-decoration: none;
color: white;
background-color: #666666;
padding: 1em 0.5em 1em 0.5em;
border-right: 1px solid white;
display: block;
width:11.81em;
}

.nav a:link{
color: #ffffff;
width: auto;
text-decoration: none;
width:11.81em;
}

.main{
font-family: Arial, Helvetica, sans-serif;
font-size: small;
background-color: #ffffff;
width: 57em;
text-align: left;
padding: 1em;
border: 0.5em;
}

The width of the Nav and the Main are different and again, no sure why, but will investigate. I just want to get it working in both browsers, as most people will be using Explorer.

[drhowarddrfine]

There is no such thing as 'align' in CSS.

[StoutFiles]

The width of the Nav and the Main are different and again, no sure why, but will investigate.

border: 0.5em; is probably your problem. IE and Firefox use a different box model. A div specified to be 10px x 10px with a 1px border all around would render as a 11px x 11px box in FireFox but as a 10px x 10px box in IE. Borders are fine but when you're lining up content and need exact pixels I'd stay far away from borders.

To solve this problem I usually use nested divs to simulate a border.

[drhowarddrfine]

IE and Firefox use a different box model.

Absolutely not true. While IE is notorious for being in 'quirks mode' where what you say will happen, using a doctype takes it out of quirks and it will render in standards mode.

[StoutFiles]

Absolutely not true.

Absolutely true considering you have to add the doctype for IE to follow standards. I use nested divs because I still had users browsing with IE 5.5, which the doctype will not fix.

[piatkow]

IE6 is obsolete. As is IE7. No one should be using either

True but in the real world big corporates are still using IE6. I don't see my current employer replacing it during the next 12 months.

[drhowarddrfine]

It doesn't matter and it's not the point. All versions of IE are the worst on the planet no matter who uses it.

[jesstp]

Thanks for the help.