Stylesheets - LI element position shift in IE

Author

LI element position shift in IE

Stanley

2006-11-05, 11:33 pm

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

patrick j

2006-11-05, 11:33 pm

On Thu, 26 Oct 2006 22:39:44 +0100, Stanley wrote
(in article <1161898784.436496.23890@i3g2000cwc.googlegroups.com> ):

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

--
Patrick
Brighton, UK

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

zzpat

2006-11-05, 11:33 pm

Stanley wrote:
> 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
>

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>

Stanley

2006-11-05, 11:33 pm

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.

zzpat wrote:
> Stanley wrote:
>
> 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>