SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Udine - Italy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Unordered lists with images CSS + IE mistery

    Hi,

    I really cannot figure out what could be wrong in writing the following code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <style type="text/css">
    body { background-color: gray; }
    .ul-box { margin: 0px; padding: 0px; list-style: none; }
    .ul-box li {
    padding-left: 17px;
    background-repeat: no-repeat;
    background-position: 0px;
    line-height: 150%;
    background-image: url(http://www.sitepoint.com/forums/images/icons/icon11.gif); }
    .contenitore {
    position: relative;
    top: 0px;
    width: 730px;
    margin: 0 auto 0;
    padding: 0px;
    text-align: left;
    }
    </style>
    </head>
    <body>
    <div class="contenitore">
    			<h1>title</h1>
    			<p>some text</p>
    			<ul class="ul-box" style="margin-bottom: 20px;">
    				<li><a href="#">list item</a></li>
    			</ul>
    			<p>some more text</p>
    			<ul class="ul-box">
    				<li><a href="#">list item</a></li>
    			</ul>
    </div>
    </body>
    </html>
    If you try it out into Internet Explorer 6 / 5 / 5.5 you will see that the gift is not visible.

    Firefox or opera are ok.

    If I remove the class .contenitore the pictures are visible.
    But I need .contenitore as I need to understad this stange behaviour...

    On my working webpage, I have the same list in more than one div inside .contenitore and somewhere gifts are visible somewhere not...

    Really a mistery for me... anybody could help understand ?

    Thanks a lot

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    ie likes children of positioned elements (or parents that have position:relative defined) to have a position defined also.

    As .contenitore is position:relative then IE would also like the following to be position:relative also.

    Code:
    .ul-box li {position:relative;}
    Alternatively take out the position:relative altogether and it would also work.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Udine - Italy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    so learning and know CSS is a sort of experice about strange behaviours

    I have set relative position for the ul too and it seems ok, if i set it for li element it goes wrong on ie 5.

    I have one more strange behaviour to solve, I try to type it here:

    I have set a 1 pixel white border around a div absolutely positioned and fixed height of 50px inside .contenitore .

    What happens in Internet Explorer is that 2 times to 10 border is missing, if I refresh the page with F5 the border is back to where it should be...

    The same happens when I put the ie window back to something else and then I take back focus to it: the missin border is back without refresching also.

    Is it something know ?
    Thanks
    Last edited by fauzzo; Jan 3, 2005 at 03:16.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sounds like the peek-a-boo bug but i'd need to see an exact sample of the code that causes it to provide the solution.

    The main culprits are again position:relative on a parent or grandparent. Or a parent or grandparent without a dimension defined therefore requiring the height:1% hack.

    Paul


Bookmarks

Posting Permissions

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