Unwanted space between vertical navigation

I have tested the navigation in Internet Explorer version 6, and the result is here. Can someone please tell me how I can fix the problem? I need it to be cross browser. Thanks in advance.

Here is my css:


#subMenu {
	float: left;
	width: 300px;
	list-style: none;
	display: block;
}

#subMenu a, #subMenu a:visited {
	background: url('images/submenubg.gif') repeat-x;
	color: #FFF;
	display: block;
	text-decoration: none;
	font-size: 22px;
	font-weight: bold;
	padding: 32px;
	clear: both;
}

#subMenu a:hover {
	font-weight: normal;
	font-size: 22px;	
}

Here is my html:


<ul id="subMenu">
	<li><a href="#" title="Services page">Services</a></li>
	<li><a href="#" title="Benefits page">Benefits</a></li>
	<li><a href="#" title="Why Office Angel? page">Why Office Angel?</a></li>
</ul>

Perhaps you need to set a width on the <a>s, or zero margins on elements. It would be better t see the full code, though.

See IE white space bug.

cheers,

gary

Gary has given a good run down of the bug and various fixes above but another fix that may be easier to remember is to float the list element and also float the anchor and then all whitespace bugs are squashed completely. The only downside is that you will need to give the list and the anchor the appropriate width (taking into account borders and padding etc).


#subMenu {
    float: left;
    width: 300px;
    list-style: none;
    display: block;
}
#subMenu a, #subMenu a:visited {
    background: url('images/submenubg.gif') repeat-x;
    color: #FFF;
    display: block;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    padding: 32px;
    clear: both;
}
#subMenu a:hover {
    font-weight: normal;
    font-size: 22px;   
}
[B]#subMenu li, #subMenu a{
    float:left;
    clear:left;
    width:300px;
}
#subMenu a{width:236px;}
[/B]

Why float both? I don’t see styles in original code for li, so why not display: inline for IE for li and float just the anchors?

not-designer-bang:

#subMenu a:hover {
    font-weight: normal;
    font-size: 22px;   
}

pls make into


#subMenu a:hover[b], #subMenu a:focus[/b] {
    font-weight: normal;
    font-size: 22px;   
}

thx

(if you also add #subMenu a:active then you also catch IE6 keyboard)

Yes you can use display:inline for the list element and it will work also but I prefer to float it because that allows the list element to be used as an extra hook if more block level styling is required. You have to add display inline to the rules so there’s not much difference in adding float:left and a width instead :slight_smile:

(There was actually a bug in IE6 in the forums the other day when display:inline was used in that sort of set up but I can’t remember what it was or find it now of course.)

The key is that the anchor must have layout. Probably the simplest fix is to set anchor to {zoom: 1;}. That leaves you free to trick up (add hooks to) elements as you like.

I am not a fan of using the float solution as somewhere along the line those floats must be contained, and that adds another layer of complexity; a fix for the fix, if you will.

cheers,

gary

I am not a fan of using the float solution as somewhere along the line those floats must be contained, and that adds another layer of complexity; a fix for the fix, if you will.

FLOAT ABSOLUTELY EVERYTHING

FLOAT THE DOG TOO

we all float down here