homepage Welcome to WebmasterWorld Guest from 54.145.252.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Sizing good in Firefox, bad in Explorer
jesstp

5+ Year Member



 
Msg#: 4104304 posted 10:11 am on Mar 25, 2010 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4104304 posted 1:02 pm on Mar 25, 2010 (gmt 0)

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

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



 
Msg#: 4104304 posted 2:48 pm on Mar 25, 2010 (gmt 0)


IE8 is the worst browser on the planet

worse than IE6?

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4104304 posted 4:01 pm on Mar 25, 2010 (gmt 0)

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

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



 
Msg#: 4104304 posted 4:22 pm on Mar 25, 2010 (gmt 0)

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

5+ Year Member



 
Msg#: 4104304 posted 5:00 am on Mar 26, 2010 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4104304 posted 10:52 am on Mar 26, 2010 (gmt 0)

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

StoutFiles

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4104304 posted 11:17 am on Mar 26, 2010 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4104304 posted 1:34 pm on Mar 26, 2010 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4104304 posted 1:58 pm on Mar 26, 2010 (gmt 0)

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

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



 
Msg#: 4104304 posted 3:42 pm on Mar 26, 2010 (gmt 0)


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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4104304 posted 5:24 pm on Mar 26, 2010 (gmt 0)

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

5+ Year Member



 
Msg#: 4104304 posted 3:48 am on Mar 29, 2010 (gmt 0)

Thanks for the help.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved