[solved]Breadcrumb disappears in IE7

A link would help

http://www.qas.co.uk/products/capture-name-and-address-data/pro.htm

I don't think any of us are gonna wade through twenty stylesheets

It looks like the way you've set up the list. Can you show us the relevant CSS for the breadcrumb ul and lis?

hi again.

Thanks for getting back to me. I was hoping that this might be a reocurring issue and we wouldnt need to dig up the CSS itself.

But here is the breadcrumb css.

/* Breadcrumb based on "Fat Erik's Breadcrumbs" http://css.maxdesign.com.au/listamatic/horizontal33.htm */ #breadcrumblist { color: #f00; font: normal 10px Arial, Helvetica, sans-serif; list-style: none; margin: 0; padding: 0; } #breadcrumblist li { display: inline; margin: 0; padding: 0; } #breadcrumblist li:before { content: " > "; color: #384F89; }

/*IE workaround*/
/*All IE browsers*/
* html #breadcrumblist li {
background: url("/resources/images/shared/interface/arrow_blue_right.gif") 0 50% no-repeat;
margin: 0;
padding: 0 5px 0 8px;
}
#breadcrumb li a {
color: #384F89;
text-decoration: none;
}
#breadcrumb li a:hover {
text-decoration: underline;
}
#breadcrumb li#current {
color: #f00;
cursor:default;
}
#breadcrumb a#current {
color: #f00;
cursor:default;
text-decoration: none;
}
#breadcrumb li#appendage {
color: #f00;
cursor:default;
text-decoration: none;
}

/*Win IE browsers - hide from Mac IE\*/
* html #breadcrumblist { height: 1%; }

* html #breadcrumblist li {
display: block;
float: left;
}

/*End hide*/
/*Mac IE 5*/
* html #breadcrumblist li:first-child { background-image: none; }

Thanks again

Matt

You have used a work around for the fact that IE does not play along with the :before pseudo element and fed IE a graphic that only it will read via a star selector filter, what you may not realise is that the wonderful new shiny improved IE7 does not read either of those selectors so you actually have nothing for IE7 to display.

So you need a third workaround for IE7 not so easy! this and other little problems that linger such as hasLayout can cause trouble which is why the recommendation is to use MS Conditional Comments then you could just feed the IE rule without the star hack.

Hugo.

Thanks very much for that.

I had a quick look into conditional statements, i decided against them as it seems you can only use them in HTML (and not in CSS files themselves). I dont want mulitple 'near' copies of css files flying around.

Anyway, i used a hack instead, that targets IE7, it all seems to work fine now.

I implemented the hack as follows...

/*IE workaround*/ /*All IE browsers - less IE7*/ * html #breadcrumblist li { background: url("/resources/images/shared/interface/arrow_blue_right.gif") 0 50% no-repeat; margin: 0; padding: 0 5px 0 8px; } /*IE7 only*/ html>body #breadcrumblist li { *background: url("/resources/images/shared/interface/arrow_blue_right.gif") 0 50% no-repeat; *margin: 0; *padding: 0 5px 0 8px; }

Fair enough it's your choice , but I would just say that on balance the conditional comment method is a good one and is advised by many it's a neat solution , whereas hacks by nature are very very bad things, you have no way of knowing what browsers may do with a misuse of CSS syntax at a later date and run into all sorts of trouble.

Also if you think about it why bother with the :before element why not just use the graphic? then you have no need of hacks!