CSS, wrapping and disappearing borders

**tigger_o_1** · 11-29-2006, 03:15 PM

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.

#mainmenu a {
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 4px 0px 4px;
border-left: 1em solid #FFFFFF;
white-space: nowrap;
}

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 in advance...

**catbert303** · 11-29-2006, 04:50 PM

Hi,

Does the following get the effect you're looking for?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<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;
}

li {
  float: left;
  padding: 5px;
}

li a {
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  margin: 0;
  padding: 0 4px;
  border-left: 1em solid #fff;
  white-space: nowrap;
}
</style>
</head>

<body>

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li><a href="#">Item 6</a></li>
  <li><a href="#">Item 7</a></li>
  <li><a href="#">Item 8</a></li>
  <li><a href="#">Item 9</a></li>
  <li><a href="#">Item 10</a></li>
  <li><a href="#">Item 11</a></li>
  <li><a href="#">Item 12</a></li>
  <li><a href="#">Item 13</a></li>
  <li><a href="#">Item 14</a></li>
  <li><a href="#">Item 15</a></li>
  <li><a href="#">Item 16</a></li>
  <li><a href="#">Item 17</a></li>
  <li><a href="#">Item 18</a></li>
  <li><a href="#">Item 19</a></li>
  <li><a href="#">Item 20</a></li>
  <li><a href="#">Item 21</a></li>
  <li><a href="#">Item 22</a></li>
  <li><a href="#">Item 23</a></li>
  <li><a href="#">Item 24</a></li>
  <li><a href="#">Item 25</a></li>
  <li><a href="#">Item 26</a></li>
  <li><a href="#">Item 27</a></li>
</ul>

</body>
</html>

**tigger_o_1** · 11-29-2006, 05:10 PM

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???

but ever hopeful!

**catbert303** · 11-29-2006, 05:23 PM

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.

**catbert303** · 11-29-2006, 05:28 PM

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>

**tigger_o_1** · 11-29-2006, 06:24 PM

No, THATS FANTASTIC!!!!

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!

**catbert303** · 11-30-2006, 05:43 AM

No problem

and I'm sure this is a quirk

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.

Glad it works for you though

Thread: CSS, wrapping and disappearing borders

Thread Tools

Display

CSS, wrapping and disappearing borders

Posting Permissions