Welcome to WebmasterWorld Guest from 54.166.220.138

Forum Moderators: incrediBILL

Message Too Old, No Replies

Sizing good in Firefox, bad in Explorer

     
10:11 am on Mar 25, 2010 (gmt 0)

5+ Year Member



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
1:02 pm on Mar 25, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
2:48 pm on Mar 25, 2010 (gmt 0)

WebmasterWorld Senior Member piatkow is a WebmasterWorld Top Contributor of All Time 5+ Year Member




IE8 is the worst browser on the planet

worse than IE6?
4:01 pm on Mar 25, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
4:22 pm on Mar 25, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
5:00 am on Mar 26, 2010 (gmt 0)

5+ Year Member



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.
10:52 am on Mar 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There is no such thing as 'align' in CSS.
11:17 am on Mar 26, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
1:34 pm on Mar 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
1:58 pm on Mar 26, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
3:42 pm on Mar 26, 2010 (gmt 0)

WebmasterWorld Senior Member piatkow is a WebmasterWorld Top Contributor of All Time 5+ Year Member




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.
5:24 pm on Mar 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
3:48 am on Mar 29, 2010 (gmt 0)

5+ Year Member



Thanks for the help.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month