IE9 width problem

Question

http://testing.ipalaces.org/ looks different in IE9 where the 2nd LI in sub-navigation makes the top border. It seems the width it's at now works for every major browser but IE9. If I set it to exactly 3px less, it works good in IE9.

Is this a known bug? can I get around this without doing a conditional IE9 CSS call?

Not sure what you mean. I don't see any difference between Chrome, FF4 and IE9 on the menu and the float-down submenus. There is a gap beneath the "Welcome" though. Can you post an image? — Stephen Chung, Apr 02 '11 at 13:46

Marcel · Accepted Answer · 2011-03-29T20:52:31.587

1

The problem is that without an explicit width, #sub-navigation li.selected renders a few pixels wider in IE 9 because of font rendering, interrupting the next floated element. Forcing a width will fix it.

Also, Verdana in bold renders relatively wide so you should consider dropping it from the font-stack.

#sub-navigation li { font:700 16px/1 geneva, sans-serif; }
#sub-navigation li.selected { width:105px; }

edited Mar 29 '11 at 20:52

answered Mar 26 '11 at 22:58

Marcel

27,922
9
70
85

Yeah, I know I could just do that but I stated I did not want use conditional IE statements. – ParoX Mar 27 '11 at 02:42
This works for the main page, but please note that each page the width is different for the li.selected. I am looking for a general fix, the current fix right now is to process everything in my header php file and check for IE9 that way, as I do not want any visible IE9 work-arounds. – ParoX Mar 29 '11 at 21:21
The font problem seems to be the issue, but it didn't exist in IE8. I would change the font, but I picked verdana as the main font for a reason, also the brand's site is width out perfect for verdana. – ParoX Apr 01 '11 at 12:58

score 0 · Answer 2 · answered Mar 29 '11 at 21:39

0

How about text-overflow?

+css:

#sub-navigation li span {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}

Try this, anyway I don't have IE (Mac rulz) but in my workplace we usually optimize sites for IE too. I'll check it tomorrow if this is not going to work.

answered Mar 29 '11 at 21:39

Répás

1,812
7
28
54

1

This has no effect in IE9, or any other browser I viewed it in. Which means the problem still exists in IE9 – ParoX Mar 30 '11 at 21:03
So you posted an answer without actually confirming it works? – SomeKittens Oct 21 '13 at 23:55

score 0 · Answer 3 · answered Mar 30 '11 at 18:16

0

Can I ask, why do you have all the dropdowns featured as a nested list inside the last <li> in the navigation?

If it was me, I'd have each dropdown inside it's own list, as a sub-item fo the parent link. This way, you can inherit the horizontal boundaries of the drop-down item for the parent-item, and it should be more straightforward to match widths.

Also, the code will read more logically, and expand more easily in future.

answered Mar 30 '11 at 18:16

daveyfaherty

4,585
2
27
42

I guess because the dropdowns are the "brands" and I felt they should be under the parent-item that makes them drop down. Although not having to define set widths to match the above one is ideal, I will consider this. – ParoX Mar 30 '11 at 21:04

score 0 · Answer 4 · answered Mar 30 '11 at 22:06

0

You should set a fixed width to all your li's for the submenu depending on the number you want. right now the first list element should be set to width: 107px.

to test it, just add style="width:107px" to <li class="selected">

Good luck :)

answered Mar 30 '11 at 22:06

cmplieger

7,155
15
55
83

if the number of menu items does not change, why not just keep the width fixed? – cmplieger Mar 30 '11 at 22:08
They do change, navigate through the site. – ParoX Mar 31 '11 at 03:01

IE9 width problem

4 Answers4