firefox rendering anomalies

[thesheep]

I have occasionally seen strange things happen in Firefox. Now I find one is plaguing the page I'm trying to design. I know the browser is in 'Pre-release' version, but does anyone know how to avoid this?

I have the following:

p#breadcrumbs { margin: 5px 0; padding: 1px 0; line-height: 15px;}
p#breadcrumbs span { background: url(../images/bread.gif) bottom right transparent;
padding: 3px 35px 5px 20px; }

-----------
<p id="breadcrumbs"><span><a href="#">home</a></span></p>

The breadcrumbs <p> is within several nested <div>s, one of which has a blue background image. The background image on the <span> element covers this where the breadcrumbs are. What's happening is I'm getting strange 1px thin horizontal blue lines above the links when they're hovered. So the blue background on the containing div is showing through the background image on the <span> element. Can I do anything about this?

[createErrorMsg]

p#breadcrumbs { margin: 5px 0; padding: 1px 0; line-height: 15px;}

(Bold is mine.)

I won't say I'm positive, but I suspect that if you got rid of that 1px padding, the 'blue line' would disappear. If you need more vertical space around the text in that <p>aragraph, try increasing the line-height, instead. The default setting for vertical-align (which vertically positions content within an inline box) is center, so a 17px line-height would give you the same result as 15px line-height plus 1px top and bottom padding. It would also make the :hover background fill the whole line box.

[thesheep]

OK I found one solution. Put the first part of the breadcrumbs in a <span> with a background colour, then add the final bit of the breadcrumbs (no link) in a second <span> element with transparent background colour and the background image. Since the rendering problem doesn't happen with a background colour, it works OK.

<p><span><a href="#">home</a><span id="last_item">this page</span></p>

Just saw your post - no removing the 1px didn't help.

[thesheep]

OK now I have another problem with it. The bottom of the 2 spans don't line up in IE6. All the attributes are the same but the first span (the one with the background colour) is 1px lower than the second span.

By the way, I'm trying to get a long thin horizontal box, that expands horizontally as the breadcrumb trail gets longer. And the right side of it has a rounded corner (hence the background image). So I'm using <span>s so that the box is only as wide as its contents. As far as I can see I couldn't use a black-level element. Is this a sensible approach?

[createErrorMsg]

Have you tried styling the <p class="breadcrumbs"> with display:inline and losing the <span>s altogether? Slight chance it might get rid of the background issues you're having.

[thesheep]

Actually yes that worked. Thanks a lot. I forgot that I could make <p>s inline. Seems the rendering problem was to do with <span>.

[vinzzz]

i think its no rendering problem, try removing the text-decoration on the hyperlink!

(i didnt get in the first place why u use spans...its a lose 'container' for your hyperlink...put it al in the hyperlinks!)