1 reply [Last post]
carlclancy
Offline
newbie
Last seen: 12 years 8 weeks ago
Joined: 2008-06-16
Posts: 1
Points: 0

first off, apologies for my first post being a relatively convoluted problem - i didn't know where else to turn!

i'm trying to make a horizontal css menu which displays a differently-coloured border under each menu item when rolled-over. i've tried a few techniques, and settled on one which work perfectly in opera 9.27 (for mac anyway) and any version of firefox i've tried it in. unfortunately, it falls to pieces in all versions of explorer, and that's all my client is interested in! here's the code:

html:

<div id="back" style='text-align:center; '>
<ul id='carl2' style='text-align:center; '>
			<li><a href="#" class="current">Our Company</a></li>
			<li><a href="#">Our Business</a></li>
			<li><a href="#">Conferences &amp; Events</a></li>
			<li><a href="#">Conferences &amp; Events</a></li>          
            <li><a href="#">Conferences &amp; Events</a></li>
            <li><a href="#">Conferences &amp; Events</a></li>
  </ul>
 
  </div>

and the css:

#back {
	width:960px;
	height:43px;
	margin:0 auto;
	background: url(<a href="http://img379.imageshack.us/img379/8845/menubgpu0.gif" rel="nofollow">http://img379.imageshack.us/img379/8845/menubgpu0.gif</a>);
	background-repeat: no-repeat;
}
 
#carl2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:.8em;
	width:960px;
	height:43px;
	margin:0 auto;
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}
 
    #carl2  a      {
	display:block;
	text-decoration: none;
	color:#666;
	width:160px;
	height:20px;
	margin:0;
	float:left;
	padding: 12px 0 0 0;
	border-bottom: 12px solid white;
}
  #carl2 a:hover {
	display:block;
	border: none;
	color:#999;
}
 
#carl2 a.current {
border-bottom: 0px solid white;
}

when i look at this in IE, the menu text falls down the page like a staircase from left to right, outside of the div it's contained in. that only started happening when i put the list inside a div though (which i did trying to solve a prior layout problem). so my questions are:

1) why is this happening? if anyone can answer just that i might be able to fix it myself.
2) can anyone think of a better way to get the effect i'm looking for? any examples? i can't find any css menus online that have a different-coloured hover for each item. maybe there's a good reason!

the next step is that i want a second level of list items, adding the functionality from this list:

http://www.coremediadesign.co.uk/tutorials/css_tabbed_navigation_1_sample.html

anyway, if anyone has any comments or help i'd be very grateful, even if your comment is "there's no way that's gonna work" or "clean up your code and come back".

thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You'll need to concentrate

You'll need to concentrate on the li elements, float them with a width rather than the anchors

And please when posting provide all the code rather than snippets so that we can see the whole picture.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me