IE6 CSS Menu Layout issue

HTML & CSS
1

Hi guys,

im having a problem again with this outdated and buggy IE6. My menu look like this on IE6

screenshot

it looks good in IE 7 above, FF and Google Chrome…

screenshot

/*side nav*/
#sideNav { padding:5px; width:150px; float:left; background:#FFF; margin:0 0 15px 0}

#header-logo { width:105px; height:105px; float:left; margin-right:23px; }
#header-logo a { width:105px; height:105px; display:block; }

#sideNav ul#sideNav-left { float:left; width:130px; margin-right:17px; list-style: none; padding: 0; margin: 0; }
#sideNav ul#sideNav-left li a  {width:130px; padding: 5px 0px 1px 0px; float:left; text-transform:none; font-size:1.0em;clear:both; text-decoration: none; }
li a.home { border-bottom:1px solid #b1d239; color:#6F6F6F; } li a.home:hover { color:#b1d239;} li a.home_on { border-bottom:1px solid #b1d239; color:#b1d239; }
li a.m1 { border-bottom:1px solid #fc11b1; color:#6F6F6F; }  li a.m1:hover { color:#fc11b1; } li a.m1_on { border-bottom:1px solid #fc11b1; color:#fc11b1; }
li a.m2 { border-bottom:1px solid #1c6300; color:#6F6F6F; } li a.m2:hover { color:#1c6300; } li a.m2_on { border-bottom:1px solid #1c6300; color:#1c6300; }
li a.m3 { border-bottom:1px solid #00aeff; color:#6F6F6F; } li a.m3:hover { color:#00aeff; } li a.m3_on { border-bottom:1px solid #00aeff; color:#00aeff; }
li a.m4 { border-bottom:1px solid #a6a593; color:#6F6F6F; } li a.m4:hover { color:#a6a593; } li a.m4_on { border-bottom:1px solid #a6a593; color:#a6a593; }
li a.m5 { border-bottom:1px solid #ff8601; color:#6F6F6F; } li a.m5:hover { color:#ff8601; } li a.m5_on { border-bottom:1px solid #ff8601; color:#ff8601; }
li a.m6 { border-bottom:1px solid #fd0e0d; color:#6F6F6F; } li a.m6:hover { color:#fd0e0d; } li a.m6_on { border-bottom:1px solid #ff8601; color:#fd0e0d; }
li a.m7 { border-bottom:1px solid #eef6fb; color:#6F6F6F; } li a.m7:hover { color:#eef6fb; } li a.m7_on { border-bottom:1px solid #eef6fb; color:#eef6fb; }



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<div id="sideNav">                                                                   
            <ul id="sideNav-left">                                                                            
              <li>                                               
              <a href="#" target="_parent" title="" class="m1">Text</a>                                                                                                          
              </li>                                               
              <li>                                                                            
              <a href="#" target="_parent" title="" class="m2">Text/a>                                                                    
              </li>                                                                            
              <li>                                                               
              <a href="#" target="_parent" title="" class="m3">Text</a>                                                                          
              </li>                                               
              <li>                                 
              <a href="#" target="_parent" title="" class="m4">Text</a>                                                              
              </li>                                                                                                                     
            </ul>                                                               
          </div>
2

try to add line-height.

add style on li, not only on a

3

i add line-height: 150%; still buggy in IE6…

4

Float the list as well to kill the IE6 whitespace bugs.


#sideNav li{float:left;clear:left}

One of your anchors has a missing closing bracket and you shouldn’t be using target in a strict doctype :slight_smile:

5

Not all of this relates to your problem… but…

  1. WHY FLOAT ANY OF IT!?! You seem to want them one atop the other… so set the anchors to display:block; end of problem. If you have height issues, set the LI to display:inline and pretend they don’t exist. 130px wide container with 130px wide floats… Why are you floating them?!? Honestly I’m not even sure why you’re setting widths – and the side padding the same time as the width declaration is BOUND to cause cross browser issues even if the box model is working right.

  2. If you’re using XHTML strict, there is no such thing as a target attribute.

  3. If you’re text inside what appears to be a menu makes any sense, and you aren’t using accesskeys on it, there’s no reason to be putting TITLE on those anchors.

  4. It would be a lot easier to read your code if you’d stop stuffing everything onto one line for no good reason… you might also notice you declare margin twice on the same element by doing so – something the people who put it on one giant run-on line seem to do over and over again… stating the same property multiple times.

  5. a 1EM font-size is a pointless declaration.

  6. If a bunch of properties are getting the same value, declare them on the parent instead of targeting them – about a third of your CSS can go on the cutting room floor.

  7. /* side-nav */ #sideNav – Really? We couldn’t figure that out on our own? Sorry, pet peeve when it comes to comments; more specifically pointless comments.

  8. due to specificity oddities, I often find it easier to put classes on the parent LI and inherit than to target the anchors directly. Means later if you need an extra wrapper for a reskin you can also leverage them. Then instead of having a separate _on declaration, you could put a 'class=“current” on the anchor instead of sending a different class to the parent – allowing values to inherit.

  9. You should probably also trap :active and :focus, so keyboard navigation isn’t left out in the dark.

So first, gut the markup down to somethign that matches your doctype and is a wee bit less wasteful:


<div id="sideNav">
	<ul class="menu">
		<li class="m1">
			<a href="#" class="current">Text</a>
		</li>
		<li class="m2">
			<a href="#">Text</a>
		</li>
		<li class="m3">
			<a href="#">Text</a>
		</li>
		<li class="m4">
			<a href="#">Text</a>
		</li>
	</ul>
</div>

I put the ‘current’ class on the first one, which would be the equivalent of your m1_on state.

Then for the CSS:


#sideNav {
	width:160px;
	float:left;
	background:#FFF;
	margin:0 0 15px 0;
}

.menu {
	list-style: none;
	margin:0 15px;
}

.menu li {
	display:inline;
}

.menu a {
	position:relative; /* make IE let you click entire anchor */
	display:block;
	padding: 5px 0 1px;
	text-decoration: none;
	color:#6F6F6F;
	border-style:solid;
	border-width:0 0 1px;
}

.menu .home a {
	border-color:#B1D239;
}

.menu .home a:active,
.menu .home a:focus,
.menu .home a:hover,
.menu .home a.current {
	color:#B1D239;
}

.menu .m1 a {
	border-color:#FC11B1;
}

.menu .m1 a:active,
.menu .m1 a:focus,
.menu .m1 a:hover,
.menu .m1 a.current {
	color:#FC11B1;
}

.menu .m2 a {
	border-color:#1C6300;
}

.menu .m2 a:active,
.menu .m2 a:focus,
.menu .m2 a:hover,
.menu .m2 a.current {
	color:#1C6300;
}

.menu .m3 a {
	border-color:#00AEFF;
}

.menu .m3 a:active,
.menu .m3 a:focus,
.menu .m3 a:hover,
.menu .m3 a.current {
	color:#00AEFF;
}

.menu .m4 a {
	border-color:#A6A593;
}

.menu .m4 a:active,
.menu .m4 a:focus,
.menu .m4 a:hover,
.menu .m4 a.current {
	color:#A6A593;
}

.menu .m5 a {
	border-color:#FF8601;
}

.menu .m5 a:active,
.menu .m5 a:focus,
.menu .m5 a:hover,
.menu .m5 a.current {
	color:#FF8601;
}

.menu .m6 a {
	border-color:#FD0E0D;
}

.menu .m6 a:active,
.menu .m6 a:focus,
.menu .m6 a:hover,
.menu .m6 a.current {
	color:#FD0E0D;
}

.menu .m7 a {
	border-color:#EEF6FB;
}

.menu .m7 a:active,
.menu .m7 a:focus,
.menu .m7 a:hover,
.menu .m7 a.current {
	color:#EEF6FB;
}

Set the total width and don’t even TRY to pad the sides of #sideNav, use margins to push in the menu UL which then doesn’t even need a width, use display:inline to make the LI not even affect the layout, set the anchors to block since there’s NO reason to be floating them, set MOST of the like values for all those anchors ahead of time, then you only need to change on each one the things that are DIFFERENT.

Before adding the active and focus states it ends up throwing about a third of the CSS away, after adding those it’s STILL 300 bytes smaller.

When you have a fixed width container, there’s NO reason to state widths on stuff inside it when you can just use margins or padding to narrow as needed. Makes it easier later too if you decide to change that column width.

6

Good work Jason :slight_smile:

Seems a bug crept into the html with a duplicate opening list tag here.


<li> <li class="m2">

I would also mention that if the OP wanted a hover effect on the menu then for IE6 you would need either haslayout on the anchor (or position:relative) otherwise only the text becomes the active area. Indeed even if a hover effect isn’t required a bigger hit area is still better. :slight_smile:


.menu a{position:relative}
.menu a:hover{background:red}/* for testing*/
7

Good catch – fixed and fixed. Thankfully still under post edit time limit :smiley:

8

Thank you deathshadow60,

i implement your code, but the hover does not work…

9

Thank you for the tips, by the way number 2, How to target _blank xhtml strict compatible?

10

Recheck my post, there was a slight edit within seconds of my initailly putting it up.

On your copy you have the #sideNav before the .menu a – which is trumping the hover states with the color. ID takes precedence over classes. You either remove the #sideNav from before .menu as per my code above, or you put #sideNav before each and every hover state.

I’d choose the former.

11

You don’t… Forcing something to open in a new window is a miserable /FAIL/ at accessibility, since it breaks forward/back navigation and annoys many users (myself included) no end. They want it to open in a new window, let the user CHOOSE to open it in a new window! (middle click, ctrl-click, OR right click menu!)

But then, I use flip (sometimes called) rocker navigation. Having to move the mouse to the tab bar just to go back to what I was on? To hell with that.

It was deprecated for a REASON…

12

perfect, it works. your post are impressive.

can you check this one?

Thank you so much

13

deathshadow60,

theres a small bug… in IE6, when i mouse hover the link it will underline… i just want the color. =)/ thanks

14

You need this:


.menu a:hover{text-decoration:none}

can you check this one?

http://www.sitepoint.com/forums/css-…em-768412.html

Thank you so much

It’s not good ettiquette to point people to other posts you have made. If you are still having problems in the other thread then please post in that other thread and someone will answer :slight_smile:

15 
.menu a:hover{text-decoration:none}

Thank you Paul . noted… :slight_smile:

16

Hi Paul and deathshadow60 it is ok to add

.menu {padding: 0;}
17

Yes you will need that to cancel the default padding that some browsers apply. Jason must have missed it from his code or assumed you had reset it earlier.

18

ahh ok… i have a reset but only margin… thanks. =)

19

Since I do all my stuff using a reset… yeah, safe assumption.

20

there’s a glitch…

in IE9

in Firefox

in Google Chrome

How to fix this one? I like the Google chrome design of the menu

thanks