SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove overlap of bullets and image

    How can I remove the overlapping bullets on the image on this page, I would like to move them to the right

    http://tinyurl.com/3al47gk

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    1) You can increase the right margin of that left floated image

    Code:
    .alignleft {
    background:none repeat scroll 0 0 #FFFFFF;
    border:1px solid #D3C9BA;
    float:left;
    margin-right:20px;
    padding:5px;
    vertical-align:text-top;
    }
    2) Override the default margin/padding of the UL

    Code:
    #content ul {
    margin:0;
    padding:0 0 0 20px;
    }
    If you do both of those changes you should be able to adjust the bullet position as you choose.

    As a last resort you could change the list-style-position to "inside" if you want to line the bullets up with the preceding paragraph.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    made the changes you suggested but this is still not what I want. I want the margin from the right of the image to still be 10px. while the bullets should align to the paragraph above them, without having to use the inline on the list style position

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I would get rid of that RP you just put on the UL. It is throwing off the wrapping list items below the image.

    To get any sort of x-browser consistency you are going to need to remove the default margin/padding on the UL and define them manually as I mentioned above. You have not done that yet.

    The problem is that sibling margins (the UL) slide under floats (the img). You must place margins on floats to keep other content from sliding under the floats.

    You could do as I suggested and then shift the first <p> tag left with a negative margin. That would require a class or :first-child to be used on it.

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    In IE7 the bullets are hidden on all the list items that wrap below the floated image. That was the reason I had suggested that you manually set the left padding on the UL for all browsers.

    I want the margin from the right of the image to still be 10px. while the bullets should align to the paragraph above them, without having to use the inline on the list style position
    That can be done but it is a little trickier than just using relative positioning.

    To that request I would add: "While keeping the bullet margins at 10px after they wrap below the image"

    That way they would line up with another <p> that might follow them.

    Here is what I came up with -
    http://www.css-lab.com/test/bullet-margin.html

    It takes more code to do it but it meets your requirements plus my addition while keeping all browsers within a couple of pixels (even works in IE6). We have no control over where the UA actually positions the bullets and that is where the slight 1-2px discrepancy is found.

    Even if you decide not to use the code it was a good challenge for me. I ran into the "Missing Bullet Bug" in IE7 and fixed it with inline-block. That was due to floating the first <p> tag with the intro text in it while having the UL following that float and sitting beside a float. If it had not been for that IE7 bug I could have done it without any hacks at all. The bug is present not in IE6 AFAIK.

    Here is the code for future reference -

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>UL BUllet Margins with Sibling Float</title>
     
    <style type="text/css">
    #content {
        float:left;
        width:640px;
        overflow:hidden;
        font:12px/20px Helvetica, Arial, sans-serif;
        background:#ECE8E1;
    }
    #content p {
        margin:1em 10px 1em;
        color: #716D6D;    
    }
    #content p.pic-wrap {
        float:left;
        margin:1em 24px 1em 0;/*24px rt margin (bullets slide under appx 14px)*/
    }
    #content p.pic-wrap img {
        display:block;
        border:1px solid #D3C9BA;
        padding:5px;
        background:#FFF;
    }
    #content p.pic-rt {
        /*float:left; /* triggers "missing bullet bug" in IE7 (1st bullet disappears)*/
        display:inline-block;/* the bug fix*/
        width:316px;
        margin:1em 0 1em -14px;/*-14px lt margin (slide it under p.pic-wrap's 24px rt margin to make it 10px*/    
    }
    * html #content p.pic-rt {float:left;}/*float for IE6*/
    *+html #content p.pic-rt {display:inline;}/*IE7*/
     
    #content ul {
        margin:0;
        padding:0 0 0 24px;/*places bullets appx. 10px from image*/
    }
    #content li {
        margin:5px 0;/*add vertical margins with reduced line-height*/
        line-height:15px;/*reset from #content*/
        color:#585555;
    }
    </style>
     
    </head>
    <body>
     
    <div id="content">
        <p class="pic-wrap">
            <a href="#">
                <img src="http://www.mitcentre.com/wp-content/uploads/IMG00055-20100625-1830-300x225.jpg" 
                alt="" width="300" height="225">
            </a>
        </p>
        <p class="pic-rt">
            MITC today operates from new premises situated at TG Complex Suite 3 Level 1 Brewery Street Mriehel. 
            among its facilities and Resources one will find:
        </p>
        <ul>
            <li>Reception facilities</li>
            <li>Free WiFi internet connection</li>
            <li>3 fixed computer stations with internet facilities (free use)</li>
            <li>Use of technical library (reference only)</li>
            <li>Classrooms are equipped with whiteboards, projection facilities and felt boards</li>
            <li>An interactive board</li>
            <li>A mini conference room is also available which can take a maximum of 50/60 students</li>
            <li>Photocopies (available at a charge)</li>
            <li>Central location with ample parking spaces in the vicinity</li>
            <li>Lift connecting ground floor to first floor</li>
            <li>Fully equipped to host physically disabled participants</li>
            <li>Coffee and snacks</li>
        </ul>
        <p>
            Lorem ipsum dolor sit amet consectetuer orci at vitae eget justo. Elit Vestibulum convallis cursus 
            Aenean laoreet neque Aenean justo Duis justo. Cras magna Donec Curabitur orci Pellentesque id Curabitur 
            Aliquam et Quisque. Diam lobortis Duis congue eget rhoncus ac massa auctor eget non. Vivamus eu id vel 
            enim pede et tortor ac orci tincidunt.
        </p>
    </div>
     
    </body>
    </html>


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
  •