IE bug - floating anchors

OK, my HTML

<ul id="navbar">
   <li><a href="">Link 1</a></li>
   <li><a href="">Link 2</a></li>
   <li><a href="">Link 3</a></li>
</ul>

Code (markup):

My CSS:

#navbar li a
{
height:65px;
padding-top:45px;
float:left;
width:130px;
text-align:center;
color:#000;
font-weight:bold;
font-size:large;
}

#navbar li a:hover
{
background:#FFFFFF;
}

Code (markup):

The issue is the individual list items look like a staircase in IE, with Link 1 being at the top, link 2 being a few pixels beside and below it, and link 3 below and beside that.

I think somethings screwed up with the margins,

Thanks,

BP

 

I got it too on my fake IE6. The crusties here say to float the a's and not the li's, but floating the li's instead will fix your problem.

I float the li's and still make the a's display: block to get the blockiness one wants.

What you have (see in IE6): http://stommepoes.jobva.nl/Blueparukia/parukiaorig.html

With li's floated instead:
http://stommepoes.jobva.nl/Blueparukia/parukia.html

 

Yeah, I floated the lis, but a{width: and height:} don't seem to work in Opera, and it happens on IE7 as well, don't worry abut it, I'll find something else.

 

An <a>nchor is an inline element. You have to set the display value to 'block' to give it dimensions (alternatively you could float it)

 

Yeah you could float them both, Parukia. But if you took my second code with display:block and add height and width to the a, Opera still doesn't obey?

Leo (a guy who was here) started floating everything in his menus so he could make them bounce like those Javascript menus. So I've seen where they're both floated. But I can also guess that some browser, somewhere, won't like floats in floats and will puke on it.

 

OK, I'll test with a block display,

Thanks all,

BP

 

Make the LI display:inline. The default behavior of LI's in IE (which is a 'special' - neither inline or block there) is what's messing things up.

Also, do NOT use a named font size with a px height/width container - that WILL end up breaking on large font machines.... though I probably wouldn't be specifying widths on those EITHER...

#navbar {
	float:left;
	width:100%; /* make sure this wraps the anchor if you want to apply styling */
	list-style:none;
	font:bold 18px/20px arial,helvetica,sans-serif;
}

#navbar li {
	display:inline;
}

#navbar a {
	float:left;
	padding:45px 8px 0;
	color:#000;
	text-decoration:none;
	text-align:center;
}

Code (markup):

Should do pretty much what you are looking for.