I am not a CSS expert and this one is really annoying me.
A have a simple menu defined using unordered list tags in html.
This is "dressed up" by some css to produce a horizontal menu with a white box infront of each item.
I wanted to ensure each item did not split, but that the menu could wrap onto more than one line if need be.
Great... But now, sometimes, in IE, when I wrap there are widths where my left box disappears.
See the attached image.
image 1 (top): full width, all is fine.
image 2 : how I would like, allow more than one line, don't split the list item, white box infront of item.
image 3: missing white box infront of item 6! (resized browser slightly).
image 4: same as 3, but shows a border round the link tag - see the border round item 6 - too high, and missing the left!!!
*sigh* hope someone can help! I have searched the web in vain!
Thanks for the effort, but when I test this in IE the same problem occurs, only this time the white box dissappears when the item is the last in the line (and the width is "just right", or "just wrong"!) - do you see this in IE (as with my last 2 images)??? Or is it just me???
Ah! I was going to say I don't see it, and just as I was about to take the screenshot showing it working when I hit a width where the box disappeared. Very weird. I'll try tweaking some things to see if I can fix it.
Maybe this CSS works a little better. It's still not perfect, sometimes in IE the links at the end of the line get shunted up too close to the box in front of them. But it seems to have stopped the problem with the boxes disappearing.
Code:
<style type="text/css">
ul {
list-style-type: none;
background: #090;
float: left; /* float to allow the ul to expand with the floated li elements within it, you might need to clear any elements that follow this */
width: 100%;
margin: 0; padding: 0 0 5px 0;
}
li {
float: left;
margin: 5px; padding: 0;
border-left: 1em solid #fff;
}
li a {
text-decoration: none;
font-weight: bold;
color: #fff;
margin: 0;
padding: 0 4px;
white-space: nowrap;
}
</style>
I don't care about the few times it goes a bit close!
I'm trying to work out what has made the real difference. My original code and your are very similar.I think it is that I had the border associated with the <a> rather than the <li>. I am confused as to why this has made the difference though, as I would have thought that if the <li> is staying together property so would a nested tag! But, maybe it's just a quirk?!?!?!
Thank you so much. I knew I just needed another head to look at it. Hope I can return the favour sometime!
Last edited by tigger_o_1; 11-30-2006 at 10:45 PM.
My guess is that IE is doing something strange like chopping of the left hand padding and borders on the link when it gets too close to the edge of the screen (perhaps caused by the nowrap setting?) I think this would explain what we're seeing here. When the border was applied to the link it disappeared, and now the text getting close to the square is because the padding is being removed too.