Navigation problems in IE

HTML & CSS
1

Hi all

I have this simple navigation demo here

http://www.ttmt.org.uk/forum/sidenav/

This is near to what I want, it’s a nav box on the side of a content area - the link selected will be white and will touch the white content area.

What I really need is the dividing borders between the links not to go the the end of the box like in the image attached.

My other problem is getting this to work in IE6, 7, 8

In IE6 the buttons are twice the thickness which I can fix with display:inline on the “li” but then I can’t stretch the white of the button to touch the white content area.

In IE7 the active area of the button is only the text - I haven’t found any solution for this.

2

^ Yes you could, zoom is good haslayout trigger that has no side effects.
If you don’t mind the fact that it is invalid css then it is always an option.

There are many haslayout triggers, it is just a matter of using what works best for you in any given situation.

3

Rayzur,
couldn’t you also trip HasLayout with zoom:1? I mean that way everything could be included in one declaration, right?

4

Hi,
You just need to set “haslayout” for IE, that is what the floats will do that Eric suggested.

A lot of times I just use the “tripswitch” when I don’t want to set widths or have floats shrinkwrapping on me. :wink:


   #side_Nav li,#side_Nav a{
     [COLOR=Blue]display:inline-block;/*IE haslayout*/[/COLOR]
   }
   #side_Nav li,#side_Nav a{
     [COLOR=Blue]display:block;/*tripswitch for all browsers*/[/COLOR]
   }   
   #side_Nav a{
     background:#f1f1ea;
     padding:.85em .8em;
     text-decoration:none;
     color:#555;
     font-size:.85em;
     font-weight:bold;
     border-top:1px solid #d8d2c6;    
   }
5

If you float the li and anchor left that should remedy all your issues. Prob then want to give the anchor a width.