By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,327 Members | 2,627 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,327 IT Pros & Developers. It's quick & easy.

LI element position shift in IE

P: n/a
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

Oct 26 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Thu, 26 Oct 2006 22:39:44 +0100, Stanley wrote
(in article <11*********************@i3g2000cwc.googlegroups.c om>):
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>

Oct 27 '06 #2

P: n/a
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>
Oct 27 '06 #3

P: n/a
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 <BRin 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 <DIVis 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:
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>
Oct 27 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.