...

View Full Version : What's the deal with my burger dots?



BoldUlysses
05-22-2008, 09:49 PM
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:


<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:


#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;
}

_Aerospace_Eng_
05-22-2008, 10:00 PM
I wouldn't use it as a list-style-image. I would set it as a background image of the links.

#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;
}

BoldUlysses
05-22-2008, 10:17 PM
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.

_Aerospace_Eng_
05-23-2008, 12:40 AM
You would have to place in the document as images to do that. You can't resize a background image yet in CSS.

FJbrian
05-23-2008, 03:56 AM
since your Q is answerred already....
your title is great, burger dots :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum