Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation ordered list next to floated element: issue with vertical alignment and text indent

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    Last edited by abduraooft; 02-13-2009 at 11:02 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by Thatsid View Post
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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...

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by Thatsid View Post
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    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.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by jlhaslip View Post
    Try the * { margin:0; padding: 0} and / or * html { margin:0; padding: 0} Hacks???
    I second. Just start with
    Code:
    *{
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for giving it a try, abduraooft, but it doesn't work out yet...

    I tested it here, but as you can see, it doesn't solve the problems.

  • #10
    New Coder
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any other ideas anyone?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •