IE6 backgound color issue

IE6 background CSS

[BalHD]

More fun with IE! From my understanding of CSS the default background-color of tags is transparent. To me this means that if a child tag doesn't have any background color set, the background of the parent should be visable. This seems to be the case with Firefox and IE7, but not with IE6. Have a look at the bottom of this page with IE6:<snip> The text in this section is contained in span tags (both the heading and the paragraph). With the heading the backgound of the parent tag shows, but not with the paragraph. The paragraph seems to be picking up the background of a distant ansestor.

I have attempted to explicitly for the span tag that I am have trouble with the be transparent i.e "background-color: transparent", but this is not working, and I have use the IE *html hack.

Any help with this IE6 issue would be welcomed!

[edited by: SuzyUK at 1:10 pm (utc) on Mar. 12, 2008]
[edit reason] Please No URI's [/edit]

[penders]

Hi BalHD, welcome to webmasterworld. Just to let you know for future posts, links to example pages aren't allowed in the forums (it will get removed) - see the Forum Charter [webmasterworld.com]. One of the reasons for this is that examples often don't stay examples for very long - in fact your page seems to work OK in both FF and IE6, as far as the transparent paragraph is concerned?!

The problem could have been an issue with Specificity [webmasterworld.com]. Increasing the Specificity of your style rules (by targeting them more precisely) could solve it?

The background of your PNG images, however, are a problem with IE6.

Just a point... why are you using SPAN tags to mark up your heading AND paragraphs? Should they not be 'heading' and 'paragraphs'? :)

[BalHD]

I am using span tags as a way to achieve valid xhtml markup and create a clickable div, without using javascript. Proper xhtml will not allow the use of "div", "h" or "p" tags inside of an "a' tags, so this my work around. When I view the page in IE6, the span tag with the css class "para" is not lefting is closest ancestor with a background show, in stead it is displaying the background-color of a very distant ancestor.

I saw a url in a post on this site before I wrote this post; I was a little supprised when I came up as a clickable link.

[penders]

I am using span tags as a way to achieve valid xhtml markup and create a clickable div, without using javascript.

I'm not sure that catering for non-javascript users at the expense of semantic markup is necessarily a good compromise? Anyway...

- in fact your page seems to work OK in both FF and IE6, as far as the transparent paragraph is concerned?!

Bizarrely I'm getting different results on 2 different machines running IE6 (supposedly the same version)? On one it's OK - same as FF. On the other I get the problem you describe. On the IE6 that works OK I also have the IE Developer Toolbar installed?! Hhhmmm?!

...and I have use the IE *html hack.

Just to note, there should be a space between the '*' (universal selector) and 'html'.

Have you tried using the

!important

rule to override the cascade? If that does sort it, then increasing the specificity (link above) of certain rules could also help solve it?

#lowerwrapper span.para { 
background-color:transparent ! important; 
:

I saw a url in a post on this site before I wrote this post; I was a little supprised when I came up as a clickable link.

Internal links and links to sites that are deemed authoritative are OK. Personal test pages unfortunately not (not my say).