SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot SystemLogic's Avatar
    Join Date
    Jan 2001
    Location
    Northern VA
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE vs. FF Bullet layout issue

    Here's a screenshot of the issues I'm seeing between IE and FF (looks correct in FF):



    So there are two issues:

    1) The bullets are not lining up correctly in IE, but they are in FF.
    2) There should be no bullet on the "more services" link, which there isn't in FF but there is in IE.

    Here's the CSS:

    Code:
    #what {
        width: 245px;
        height: 225px;
        background-color: #ededed;
        border: 2px solid #d3d3d3;
        float: right;
    }
    
    #what ul {
        list-style: disc url('../i/arrowbullet.gif') inside;
        margin: 0;
        margin-top: 2px;
        padding: 0 10px 0 10px;;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .8em;
    }
    
    #what li {
        padding: 2px;
        padding-left: 8px;
        border: 1px solid #d3d3d3;
    }
    
    #what .b {                       /* Alternate rows */
        background-color: #FFF;
        border-top: 0px;
        border-bottom: 0px;
    }
    
    #what a {
        font-weight: bold;
        margin-right: 8px;
        color: #058ee4;
        text-decoration: none;
    }
    
    #what a:hover {
        font-weight: bold;
        margin-right: 8px;
        color: #058ee4;
        text-decoration: underline;
        background-color: #FFF;
    }
    Here's the HTML:


    Code:
        <div id="what">
            <h2>What we do.</h2>
            <ul>
                <li>pc/laptop repair</li>
                <li class="b">hardware/software upgrades</li>
                <li>virus/adware removal</li>
                <li class="b">network design &amp; installation</li>
                <li>wireless installation</li>
                <li class="b">new pc setup</li>
                <li>web design/hosting</li>
                <li class="b">data backup/recovery</li>
                <li>maintenance agreements</li>
                <li class="b">formatting services</li>
                <li style="text-align: right; border: 0px; border-top: 1px solid #d3d3d3; list-style: none;"><a href="services">more services &gt;&gt;</a></li>
            </ul>
        </div>

  2. #2
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bullets in lists are a quirky thing - unreliable browser behavior, its not used very often because of that, especially when using images

    common solution is to use background images with some padding to simulate bulleted lists appearance (so image-bullet would appear where intended)

    try this:
    Code:
    #what ul {
    	list-style:none;
        margin: 0;
        margin-top: 2px;
        padding: 0 10px 0 10px;;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .8em;
    }
    
    #what li {
        background: transparent url('../i/arrowbullet.gif') no-repeat 2px 50&#37;;
        padding: 2px;
        padding-left: 20px;
        border: 1px solid #d3d3d3;
    }
    #what .more {
    	text-align: right; 
    	border: 0px; 
    	border-top: 1px solid #d3d3d3; 
    	background-image:none;
    	}
    Code:
        <div id="what">
            <h2>What we do.</h2>
            <ul>
                <li>pc/laptop repair</li>
                <li class="b">hardware/software upgrades</li>
                <li>virus/adware removal</li>
                <li class="b">network design &amp; installation</li>
                <li>wireless installation</li>
                <li class="b">new pc setup</li>
                <li>web design/hosting</li>
                <li class="b">data backup/recovery</li>
                <li>maintenance agreements</li>
                <li class="b">formatting services</li>
                <li class="more"><a href="services">more services &gt;&gt;</a></li>
            </ul>
        </div>
    ***sorry didnt notice the header

  3. #3
    SitePoint Zealot SystemLogic's Avatar
    Join Date
    Jan 2001
    Location
    Northern VA
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by marbly View Post
    bullets in lists are a quirky thing - unreliable browser behavior, its not used very often because of that, especially when using images

    common solution is to use background images with some padding to simulate bulleted lists appearance (so image-bullet would appear where intended)

    try this:
    Code:
    #what ul {
        list-style:none;
        margin: 0;
        margin-top: 2px;
        padding: 0 10px 0 10px;;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .8em;
    }
     
    #what li {
        background: transparent url('../i/arrowbullet.gif') no-repeat 2px 50%;
        padding: 2px;
        padding-left: 20px;
        border: 1px solid #d3d3d3;
    }
    #what .more {
        text-align: right; 
        border: 0px; 
        border-top: 1px solid #d3d3d3; 
        background-image:none;
        }
    Code:
        <div id="what">
            <h2>What we do.</h2>
            <ul>
                <li>pc/laptop repair</li>
                <li class="b">hardware/software upgrades</li>
                <li>virus/adware removal</li>
                <li class="b">network design &amp; installation</li>
                <li>wireless installation</li>
                <li class="b">new pc setup</li>
                <li>web design/hosting</li>
                <li class="b">data backup/recovery</li>
                <li>maintenance agreements</li>
                <li class="b">formatting services</li>
                <li class="more"><a href="services">more services &gt;&gt;</a></li>
            </ul>
        </div>
    ***sorry didnt notice the header
    Ok that seems to work out ok....so if I wanted the bullet to be in a different place (for example padded left 20px), would I then need to actually change the image to have 20px of transparent space? Because right now it's not lined up correctly...

  4. #4
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, dont change the image, you can position it using css

    look in the rules for #what li:

    background: transparent url('../i/arrowbullet.gif') no-repeat 2px 50%;

    -the 2px from above move the bg image 2px in horizontal direction
    -the 50% centers the bg image vertically

    if you need to push the image to the right horizontally just change 2px into something greater, i think in your case it will be 7px or 8px

    background: transparent url('../i/arrowbullet.gif') no-repeat 7px 50%;

    so in the end youd have
    Code:
    #what li {
        background: transparent url('../i/arrowbullet.gif') no-repeat 7px 50%;
        padding: 2px;
        padding-left: 20px;
        border: 1px solid #d3d3d3;
    }


    this will only move the bg image to the right, but it wont move text. If you also need to adjust the text change left-padding in #what li

    padding-left: 30px;

  5. #5
    SitePoint Zealot SystemLogic's Avatar
    Join Date
    Jan 2001
    Location
    Northern VA
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by marbly View Post
    no, dont change the image, you can position it using css

    look in the rules for #what li:

    background: transparent url('../i/arrowbullet.gif') no-repeat 2px 50%;

    -the 2px from above move the bg image 2px in horizontal direction
    -the 50% centers the bg image vertically

    if you need to push the image to the right horizontally just change 2px into something greater, i think in your case it will be 7px or 8px

    background: transparent url('../i/arrowbullet.gif') no-repeat 7px 50%;

    so in the end youd have
    Code:
    #what li {
        background: transparent url('../i/arrowbullet.gif') no-repeat 7px 50%;
        padding: 2px;
        padding-left: 20px;
        border: 1px solid #d3d3d3;
    }
    this will only move the bg image to the right, but it wont move text. If you also need to adjust the text change left-padding in #what li

    padding-left: 30px;
    Great, that worked perfect, thanks! Now I have just one more issue on the site which I'll post a new thread about shortly and I think everything should be good


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
  •