Topic: IE7 issue with styled list for breadcrumb display
NOW CORRECTED - SEE REPLY
Hi there,
Can anyone help me? I've been working on a styled breadcrumb display which you can see here
It validates perfectly as XHTML strict (I wouldn't want to waste anyone's time if it didn't), and works fine in everything but IE7 (okay it's probably broken in 6 too but I haven't even DARED to check that one yet...)
To make it easier to debug, I posted a greatly simplified version here - it's a bare metal version which should run just fine from a local PC (image paths are fuly-qualified and there's no other external content to complicate things) It's also reproduced in full below.
There are two bugs here affecting IE7 - one relates to truncation of background on the left for all sub items because I use a negative margin to bring the items together. To see that one go away temporarily follow the directions in the CSS under 'ul.breadcrumbs li.sub'
The second is a lot harder for me to deal with - see it clearest on the second example where a 4 pixel bar suddely appears to the right of all sub items when viewed in IE7 or quirks mode. I notice too that this effect changes dramatically if the left padding under 'ul.breadcrumbs li.sub' is changed to be equal but opposite to the negative margin (i.e. 9px instead of 10px).
Here's the full file:
<!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">
<head>
<title>Breadcrumb Styling - demo page for IE7 and 8 issues</title>
<style type="text/css">
/*<![CDATA[*/
body {
margin: 10px;
padding: 0;
font-family: Arial;
font-size: 10pt;
}
ul.breadcrumbs {
padding: 0px;
margin: 0px;
list-style-type: none;
}
ul.breadcrumbs li {
display: inline;
}
ul.breadcrumbs a {
color: #ffffff;
text-decoration: none;
}
ul.breadcrumbs a:hover {
text-decoration: underline;
}
ul.breadcrumbs li.root {
background: url(http://www.ecclesiact.com/img/sysimg/breadcrumbs_home_small.gif,29368C,5B6CD1,FFFFFF,FFFFFF,FFFF40) 0% 0% no-repeat;
padding: 0px 12px 0px 19px;
}
ul.breadcrumbs li.root:hover {
background: url(http://www.ecclesiact.com/img/sysimg/breadcrumbs_home_small.gif,29368C,5B6CD1,FFFFFF,FFFFFF,FFFF40) 0% 100% no-repeat;
}
ul.breadcrumbs li.sub {
background: url(http://www.ecclesiact.com/img/sysimg/breadcrumbs_small.gif,29368C,5B6CD1,FFFFFF,FFFFFF,FFFF40) 0% 0% no-repeat;
/* [ Prefix 'margin' with 'x' to avoid one ie7 bug - see http://haslayout.net/css/Negative-Margin-Bug ] */
margin: 0 0 0 -9px;
/* [ Changing the next line to have 9px left padding causes a completely different effect - huh! ] */
padding: 0 0 0 10px;
}
ul.breadcrumbs li.sub:hover {
background: url(http://www.ecclesiact.com/img/sysimg/breadcrumbs_small.gif,29368C,5B6CD1,FFFFFF,FFFFFF,FFFF40) 0% 100% no-repeat;
}
ul.breadcrumbs li.sub a {
background: url(http://www.ecclesiact.com/img/sysimg/breadcrumbs_small.gif,29368C,5B6CD1,FFFFFF,FFFFFF,FFFF40) 100% 0% no-repeat;
margin: 0px;
padding: 0px 9px 0px 0px;
}
ul.breadcrumbs li.sub:hover a {
background: url(http://www.ecclesiact.com/img/sysimg/breadcrumbs_small.gif,29368C,5B6CD1,FFFFFF,FFFFFF,FFFF40) 100% 100% no-repeat;
}
/*]]>*/
</style>
</head>
<body>
<ul class='breadcrumbs'>
<li class='root'><a href='/'>Home</a></li>
</ul>
<hr />
<ul class='breadcrumbs'>
<li class='sub'><a href='/'>Home</a></li>
</ul>
<hr />
<ul class='breadcrumbs'>
<li class='root'><a href='/'>Home</a></li>
<li class='sub'><a href='/articles'>Articles</a></li>
<li class='sub'><a href='/articles/weighing_the_issues'>Weighing the Issues</a></li>
</ul>
<hr />
<ul class='breadcrumbs'>
<li class='root'><a href='/'>Home</a></li>
<li class='sub'><a href='/articles'>Articles</a></li>
<li class='sub'><a href='/articles/weighing_the_issues'>Weighing the Issues</a></li>
<li class='sub'><a href='/articles/weighing_the_issues/test-this-one-please'>Test This One Please</a></li>
<li class='sub'><a href='/articles/weighing_the_issues/test-this-one-please'>1</a></li>
<li class='sub'><a href='/articles/weighing_the_issues/test-this-one-please'>2</a></li>
<li class='sub'><a href='/articles/weighing_the_issues/test-this-one-please'>3</a></li>
</ul>
</body>
</html>
Can anyone help me figure this out? I've been banging my head on this on for at least 12 hours.
Blessings and Happy Christmas,
Martin Francis
http://www.ecclesiact.com
<><
Last edited by classaxe (2011-06-24 03:00:00)