...

View Full Version : ordered list next to floated element: issue with vertical alignment and text indent



Thatsid
02-13-2009, 10:45 AM
Hi,

I have an issue with an ordered list.
When the line wraps, in IE6 the number aligns suddenly to the bottom. And the text indentation Firefox goes wrong also. It should properly align with the first line of the wrapping <li>.

The same list could appear next to floated element or stand to the left side of the box.

I had to use a separate stylesheet for IE only to get the left margin right in all browsers.

See testcase here:
http://www.flink.nl/test/ordered-list-ie6.html

Because it's being used in a content management system, this structure has the following conditions:


You cannot define any widths for any of the elements
The list should also align properly to the left, without standing next to the floating element.
The content has to wrap around the element.
it's not allowed to place extra HTML-tags or classes in or around the list to influence it's behavior.


Does anyone have a bright idea?

thanks in advance!
Flink

abduraooft
02-13-2009, 10:58 AM
Why do you need those height:1%; and zoom:1; properties there? Removing them would make the display uniform.

PS: I don't think it's fair to follow the same thread on two different forums simultaneously (as there might be people who are active in both forums), just a personal thought.

Thatsid
02-13-2009, 03:51 PM
height:1%; and zoom:1; both are hacks for IE6. They set the behavior 'hasLayout' to the elements. Without it, the list will totally go nuts :)

abduraooft
02-13-2009, 03:59 PM
height:1%; and zoom:1; both are hacks for IE6. They set the behavior 'hasLayout' to the elements. Without it, the list will totally go nuts :)
But you don't both of them at the same time.

Thatsid
02-16-2009, 09:07 AM
But you don't both of them at the same time.
I substituted the height:1% in the <li> for zoom:1. This works fine indeed, but no solution to the problem yet...

abduraooft
02-16-2009, 09:21 AM
height:1%; and zoom:1; both are hacks for IE6. They set the behavior 'hasLayout' to the elements. Without it, the list will totally go nuts :)
I don't see any considerable difference when I remove those hacks from there, and it corrects the display issue of bullets.

jlhaslip
02-16-2009, 09:27 AM
Try the * { margin:0; padding: 0} and / or * html { margin:0; padding: 0} Hacks???

I don't have IE6, or I'd give it a shot for you.

abduraooft
02-16-2009, 09:40 AM
Try the * { margin:0; padding: 0} and / or * html { margin:0; padding: 0} Hacks???

I second. Just start with

*{
margin:0;
padding:0;
}
ul {
/*margin:0 0 15px 0;*/
padding:0;
/*overflow:hidden;*/
}
ul li {
/*padding:0 0 0 25px; */
background:url(http://www.flink.nl/images/example/list_item_bullet.gif) 12px 8px no-repeat;
list-style: none outside none;
text-indent:0;
/*height:1%;*/
}
ol {
overflow:hidden;
list-style-position: inside;
/*zoom:1;
margin:0 0 15px 0;
padding:0 0 0 22px;
text-indent:-23px;*/
}
ol li {
/*height:1%;*/
display:list-item;
/*padding-left:8px;
margin-left:-22px;*/
text-indent:0px;
}



I don't have IE6, or I'd give it a shot for you.

I use IE Tester (http://www.my-debugbar.com/wiki/IETester/HomePage)

Thatsid
02-25-2009, 03:42 PM
Thanks for giving it a try, abduraooft, but it doesn't work out yet...

I tested it here (http://www.flink.nl/test/ordered-list-ie6-2.html), but as you can see, it doesn't solve the problems.

Thatsid
03-02-2009, 08:02 AM
Any other ideas anyone?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum