CSS width problems in IE

  • meep
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: New York

Post 3+ Months Ago

I've been working on re-designing a website and I'm currently attempting to add in drop-down menu navigation. What I have right now is based off of html dog's suckerfish example.
My problem is getting IE to display the widths correctly.
A page demonstrating the issue is available at http://emsc32.nysed.gov/nysssa/cssproblem/index.html
and the style sheet athttp://emsc32.nysed.gov/nysssa/cssproblem/style.css
I have the width of the menu set to 48em. The items in the top row are set to 12em, and the items in the bottom row are set to 6em.
The first row of drop-downs breaks on IE's "smallest" and "largest" text settings, and the second row breaks on the "medium" setting. However, both rows appear correctly on the "smaller" and the "larger" settings. And by break, I mean that the list spills over into a second row.
I have tried tinkering around with lots of different CSS styles, but I cannot get it to work as intended. Also, in IE the second row's drop-downs are shifted to the right a bit. I haven't tinkers around much to fix this yet, since the menus sometimes overflow to a 2nd row and that needs to get fixed first.
The menus seem to work fine in firefox, and I have not been able to test it in IE7 (my department is using IE6) (all on windows).

Can someone tell me why IE does this? and, possibly, some workaround or fix for this problem?

Any help and insight would be greatly appreciated!
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I would assume that a large part of your problem is the fact that your using both a width and padding on items
Code: [ Select ]
#schools a {style.css (line 25)
padding:0.25em 0;
width:6em;
}
  1. #schools a {style.css (line 25)
  2. padding:0.25em 0;
  3. width:6em;
  4. }


Most browsers subtract the padding from the width of an element

|------------------- width ------------------|
|--- pad --||------- content ------||--pad---|

However, IE ADDS the padding to the width (making everything bigger)
|--- pad --||------------------- width ------------------||--pad---|

The simple fix is to try to avoid using width and padding together.
  • meep
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: New York

Post 3+ Months Ago

I know that IE has it's own box-model, and I've tried to work around it as best I could.
I think the problem lies with IE's font-sizing. Since I'm using ems for the widths, I think something is going wrong.
I think I'm probably going to end up using IE's conditional comments and having an IE style sheet that "fixes" the widths for IE (sets them less than 25%/12.5% so that it shouldn't overflow to a new line.)

Also I've noticed that IE displays differently if I make the font size .XYem instead of XY%, this seems strange and I think it may be related.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

did you set a base font size? for example
Code: [ Select ]
body{ font-size:100%;}
That usually makes a huge difference in bringing display sizes inline. You might also consider using a css reset if you aren't already since it will clean out browser inconsistencies and let you focus on building a more all encompassing solution.
  • meep
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: New York

Post 3+ Months Ago

I had never heard of CSS resets before, but that sounds like a good idea.
I have set a font size for the body
CSS Code: [ Select ]
body { font: 82%/150% sans-serif; }

Using .82em instead of 82% causes IE to make the text much smaller on the smaller settings, and much larger on the larger settings. Is there a reason for this? or is it just IE acting strangely?

Also, I have found a (not very elegant) solution, by adding a style sheet for IE that has all the menu-related widths shortened by .05em, IE6 now displays both rows on a single line under each of its 5 text-size settings.
I was hoping to find a solution that did not involve browser-specific sheets/conditional comments, but IE has broken my will and I gave in. If, however, there is a more elegant solution, please note it in a reply.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 19 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.