li navigation alignment in IE

hi, new to the forum.

I've got a page with secondary navigation within the body of the page that hides/reveals various divs, everything works well and displays fine in firefox and safari, however in IE 6 and 7 this navigation in the body is getting thrown out of alignment and for lack of a better term is "stair stepping" down from left to right as opposed to aligning correctly.

see below for the page that is giving me the issue.

http://www.dkworkspaces.com/test_site/services.php

thanks in advance for your help.

k

 

That's the default behavior of the LI biting you. I'd change the CSS for that greatly since you're using a 'bad' image replacement technique (since your image replacement doesn't show ANYTHING images off), uses absolute positioning for no fathomable reason - etc, etc.

The 'fix' is to make the LI display:inline and float the anchors left.

Though again, I'd axe all the redundant and unneccessary CSS, switch to a glider-levin style image replacement, axe the absolute positioning, etc, etc, etc.

 

Isn't there also some bug where you have to list something else too, like color: #whatever under the li? Cause I've seen that in your code sometimes, with a comment saying something like /*IE7 fix*/

?

 

The only time I use color inside a menu like that is on the anchor - specifically on the hover/active states for the anchor because if you don't include an actual 'element' change, the hover states will sometimes 'stick' on, even once you move the mouse off them. Common problem in IE.

 

thanks so much for the advice.

 

<ul id="menu">
	<li><a href="#">My</a></li>
	<li><a href="#">Little</a></li>
	<li><a href="#">Menu</a></li>
</ul>

HTML:

ul#menu li a {
	display: block;
	width: 130px;
	text-align: center;
	font-weight: bold;
	float: left;
	color: white;
	font-size: 1.2em;
	text-decoration: none;
	background: #600;
}

HTML:

ul#menu li {
	display: inline; /* Prevents "stepdown" */
}

HTML:

Article was taken from CSS-Tricks!

 

^ 'cept the floats arent being contained.

 

thanks for all the help, displaying the list inline worked really well, the only thing i can't get at this point is getting the main nav to align vertically in the same way it does in FF, IE7, etc. . . I know it is something small and stupid but the solution excapes me.

http://www.dkworkspaces.com/test_site/services_1.php

thanks in advance for all your valuable help

 

In which browser?

 

sorry, IE6