Weird behavior in IE7 with DIVs wrapped in links

Give your URL to http://validator.w3.org/ and see the syntactical
mistakes you're making in your markup. Validate your CSS at
http://jigsaw.w3.org/css-validator/

> ...etc...

>
> === Begin CSS for the buttons ===

Also available via URL.
....
>
> #navigation_bar .buttons_wrap .buttons_list .works a div,
> #navigation_bar .buttons_wrap .buttons_list .works a:link div,
> #navigation_bar .buttons_wrap .buttons_list .works a:visited .link {
> background: transparent url(images/button_works.png) top no-repeat;
> width: 240px;
> height: 120px;
> }
> #navigation_bar .buttons_wrap .buttons_list .works a:hover .link {

Suspiciously complicated (or just unnecessarily specific) selectors.

....

> * html #navigation_bar .buttons_wrap .buttons_list .works a div, *
> html #navigation_bar .buttons_wrap .buttons_list .works a:link div, *
> html #navigation_bar .buttons_wrap .buttons_list .works
> a:visited .link {
> background-image: none;
> filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/wp-
> content/themes/mortengoll/images/button_works.png");
> }

Do you know that IE7 treats the * HTML Filter differntly than previous
IE versions? http://msdn2.microsoft.com/en-us/library/bb250496.aspx


>
> They work in IE6, although everything is extremely slow. They also
> work fine in Safari, Firefox, Konqueror, and Opera.

Amazing that anything works. Depends on the value of "work", I guess.

I will say that I did not detect any tranparency in FF, so your page
looks like it could just use colored backgrounds on hover/non-hover.
That would save the delay in getting some single-color, non-transparent
image, which is what I see. (I didn't need to see all that wood grain
anyway. ;-) )

>
> Does anyone know how to fix this?

Rework the page, more simply, using valid code. Seriously.

HTH. GL.

P.S. Don't do this: body {font-size: 13px;}

--
John
Pondering the value of the UIP: http://improve-usenet.org/

>
> Give your URL tohttp://validator.w3.org/and see the syntactical
> mistakes you're making in your markup. Validate your CSS athttp://jigsaw.w3.org/css-validator/
>

Yup, you're right.

> > ...etc...
>
> > === Begin CSS for the buttons ===
>
> Also available via URL.
> ...
>
>
>
> > #navigation_bar .buttons_wrap .buttons_list .works a div,
> > #navigation_bar .buttons_wrap .buttons_list .works a:link div,
> > #navigation_bar .buttons_wrap .buttons_list .works a:visited .link {
> > background: transparent url(images/button_works.png) top no-repeat;
> > width: 240px;
> > height: 120px;
> > }
> > #navigation_bar .buttons_wrap .buttons_list .works a:hover .link {
>
> Suspiciously complicated (or just unnecessarily specific) selectors.
>

You could say that, I'd say making sure there's no funky collisions
later on and it makes reading the CSS easier since ".works
a:visited .link" is not as describing as
"#navigation_bar .buttons_wrap .buttons_list .works a:visited .link",
which clearly shows that it's something in the navigation bar,
actually something inside a buttons list, etc. Either way, it's not an
error ;)

> ...
>
> > * html #navigation_bar .buttons_wrap .buttons_list .works a div, *
> > html #navigation_bar .buttons_wrap .buttons_list .works a:link div, *
> > html #navigation_bar .buttons_wrap .buttons_list .works
> > a:visited .link {
> > background-image: none;
> > filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/wp-
> > content/themes/mortengoll/images/button_works.png");
> > }
>
> Do you know that IE7 treats the * HTML Filter differntly than previous
> IE versions?http://msdn2.microsoft.com/en-us/library/bb250496.a spx
>

Nope, hadn't read that, thanks for the link. Luckily, it seems the
behavior here is the same as expected for IE6, that is to say, it's
only IE6 or lower that uses it.

>
>
> > They work in IE6, although everything is extremely slow. They also
> > work fine in Safari, Firefox, Konqueror, and Opera.
>
> Amazing that anything works. Depends on the value of "work", I guess.
>

LOL :) Well, it works as it's supposed to IRL, that's what I meant by
work.

> I will say that I did not detect any tranparency in FF,

Interesting. Which version is that?

> so your page
> looks like it could just use colored backgrounds on hover/non-hover.
> That would save the delay in getting some single-color, non-transparent
> image, which is what I see. (I didn't need to see all that wood grain
> anyway. ;-) )
>

Well, yeah, that would be my fallback; to use just a coloured
background plus gifs for those browsers that won't show the PNGs
correctly (without side-effects). And that's actually what I hoped to
hear by writing this post, some idea to making it "work" (as in "work
IRL", not as in making it properly) even if it means hacking even
more.

>
>
> > Does anyone know how to fix this?
>
> Rework the page, more simply, using valid code. Seriously.
>

Seriously, I'd like that, but I'm out of ideas as to get this to work
on IE6 and all others using valid code. Any ideas?

> HTH. GL.
>
> P.S. Don't do this: body {font-size: 13px;}
>

Why not?

Cheers,
Daniel :)

> --
> John
> Pondering the value of the UIP:http://improve-usenet.org/