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 8 of 8
  1. #1
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts

    Where are the list bullets?

    I need to wrap some list around a floated div. It works OK in Moz, but in IE, strange enough, the list's bullets simply disappear below that floated div. What the hack?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <style type="text/css">
    .container {
    margin:30px;
    width:300px;
    border:solid 1px #000;
    text-align:justify;
    padding:6px;
    }
    .floated{
    width:100px;
    height:130px;
    float:left;
    background-color:#0099FF;
    margin:5px;
    }
    ul{
    margin:0;
    list-style-position: outside;
    position:relative;
    left:15px;
    padding-right:15px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="floated"></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <br>
    <br>
    <ul>
    <li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
    <li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
    <li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
    <li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
    </ul>
    <br>
    <br>
    Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
    <br>
    <br>
    <ul>
    <li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
    <li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
    <li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
    <li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
    </ul>
    </div>
    </body>
    </html>
    I tried all the possible ways to obtain a list (or a list like) who must:
    - wrap around a floated element
    - have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements)

    I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    Simple solution: give the list a left padding of like 25 or 30px.

    In IE the position of the list bullets is determined by a left margin while in all other browsers it’s dertermined by a left padding. I always reset it where necessary by setting left margin and padding to zero and then only work with left padding (increasing it as necessary).

    You can try it out yourself: Create simple test page with just a list and put a 1px border around it. Then play with left margin and left padding and compare IE and other browsers.

  • Users who have thanked VIPStephan for this post:

    Kor (05-20-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Um.. there are a lot issues in IE when it encounters any floated element before the list items. You might be interested in the threads Bullet not showing when list contains a (floated) image element and (IE) OL's bullet is hidden when a child (image) element is floated

    ...and an easy work around would be to satisfy with adding a background image to the list items;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Kor (05-20-2009)

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Well I'll be damned... The solution was so simple yet so illogical. a padding-left similar with the relative left position did the trick... hm
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I have discovered that, in some circumstances, a padding (even of 1px) for the LI elements would be necessary for IE6.

    And in other circumstances (when the height of the UL is smaller than the floated left layer' height) IE6 refuses to show the bullets, no-matter other workarounds. No solution for IE6 in that case.

    The most stupid browser - this IE6 - I have always said so
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    And in other circumstances (when the height of the UL is smaller than the floated left layer' height) IE6 refuses to show the bullets, no-matter other workarounds. No solution for IE6 in that case.
    In that case you could set a suitable margin-left to your <ul>, to make a simple 2 column arrangement. (Not tested, but I believe so )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Kor (05-21-2009)

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    In most cases when IE is going wrong the reason is hasLayout.

  • Users who have thanked VIPStephan for this post:

    Kor (05-21-2009)

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Thanks again. I have managed to find a workaround by using (for IE6 only) for the UL element the height:1px and the left:0. But this is to be used only for the lists which does not bypass the left floated div (in height), otherwise the text will not wrap the div.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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