Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts

    What's the deal with my burger dots?

    Why do my list burger dots render jacked up in IE, especially on the last three list items? They sit correctly on the baseline of the associated text in FF and Safari. Is this a consequence of IE not interpreting floats or inline items correctly? Regardless, any ideas on how to fix it? Thanks!

    Note: I'm already using the <span> hack to add breathing room between the burger dots and the text in IE.

    Site: http://www.imageworksdisplay.com/tobacco/

    Relevant HTML:

    Code:
      <ul>
       <li><h3>Information</h3><div class="menurule"></div>
        <ul>
         <li><a href="aboutour.php"><span>About Our Fixtures</span></a></li>
         <li><a href="whyimageworks.php"><span>Why ImageWorks?</span></a></li>
         <li><a href="testimonials.php"><span>Testimonials</span></a></li>
         <li><a href="clientsets.php"><span>Client Set Gallery</span></a></li>
        </ul>
       </li>
      </ul>
    
      <ul>
       <li><h3>Wood Fixtures</h3><div class="menurule"></div>
        <ul>
         <li><a href="woodpack.php"><span>Pack Fixtures</span></a></li>
         <li><a href="#"><span>Carton Fixtures</span></a></li>
         <li><a href="#"><span>OTP Fixtures</span></a></li>
        </ul>
       </li>
      </ul>
      
      <ul>
       <li><h3>Metal Fixtures</h3><div class="menurule"></div>
        <ul>
         <li><a href="#"><span>Pack Fixtures</span></a></li>
         <li><a href="#"><span>OTP Fixtures</span></a></li>
        </ul>
       </li>
      </ul>
     
      <ul>
       <li><h3>Lighted Metal Fixtures</h3><div class="menurule"></div>
        <ul>
         <li><a href="#"><span>Pack Fixtures</span></a></li>
         <li><a href="#"><span>OTP Fixtures</span></a></li>
        </ul>
       </li>
      </ul>
      
      <ul>
       <li><h3>Accessories</h3><div class="menurule"></div>
        <ul>
         <li><a href="woodacc.php"><span>For Wood Fixtures</span></a></li>
         <li><a href="metalacc.php"><span>For Metal Fixtures</span></a></li>
        </ul>
       </li>
      </ul>
      
      <ul class="bottomlinks">
       <li><h3><a href="#"><span>Ordering Information</span></a></h3></li>
       <li><h3><a href="#"><span>Contact Us</span></a></h3></li>
       <li><h3><a href="http://www.imageworksdisplay.com/custom/"><span>Custom Fixtures</span></a></h3></li>
      </ul>
    Relevant CSS:

    Code:
    #sidebar ul {
    	list-style-type:none;
    	display:block;
    }
    
    #sidebar ul ul {
    	list-style-image:url("images/f30circle1.gif");
    	list-style-position: inside;
    	text-align:left;
    }
    
    #sidebar ul li, #sidebar ul ul li {
    	width:200px;
    }
    
    #sidebar ul ul li a {
    	text-decoration:none;
    	color:#000;
    	font-size:0.9em;
    }
    
    #sidebar a:hover {
    	color:#f30;
    }
    
    h3 {
    	margin:15px 0 0 0;
    	font-size:1.1em;
    }
    
    .menurule {
    	border-bottom:1px #666 solid;
    	width:100%;
    	margin:2px 0 10px 0;
    }
    
    #sidebar ul li a {
    	text-decoration:none;
    	color:#000;
    }
    
    .bottomlinks {
    	margin-top:10px;
    	list-style-image:url("images/f30circle1.gif");
    	list-style-position: inside;
    }
    
    .bottomlinks h3{
    	display:inline;
    	line-height:2em;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I wouldn't use it as a list-style-image. I would set it as a background image of the links.
    Code:
    #sidebar ul {
    	list-style-type:none;
    	display:block;
    }
    
    #sidebar ul ul {
    	list-style:none;
    	text-align:left;
    }
    
    #sidebar ul li, #sidebar ul ul li {
    	width:200px;
    }
    
    #sidebar ul ul li a {
    	text-decoration:none;
    	color:#000;
    	font-size:0.9em;
    }
    
    #sidebar a:hover {
    	color:#f30;
    }
    
    h3 {
    	margin:15px 0 0 0;
    	font-size:1.1em;
    }
    
    .menurule {
    	border-bottom:1px #666 solid;
    	width:100&#37;;
    	margin:2px 0 10px 0;
    }
    
    #sidebar ul li a {
    	text-decoration:none;
    	color:#000;
    	background:url(images/f30circle1.gif) left center no-repeat;
    	padding-left:12px;
    }
    
    .bottomlinks {
    	margin-top:10px;
    }
    
    .bottomlinks h3{
    	display:inline;
    	line-height:2em;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    BoldUlysses (05-22-2008)

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Beautiful. Thank you. I will remember that for future reference.

    As a follow-up question, I don't suppose there's any way to make the burger dots scale with the text (i.e. give them an em dimension)? It's not crucial; I'm just wondering.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You would have to place in the document as images to do that. You can't resize a background image yet in CSS.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts
    since your Q is answerred already....
    your title is great, burger dots


  •  

    Posting Permissions

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