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)

The Apache Creed: I exist to serve

Re: IE7 issue with styled list for breadcrumb display

The IE6 and 7 issues I was having with the breadcrumb display (see here) are now resolved.

Praise the Lord!

Here's the corrected code - enjoy!

<!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</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-block; height: 16px; line-height: 16px;
  *display: inline; zoom:1; /* Fix for IE6 and 7 to effect display:inline-block */
}

ul.breadcrumbs a {
  display: inline-block;
  *display: inline; zoom:1; /* Fix for IE6 and 7 to effect display:inline-block */
  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;
  padding: 0px 0px 0px 10px; margin: 0 0 0 -9px;
  *margin: 0 0 0 -5px; /* Dbl margin fix for IE6 */
}

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>
  <p>This page was originally posted with a request for help' at Godbit's Discussion Forum since it didn't work properly with IE6 and 7. It now does!</p>
  <ul class='breadcrumbs'>
    <li class='root'><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>
The Apache Creed: I exist to serve