LI element position shift in IE

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Stanley - 26 Oct 2006 22:39 GMT

I create a button strip using an UL list:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test page</title>
<style type="text/css">
ul.buttonstrip {
display: inline;
list-style: none;
margin: 0;
padding: 0;
line-height: 26px;
}
ul.buttonstrip li {
display: inline;
margin: 0;
padding: 2px;
}
ul.buttonstrip li a {
font-family: Arial;
font-size: 11px;
font-weight: bold;
white-space: nowrap;
padding: 1px 6px;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
text-decoration: none;
color: black;
background: transparent url(buttonface.gif);
}
</style>
</head>
<body>
<div style="width:600px">
<ul class="buttonstrip">
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
</ul>
</div>
</body>
</html>

Which display as expected in Firefox, but in IE6 and IE7, the first
button on the second row is shifted to the left. Is this a well-known
bug? Any workaround or information/links?

Thanks.

Stanley

Reply to this Message

patrick j - 27 Oct 2006 11:33 GMT

> Which display as expected in Firefox, but in IE6 and IE7, the first
> button on the second row is shifted to the left. Is this a well-known
> bug? Any workaround or information/links?

This probably won't make any difference but I'm mentioning it anyway :)
I put the display: inline; declaration in the li selector not the ul
selector in my horizontal lists. I see you have it in both selectors.

You might want to try it in just the li selector perhaps?

Signature

Patrick
Brighton, UK

<http://www.patrickjames.me.uk>

Reply to this Message

zzpat - 27 Oct 2006 19:03 GMT

> I create a button strip using an UL list:
>
[quoted text clipped - 57 lines]
>
> Stanley

Your problem isn't in the first row as you believe, it's in the second
row. The display falls apart because of the width in the div. Add
border :1px solid #000 to the div to see what's going on.

With the border on the div you can see there's a lot of excess space to
play with and the first button is already having problems - the problem
increases with each li. Try decreasing your padding from 6px to 5px in
[ul.buttonstrip li a ]

Then change the div width to 500. See if that works for you.

If you want to keep the padding you'll have to do other tweaks.

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test page</title>
<style type="text/css">
ul.buttonstrip {
display: inline;
list-style: none;
margin: 0;
padding: 0;
line-height: 26px;
}
ul.buttonstrip li {
display: inline;
margin: 0;
padding: 2px;
}
ul.buttonstrip li a {
font-family: Arial;
font-size: 11px;
font-weight: bold;
white-space: nowrap;
padding: 1px 5px;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
text-decoration: none;
color: black;
background: transparent url(buttonface.gif);
}
</style>
</head>
<body>
<div style="width:500px;">
<ul class="buttonstrip">
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
<li><a href="#">some link text</a></li>
</ul>
</div>
</body>
</html>

Reply to this Message

Stanley - 27 Oct 2006 22:53 GMT

I found out the cause of the problem is the "white-space: nowrap" which
is to prevent breaking of a "button" into two lines, however I do not
have a solution to it except put a <BR> in the last list element of the
first line. This does not fulfill my purpose to have a liquid layout
without worrying about the width of the content area. the <DIV> is put
in as a test container which in the real case, will have an unknown
width. The ideal is to have the buttons auto-wrapping to the actual
width without breaking in the middle.

> > I create a button strip using an UL list:
> >
[quoted text clipped - 124 lines]
> </body>
> </html>

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2006

LI element position shift in IE