"Float: Left" looks horrible in IE but fine in firefox

By Mateo on 6 Dec 2005 at 00:05 UTC

Visit a site I am working on:

http://72.9.242.6

Be sure to view it in both firefox and IE.

The primary links work fine in firefox but are doing a "step" pattern in IE.

Here is the code from page.tpl.php

?php if (is_array($primary_links)) : ?> 
			<div id="navigation"><h3 class="hidden">Navigation</h3>
			<ul> 
			<?php foreach ($primary_links as $link): ?> 
			<li><?php print $link?></li> 
			<?php endforeach; ?> 
			</ul></div>
		<?php endif; ?>

And the code from style.css

/*THIS PART IS FOR THE NAVIGATION LINKS*/
/*.nav1 a:link, .nav1 a:visited, .nav2 a:link, .nav2 a:visited, .nav3 a:link, .nav3 a:visited{*/
#navigation li a:link, #navigation li a:visited {
	color: #FFFFFF;
	width: 80px;
	height: 20px;
	line-height: 20px;
	background-color: #29911B;
	padding: 0;
	float: left;
	display: block;
	margin-right: 3px;
}

/*HOVER EFFECTS*/
#navigation li a:hover, #navigation li a:active {
	background-color: #FFFFFF;
	margin: 1px 3px 0 0;
        color: #4E4E4E;
}

Can anyone help me fix this so that it appears the same in both browsers? As much as I hate IE, 95% of the world is still using it.

Thanks in advance.

Comments

try display:inline

chromeyellow commented 6 December 2005 at 00:42

Off the top of my head, I'd suggest trying two tweaks. First, try display:inline rather than display:block. If that doesn't fix it, drop the float:left attribute. If neither of these tweaks do the job... well, someone else will probably come along with the solution. But if not, post again only this time include the css for #navigation and/or #navigation .ul as these may be affecting the output too.

IE will usually obey you on li based menus... with a bit of coaxing.

Tag Change

Alaska commented 6 December 2005 at 01:36

If IE is having an issue with UL tags give DL a try. This may not work if IE considers both tags the same, but it is an interesting way to build up a list without the need to dump bullets, spacing, etc.

<dl>
<dt><a href="/one">one</a></dt>
</dl>

Let me know if you have any success.

We have a winner

Mateo commented 6 December 2005 at 04:14

using the DL and DT tags in combination with the display: inline worked.

YAY for drupal.

Thanks guys, seriously. I was about to pull my hair out.

A Winner

Alaska commented 7 December 2005 at 00:12

Glad the change of tags worked.

This tag set is called a definition list with DL, DT and DD tags. It is interesting to work with and can solve some of the issues that IE brings to page design as in your case. It just seems easier to use than UL LI in some applications.

Good luck with the site and I see that it is now working in IE.

Jim