PDA

View Full Version : Unordered list bullet image wrap problem in IE7



peblaco
Apr 8th, 2007, 07:18 PM
Hi all,

I've styled an unordered list with CSS and set a background image (pipe) for the bullet point. This works fine in Firefox, but when I preview it in Internet Explorer 7 where the <li> is wrapped it puts the background image bullet point on the next line in front of the wrapped text, instead of at the start of the text on the <li>. See the code below and preview it in Internet Explorer 7:

<!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=iso-8859-1" />
<title>Test</title>
<style>
#footerlinks {
width: 300px;
}

#footerlinks ul {
margin: 0px 15px 0px 15px;
padding: 5px 0px 5px 5px;
list-style-type:none;
}

#footerlinks li {
padding: 0px 10px 0px 10px;
display: inline;
background-image:url(http://www.peblaco.co.uk/images/pipe.gif);
background-position: left;
background-repeat: no-repeat;
}
</style>
</head>

<body>
<div id="footerlinks"><ul><li><a href="../index.html" title="Home">Home</a></li><li><a href="../web_site_design.html" title="Web Site Design">Web Site Design</a></li><li><a href="../web_design_services.html" title="Web Design Services">Web Design Services</a></li><li><a href="../web_design_portfolio.html" title="Web Design Portfolio">Web Design Portfolio</a></li><li><a href="../testimonials.html" title="Testimonials">Testimonials</a></li><li><a href="../web_design_prices.html" title="Web Design Prices">Web Design Prices</a></li><li><a href="../custom_web_design.html" title="Custom Web Design">Custom Web Design</a></li>
</ul></div>
</body>
</html>

Any ideas?, thankyou in advance.

Excavator
Apr 8th, 2007, 08:30 PM
Not sure why IE7 doesn't like your bullet image - I changed it to a bullet since it's not really a background image. This might work better as a different kind of menu. (http://www.cssplay.co.uk/menus/tutorial.html)

Couple different attempt here:

<!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=iso-8859-1" />
<title>Test</title>
<style>
.footerlinks {
width: 300px;
margin: 50px 0 0 0;
background-color: #cccccc;
overflow: hidden;
font-size: 1em;
}

.footerlinks ul {
margin: 0px 15px 0px 15px;
padding: 5px 0px 5px 5px;
background-color: #ffffff;
overflow: hidden;

}

.footerlinks li {
margin: 0 10px;
float: left;
list-style-image: url(http://www.peblaco.co.uk/images/pipe.gif);
list-style-position: outside;
}


.footerlinks a {
float: left;
margin: 0 5px;
text-decoration: none;
}

</style>
</head>

<body>
<div class="footerlinks">
<ul>
<li><a href="../index.html" title="Home">Home</a></li>
<li><a href="../web_site_design.html" title="Web Site Design">Web Site Design</a></li>
<li><a href="../web_design_services.html" title="Web Design Services">Web Design Services</a></li>
<li><a href="../web_design_portfolio.html" title="Web Design Portfolio">Web Design Portfolio</a></li>
<li><a href="../testimonials.html" title="Testimonials">Testimonials</a></li>
<li><a href="../web_design_prices.html" title="Web Design Prices">Web Design Prices</a></li>
<li><a href="../custom_web_design.html" title="Custom Web Design">Custom Web Design</a></li>
</ul>
</div>

<div class="footerlinks">
<a href="../index.html" title="Home">| Home</a></li>
<a href="../web_site_design.html" title="Web Site Design"> | Web Site Design</a>
<a href="../web_design_services.html" title="Web Design Services"> | Web Design Services</a>
<a href="../web_design_portfolio.html" title="Web Design Portfolio"> | Web Design Portfolio</a>
<a href="../testimonials.html" title="Testimonials"> | Testimonials</a>
<a href="../web_design_prices.html" title="Web Design Prices"> | Web Design Prices</a>
<a href="../custom_web_design.html" title="Custom Web Design"> | Custom Web Design |</a>
</div>
</body>
</html>

Arbitrator
Apr 8th, 2007, 09:03 PM
First time that I’ve witnessed this bug. Internet Explorer 7 seems to be treating the list item element as block‐level for the purposes of positioning the background image. Thus, the background image ends up being centered on the left side of the two lines instead of on the left side of the first line just before the first letter.

I seem to have solved the problem by using a conditional comment (http://www.quirksmode.org/css/condcom.html) and span elements. Note that I corrected an error (missing type attribute for the style element) and changed your DTD to that of HTML 4.01 Strict. Don’t use XHTML until Internet Explorer actually supports it.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn-GB">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Demo CF111811</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}
*#footerlinks {
width: 300px;
}
*#footerlinks ul {
margin: 0 15px;
padding: 5px 0 5px 5px;
list-style: none;
}
*#footerlinks li {
padding: 0 10px 0 0;
display: inline;
}
*#footerlinks li > span {
padding: 0 0 0 10px;
background: url("http://www.peblaco.co.uk/images/pipe.gif") left no-repeat;
}
</style>

<!--[if IE]>
<style type="text/css">
#footerlinks li > span {
padding: 0;
background: none;
}
*#footerlinks a span {
padding: 0 0 0 10px;
background: url("http://www.peblaco.co.uk/images/pipe.gif") left no-repeat;
}
</style>
<![endif]-->

</head>
<body>

<div id="footerlinks">
<ul>
<li><span><a href="../index.html" title="Home"><span>H</span>ome</a></span></li><!--
--><li><span><a href="../web_site_design.html" title="Web Site Design"><span>W</span>eb Site Design</a></span></li><!--
--><li><span><a href="../web_design_services.html" title="Web Design Services"><span>W</span>eb Design Services</a></span></li><!--
--><li><span><a href="../web_design_portfolio.html" title="Web Design Portfolio"><span>W</span>eb Design Portfolio</a></span></li><!--
--><li><span><a href="../testimonials.html" title="Testimonials"><span>T</span>estimonials</a></span></li><!--
--><li><span><a href="../web_design_prices.html" title="Web Design Prices"><span>W</span>eb Design Prices</a></span></li><!--
--><li><span><a href="../custom_web_design.html" title="Custom Web Design"><span>C</span>ustom Web Design</a></span></li>
</ul>
</div>

</body>
</html>

Code adjusted to prevent an issue in Firefox whereby the “bullet” may be followed immediately by a line‐break instead of the first word and, thus, be isolated from the list item to which it belongs. The solution was to wrap the outer span around the anchor element instead of having it precede the anchor element and be empty.

I also commented out the space between the list items elements so that indentation could be maintained while not producing a single space between the list items in the layout.

Corrected a grammatical error.

peblaco
Apr 8th, 2007, 11:25 PM
I seem to have solved the problem by using a conditional comment (http://www.quirksmode.org/css/condcom.html) and span elements.

Thanks for the replies. Thanks for taking time to do that, I had to look twice at the CSS to understand how the IE comment applies the background image to the second span and removes from the first, very clever.

I've implemented it on my site. I've also added a class of "flstart" to the first <li> links which use CSS in the stylesheet of:

#footerlinks li.flstart > span {
padding: 0 0 0 10px;
background: none;
}

and including the below into the IE conditional comment:

#footerlinks li.flstart a span {
padding: 0 0 0 10px;
background: none;

to hide the first background image (pipe) so that the pipes are only between the links which works nicely!. :)

Additional thought: Would it not just be easier then to have the background image set on the second span for both browsers wouldn't that save code?.

Arbitrator
Apr 8th, 2007, 11:50 PM
Additional thought: Would it not just be easier then to have the background image set on the second span for both browsers wouldn't that save code?.Try it. You’ll get an ugly underline under the space between the “bullet” and the text in Firefox.

peblaco
Apr 9th, 2007, 12:05 AM
Try it. You’ll get an ugly underline under the space between the “bullet” and the text in Firefox.

Yep I just tried it, interesting because it doesn't do that in IE, so is that a Firefox bug/quirk then!. I tried styling the span so there was no underline, but it's part of the link isn't it. Also tried moving the span etc which didn't work. Ah well, think I'll stick with how it is then. :)

Arbitrator
Apr 9th, 2007, 12:43 AM
Yep I just tried it, interesting because it doesn't do that in IE, so is that a Firefox bug/quirk then!.Well, anything that increases the content width of an anchor element should increase the width of the underline. I believe that Firefox is correct in this case and that that behavior is not a bug as per the spec. If the padding were applied to the anchor element (instead of the span) and the underline expanded, then it would be a bug.


I tried styling the span so there was no underline, but it's part of the link isn't it.Yes, the underline always belongs to the element that it’s declared on. Thus, for those browsers that follow the rules of CSS2.1, the following should be entirely underlined:


p { text-decoration: underline; }
span { text-decoration: none; }


<p>This is a sentence where <span>all</span> of the text is underlined.</p>

I’d heard that some browsers get this wrong, but it appears to work in Firefox 2, Internet Explorer 6+, and Opera 9 even in quirks mode.

You can also use this to interesting effect. For example, you can produce underlines that match the color of the owner rather than that of the current element:


a { color: red; text-decoration: underline; }
span { color: white; }


<a><span>Anchor Element</span></a>The result is white text with a red underline.

peblaco
Apr 9th, 2007, 01:13 AM
Well, anything that increases the content width of an anchor element should increase the width of the underline. I believe that Firefox is correct in this case and that that behavior is not a bug as per the spec. If the padding were applied to the anchor element (instead of the span) and the underline expanded, then it would be a bug.

Ah so Firefox has it right rather than Internet Explorer in this instance, funny how they can both display differently.



You can also use this to interesting effect. For example, you can produce underlines that match the color of the owner rather than that of the current element:


a { color: red; text-decoration: underline; }
span { color: white; }


<a><span>Anchor Element</span></a>The result is white text with a red underline.

Ah interesting. Thanks for the code examples, might come in handy!.