LI element position shift in IE

Stanley

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:60 0px">
<ul class="buttonst rip">
<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

Subscribe Reply

2724

patrick j

On Thu, 26 Oct 2006 22:39:44 +0100, Stanley wrote
(in article <11************ *********@i3g20 00cwc.googlegro ups.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.patrickjame s.me.uk>

Oct 27 '06 #2

zzpat

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:60 0px">
<ul class="buttonst rip">
<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:50 0px;">
<ul class="buttonst rip">
<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

Stanley

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:60 0px">
<ul class="buttonst rip">
<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:50 0px;">
<ul class="buttonst rip">
<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

Similar topics

3374

Transform XML using XSLT based on element position

by: Igor | last post by:

Is there any way to resort and xml document using xslt based on element position. For example if I have xml like this: <root> <element> 1st thing </element> <element> 2nd thing </element> <element> 3rd thing </element> </root> would it be possible using xslt only to reverse it into:

.NET Framework

2575

How to find out the position of a element in the XML Document

by: Eshrath Ali Khan | last post by:

Hi, I have a requirement where I am transforming a XML into a html using an XSL. I need to create a object for the each and every occurrence of an element named "tgroup" in the xml. Also I need to assign a unique id for this object based upon the its occurence in the xml document. (note: the unique id should not be assigned depeneding upon...

.NET Framework

3018

col element in table not working

by: Haines Brown | last post by:

I have a table with three columns, and I want the data in the first column to align left, while that in the remaining columns to align right: #testTable { text-align: right; } #leftcol { text-align: left; } <table id="testTable"> <col id="leftCol" /> <col span="2" />

HTML / CSS

19755

Position relative to parent element

by: Markus Ernst | last post by:

Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following test case element1 and element2 should be placed side by side inside a centered white container element: http://www.markusernst.ch/test.htm

HTML / CSS

6367

Removing an element of an array

by: effendi | last post by:

I wrote a simple script to remove an element of an array but I don't think this is the best way to go about it. I have a list of about five elements seperated by ";" I split the array using array.split(";") command and proceeded to update the elemment by assigning the null value to the arrayindex array=""

Javascript

3946

Getting (and setting) a style value from a element that use a class

by: Michael Bierman | last post by:

Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't...

Javascript

1342

Chnage the position of element!

by: engartte | last post by:

Hi all, Let consider the following solution: #include <stdio.h> int main () { int a, temp; int i; for(i=0; i<10; i++){

C / C++

6473

Position something relative to an inline element?

by: axlq | last post by:

I've spent most of the day struggling with what I thought would be a trivial problem. I have a hidden element that appears, outside of the normal flow, when the mouse hovers over an inline element. HOWEVER, I want the hidden element positioned at a location of my choosing relative to that inline element. Is this possible?

HTML / CSS

349

bit position

by: Ivan | last post by:

Hi all, What is an easy and general way to convert the bit number into its position? Let say that I want to set bit 25 I would do something like: void Setbit(arg) { switch(arg) ... case 25:

C / C++

7703

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7926

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

8132

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...

Online Marketing

7982

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...

General

5222

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

3656

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...

Networking - Hardware / Configuration

3644

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2116

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1226

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP