6 replies [Last post]
mhersee
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2007-01-08
Posts: 4
Points: 0

Hi all,

We have noticed a problem with our site in IE7. For some reason the breadcrumb ">" diappears.

We have not seen this problem with other browsers. I believe we initially got this code from "a list apart".

Questions
1 - has anybody else experienced this issue?
2 - is there a hack for IE7 we can use to resolve?

Thanks in advance for your help

Matt

mhersee
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2007-01-08
Posts: 4
Points: 0

A link would help

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I don't think any of us are

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

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

Verschwindende wrote:
  • CSS doesn't make pies

mhersee
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2007-01-08
Posts: 4
Points: 0

hi again. Thanks for

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You have used a work around

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 Smile so you actually have nothing for IE7 to display.

So you need a third workaround for IE7 Smile 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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mhersee
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2007-01-08
Posts: 4
Points: 0

Thanks very much for

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Fair enough it's your choice

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!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me