SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bullets hidden behind floated image in ie

    Hello,

    In ie the background image for list items (the method I'm using to create bullets) is hidden behind floated images. I'm using essentially the following markup, with the whole thing contained within a floated content area.

    Code HTML4Strict:
    <p><img src="students.jpg">text</p>
    </ul>
    <LI>BULLET</LI>
    <LI>BULLET</LI>
    <LI>BULLET</LI>
    <LI>BULLET</LI>
    </UL>

    and CSS

    Code CSS:
    p img {
        float: left;
        margin: 5px;
    }
     
    li {
        background: url(bullet.gif) no-repeat 0px 6px;
    	padding : 1px 0px 2px 12px;
    }

    Any ideas how to fix the problem?

    Cheers

    Rhys

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Code:
    <p><img src="students.jpg">text</p>
    <ul>
    <li>BULLET</li>
    <li>BULLET</li>
    <li>BULLET</li>
    <li>BULLET</li>
    </ul>
    Code:
    p img {
        float: left;
        margin: 5px;
    }
     
    ul {
      clear: left; <--maybe this was the problem?
      list-style-image:  url(bullet.gif);
      list-style-type: disc; <-- so something is there for people who have images off... a sort of backup
    }
    
    li {
        padding : 1px 0px 2px 12px;
    }
    I dunno if the clear will be a problem while they're both sitting in a float, but that's my best guess. I also changed the image style, but I guess you don't have to.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bullets still hide behind the image unfortunately
    Last edited by Rhysickle; Oct 24, 2007 at 06:10. Reason: typo

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <p><img src="students.jpg">text</p>
    </ul>
    <LI>BULLET</LI>
    <LI>BULLET</LI>
    <LI>BULLET</LI>
    <LI>BULLET</LI>
    </UL>
    If this is the full code then it's wrong. You have two closing tags for the <ul> and you need an alt attribute on your image tag.

    I'd also always use lower case for tags, elements and attributes for consistency as ID's and classes are case sensitive so it's always good to use the same method (If you use XHTML then you must use lower case anyway).

    So, going on that advice, you're HTML needs to change to this

    Code:
    <p><img src="students.jpg" alt="">text</p>
    <ul>
    	<li>BULLET</li>
    	<li>BULLET</li>
    	<li>BULLET</li>
    	<li>BULLET</li>
    </ul>
    I'm not entirely sure what you're trying to achieve but I suspect you're having a problem with the first bullet hanging off the <p>

    What I'd tend to do here is clear the float on the <ul> by adding the following to your code

    Code:
    ul {
    	clear: both;	
    }
    So your complete code would become something like this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>IE Tab test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    p img {
        float: left;
        margin: 5px;
    }
    ul {
    	clear: both;	
    }
    li {
        background: url(bullet.gif) no-repeat 0px 6px;
        padding : 1px 0px 2px 12px;
    }
    </style>
    </head>
    <body>
    <p><img src="students.jpg" alt="">text</p>
    <ul>
    	<li>BULLET</li>
    	<li>BULLET</li>
    	<li>BULLET</li>
    	<li>BULLET</li>
    </ul>
    </body>
    </html>
    You could then remove the bullets from the <ul> if you wished by adding

    Code:
    ul {
    	clear: both;
            list-style-type: none;
    }
    And then remove the indentation if you so wished by removing the padding and margin from the list

    Code:
    ul {
    	clear: both;
    	list-style-type: none;
    	padding: 0;
    	margin: 0;
    }
    Hope that helps.

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

    I think I understand what the problem is

    If I'm understanding correctly you have a largish image floated to the left and you are trying to have a list to the right of the image. The problem will occur in that the list marker is placed at the left of the current line as if the float wasn't there (which it isn't). The list image will be under the image and either tight to the left side of the window or just under the image depending on browser.

    You will either have to add enough padding left to the ul so that the padding is wider than the floated image. e.g. id the image is 300px then add 325px padding left.

    Code:
    ul{
    list-style:disc url(images/arrow2.gif);
    margin:0;
    padding:0 0 0 325px;
    }
    Of course should your list be longer than the height of the image it won't wrap underneath because it has 325px left padding.

    Alternatively you could set the list-style to inside and then the bullet would show but as the bullet is then treated as inline the text will wrap under the bullet.

    Code:
    ul{
    list-style:disc inside url(images/arrow2.gif);
    margin:0;
    padding:0;
    }
    Alternatively put the ul in a container and float the container left also (you can't float the UL because IE will lose the bullet).

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - that's exactly the problem.

    I think I might use the inside solution for ie. It's not exactly what I want, but I think may be the best solution given the way floats behave.

    Cheers

    Rhys


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
  •