|
|
Posted by John Hosking on 09/19/07 14:34
Daniel Smedegaard Buus wrote:
> Hey you guys!
"We're gonna turn on the power..."
Oh, you're not Rita Moreno. ;-)
(http://en.wikipedia.org/wiki/The_Electric_Company)
>
> I'm having this weird issue with IE7 and some DIVs that contain
> links...
Wait a minute, is it divs that contain links, or links that "contain"
divs, as in your post's subject line?
If you try to put a <div> inside an <a>, you *should* get weird issues,
because the code is invalid. (Or maybe it's not so weird after all.)
> It's a customized WordPress theme, using transparent PNGs for
> some buttons. Because they're transparent, to get them to show right
> in IE6 I had to implement them as backgrounds for DIVs with one of the
> "filters" that IE6 can use. Like this (the site in question is
> http://mortengoll.org by the way):
>
> === Begin HTML for the buttons ===
You gave us the URL (kudos), so we don't need this much pasted code.
> <div id="navigation_bar">
> <div class="buttons_wrap">
> <ul class="buttons_list">
> <!--<?php
Seeing your PHP code doesn't help us any.
> [snipped]; ?>-->
> <!--<?php [snipped]; ?>-->
> <li class="works">
> <a href="/?cat=1" title="View all articles filed under Works" >
> <div class="link">
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/
Navigation:
[Reply to this message]
|