SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross Browser bullet dividers on a horizontal list

    I am attempting to add image bullet dividers on a horizontal list. The problem I am having is that it does not work cross browser. Might there be a better solution for this? Thanks!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    body {
    background-color:#003366;
    }
    #mastNav ul {
    list-style: none;
    float: right;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #fff;
    }

    #mastNav ul li {
    display: inline;
    background-image: url("http://www.geocities.com/johnblz187/whiteBullet.gif");
    background-repeat:no-repeat;
    background-position: right center;
    padding: 0 4px 0 4px;
    }
    #mastNav ul li a:link {color: #fff; text-decoration: none;}
    #mastNav ul li a:visited {color: #fff; text-decoration: none;}
    #mastNav ul li a:hover {color: #fff; text-decoration: underline;}

    #mastNav ul li.mastNavLast a {
    color: #FFCC00;
    }

    #mastNav ul li.mastNavLast {
    background-image: none;
    }
    </style>
    </head>

    <body>
    <div id="mastNav">
    <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li class="mastNavLast"><a href="#">Item 5</a></li>
    </ul>
    </div>
    </body>
    </html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try floating either the list items or the anchors, then applying the background image to that.

    (By the way, just as a personal note, I prefer to use .first-child and .last-child for my first and last child classes, that way I can easily reuse them when needed.)

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you possibly provide an example of what you are referring to? As far as .first-child and .last-child I was a bit leary because of cross-browser issues. What browsers will not display those elements correctly?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .first-child and .last-child refer to class names in this case. Specifically class="first-child" and class="last-child" (not the psuedo-selectors, which I use to replace said properties due to IE 6 not understanding them).

    As for floating the list items, just float them to the left, but give them a height so you can apply the background images to them, then use some left padding to give you enough space to show the images. (And sorry, I can't provide an example right now, I'm about to log off for the day so I can get a lot of housework done, you know, mopping floors, cleaning the bathroom, stuff like that.)

    I'm sure someone else can provide one for you though.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan,

    Thank you for your help. Can someone please provide an example?

    Thanks!
    Last edited by wrxcrystal06; Nov 7, 2007 at 10:57. Reason: left out a word

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would something like this work for you?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Untitled Document</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="description" content="A brief description of the current page goes here." />
    	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
    	<style type="text/css" media="screen">
    
    		html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    		dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    		a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    		strong, sub, sup, textarea, tt, var {
    			margin: 0;
    			padding: 0;
    		}
    
    		body {
    			background: #036;
    			color: #FFF;
    		}
    
    		#menu {
    			float: right;
    			font: 11px/14px verdana, arial, helvetica, sans-serif;
    			list-style: none;
    			padding-right: 4px;
    		}
    			#menu li {
    				float: left;
    			}
    
    			#menu a {
    				background: url("http://www.geocities.com/johnblz187/whiteBullet.gif") right center no-repeat;
    				color: #FFF;
    				display: block;
    				padding: 0 4px;
    				text-decoration: none;
    			}
    
    			#menu a:hover, #menu a:active, #menu a:focus {
    				text-decoration: underline;
    			}
    
    			#menu .last-child {
    				background-image: none;
    				color: #FC0;
    			}
    
    	</style>
    </head>
    <body>
    <ul id="menu">
    	<li><a href="#">Item 1</a></li>
    	<li><a href="#">Item 2</a></li>
    	<li><a href="#">Item 3</a></li>
    	<li><a href="#">Item 4</a></li>
    	<li><a class="last-child" href="#">Item 5</a></li>
    </ul>
    </body>
    </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan,

    This is definitely getting somewhere, but it is still a bit off. The bullet does not line up in the center for any of the browsers... it appears to be a few pixels off to the left. Is there anyway around this?

    Thanks!

  8. #8
    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,

    I would float the anchor also and position the bullet vertically with a pixel height. The 50&#37; center position is likely to be rounded up and down a be 1 pixel out.

    Its probably easiest just to specify the exact position if you are that fussy. Of course it won't scale should the text be resized but thats a minor problem.

    You also need to have 6px padding on the right of the list because the bullet is 2px wide and therefore to be centred horizontally you need 4px at the beginning and 6px at the end.

    This renders pixel perfect in ie and firefox.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    body {
    background-color:#003366;
    }
    ul#mastNav {
    list-style: none;
    float: right;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #fff;
    margin:0;
    padding:0;
    }
    
    ul#mastNav li {
    float:left;
    background: url("http://www.geocities.com/johnblz187/whiteBullet.gif") no-repeat 100% 6px;
    }
    ul#mastNav li a{float:left;padding: 0 6px 0 4px;}
    ul#mastNav li a{color: #fff; text-decoration: none;}
    ul#mastNav li a:hover { text-decoration: underline;}
    
    ul#mastNav li.mastNavLast a {
    color: #FFCC00;
    }
    
    ul#mastNav li.mastNavLast {
    background-image: none;
    }
    </style>
    </head>
    <body>
        <ul id="mastNav">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li class="mastNavLast"><a href="#">Item 5</a></li>
        </ul>
    </body>
    </html>

  9. #9
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    paul is the man. haha.
    Steve Davis

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I second that, Paul is definitely the man. Thanks again for the feedback!

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eh, I just "borrowed" your original background position (was getting late). Otherwise I would have positioned it better (that, and I didn't look at how your original code rendered anyway).

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries Dan, I appreciate your help as well.


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
  •