homepage Welcome to WebmasterWorld Guest from 54.205.189.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Sizing good in Firefox, bad in Explorer
jesstp




msg:4104306
 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




msg:4104390
 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




msg:4104459
 2:48 pm on Mar 25, 2010 (gmt 0)


IE8 is the worst browser on the planet

worse than IE6?

drhowarddrfine




msg:4104507
 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




msg:4104520
 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




msg:4104967
 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




msg:4105087
 10:52 am on Mar 26, 2010 (gmt 0)

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

StoutFiles




msg:4105095
 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




msg:4105169
 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




msg:4105181
 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




msg:4105245
 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




msg:4105316
 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




msg:4106226
 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