Forum Moderators: not2easy
anyway this falls to pieces in all versions of explorer, and that's all my client is interested in! so here's the code:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 & Events</a></li>
<li><a href="#">Conferences & Events</a></li>
<li><a href="#">Conferences & Events</a></li>
<li><a href="#">Conferences & Events</a></li>
</ul>
</div>
and the css:
#back {
width:960px;
height:43px;
margin:0 auto;
background: url(http://www.example.com/img379/8845/menubgpu0.gif);
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:
<snip>
however, i fear that this might be way too convoluted to get working across all platforms (or at least just in IE).
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!
[edited by: engine at 3:16 pm (utc) on June 16, 2008]
[edit reason] No urls, thanks [/edit]
when i look at this in IE, the menu text falls down the page like a staircase from left to right, ...1) why is this happening? if anyone can answer just that i might be able to fix it myself.
IE's broken box model at work.: try
in the IE6 conditional comment, I used that a while ago to fix a similar problem in the tutorial I was doing, see [webmasterworld.com...] for more details.#carl2 li {float: left;}
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!
What you can do is put an image on the background and have a number of images in different colors all one under the other:
Trying it in ascii-art
+---------------------+
¦ normal image ¦
¦ 160x20 px ¦
+---------------------+
¦ red replacement ¦
¦ 160x20 px ¦
+---------------------+
¦ blue replacement ¦
¦ 160x20 px ¦
+---------------------+
...
Next give your different <a> elemetns a class so that you can choose their "type" (note that chosing the color isn;t goign to be recommended, but since I lack knowledge let's say you cann the foo, bar and you want foo to be red (for now) and bar to be blue (for now).
#carl2 .foo:hover{
background-position:0 -20px; /*red*/
}
#carl2 .bar:hover{
background-position:0 -40px; /*blue*/
}
Needs testing of course I've not tried it), but I use something rather similar (although not suing different colors for each "button" in a sliding doors implementation.
The name you might want to search for is CSS sprites.
