IE7 Horizontal menu crooked + float issue

HTML & CSS
1

Hi folks,

I am putting together a small site and ran into display issues with IE6 and IE7 (only concerned about IE7 functionality though). Attached is a screenshot.

I believe there are two separate issues and have been struggling to resolve them for the past two days. The menu is crooked on all three pages, and on the home page my left column is floating below the right column for some reason. Any suggestions or advice on how to proceed would be greatly appreciated.

HTML for menu:

<ul id="menu">
  		<li><a href="index.html" class="home">Home</a></li>
   		 <li><a href="tickets.html" class="tickets">Super Speeder Tickets</a></li>
   		 <li><a href="about.html" class="about">About Our Firm</a></li></ul>

CSS for menu:

ul#menu {
	width:800px;
	list-style:none;
}
ul#menu li a {
	display:block;
	height:62px;
	background-image:url('menu2.png');
	background-repeat:no-repeat;
	text-indent:-9999px;
	margin-bottom:15px;
	float:left;
	width:250px;
	overflow:hidden;
}
ul#menu li a.home {
	width:225px;
	background-position:0px 0px;
}
ul#menu li a.tickets {
	width:250px;
	background-position:-225px 0px;
}
ul#menu li a.about {
	width:250px;
	background-position:-476px 0px;
}

Full stylesheet is here and menu items are at the bottom. Thanks in advance for taking a look.

2

Hi gatrafficlawyer. Welcome to SitePoint. :slight_smile:

Firstly, instead of floating the <a> in the menu, float the LIs, and also give them a width.

Secondly, for columns in the content area, first wrap each column in a div and float it left or right. Make sure the column widths don’t exceed the width of the container, too. My preferred way to ensure this is to float the left column left and the right column right, and space is left between them that way with their combined widths being less than the width of the container.

3

Thank you for the warm welcome and the prompt response. The float left/right issue is resolved but the menu remains crooked. Screenshot of the problem attached. Here’s the newest CSS:

ul#menu {
	list-style:none;
}
ul#menu li a {
	display:inline;
	height:62px;
	background-image:url('menu2.png');
	background-repeat:no-repeat;
	text-indent:-9999px;
	margin-bottom:15px;
	width:250px;
}
ul#menu li a.home {
	width:225px;
	background-position:0px 0px;
	float:left;
}
ul#menu li a.tickets {
	width:250px;
	background-position:-225px 0px;
	float:left;
}
ul#menu li a.about {
	width:250px;
	background-position:-476px 0px;
	float:left;
}

I’m new to CSS. Any suggestions on what is causing the crooked menu, and more importantly how I can fix it? If necessary, full stylesheet is here.

4

I still think my first suggestion will work. Try adding this to your style sheet:

ul#menu li {
  float: left;
  width: 225px;
}
5

Looks like that did the trick! Thank you very much for your help!

6

Great. Glad that helped. :slight_smile: