Weird behavior in IE7 with DIVs wrapped in links
am 19.09.2007 15:58:13 von Daniel Smedegaard BuusHey you guys!
I'm having this weird issue with IE7 and some DIVs that contain
links... 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 ===
php if (cur_page() == 'works') { echo("class=\"current\""); } ?>>
; ?>/images/<br />
transparent.gif)
Works
'contact') { echo("class=\"current\""); } ?>>
Contact
....etc...
=== End HTML for the buttons ===
Basically, it's an unordered list, containing list items which is a
link tag wrapping around a div which is shown to people with css, and
a text which is shown to people without css. Here's the css that makes
it happen:
=== Begin CSS for the buttons ===
#navigation_bar ol, #navigation_bar ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#navigation_bar .buttons_wrap .buttons_list li a div img { /* Expand
the size of the 1-pixel transparent gif, so that CSS enabled folks get
to see the big shiny buttons */
width: 240px;
height: 120px;
}
#navigation_bar .buttons_wrap .buttons_list li a div span { /* Hide
the textual links for the CSS enabled folks */
display: none;
}
#navigation_bar .buttons_wrap .buttons_list li {
margin-bottom: 10px;
}
#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 {
background: transparent url(images/button_works_hover.png) top no-
repeat;
width: 240px;
height: 120px;
}
#navigation_bar .buttons_wrap .buttons_list .works a.current .link {
background: transparent url(images/button_works_active.png) top no-
repeat;
width: 240px;
height: 120px;
}
* 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");
}
* html #navigation_bar .buttons_wrap .buttons_list .works
a:hover .link {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/wp-
content/themes/mortengoll/images/button_works_hover.png");
}
* html #navigation_bar .buttons_wrap .buttons_list .works
a.current .link {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/wp-
content/themes/mortengoll/images/button_works_active.png");
}
=== Begin CSS for the buttons ===
Okay, so the first part is shared by all the buttons, setting sizes
and hiding the textual version for those who have css. The next ones
are for one button, with the definitions for hover, selected, and
normal states. The ones starting with * are the ones for IE6.
They work in IE6, although everything is extremely slow. They also
work fine in Safari, Firefox, Konqueror, and Opera. In IE7, they
*mostly* don't work - once I was able to click a button, but most of
the time, just the mouse-over works, and the link is shown in the
status bar. What's weird is that I can right-click a button and choose
"Open link", and this gives the effect that I'd like to happen when
you click the left mouse button. Also, as you may see, the cursor
stays as an arrow, it doesn't change to the "finger" cursor.
Does anyone know how to fix this?
Thanks in advance for any input,
Daniel :)
Re: Weird behavior in IE7 with DIVs wrapped in links
am 19.09.2007 16:28:26 von dorwardOn Sep 19, 2:58 pm, Daniel Smedegaard Buus On 19 Sep, 15:28, David Dorward
wrote:
>
> php if (cur_page() == 'works') { echo("class=\"current\""); } ?>>
>
That's a syntax error. elements may not contain
Try running your code through a validator (such as the one at
http://validator.w3.org/ ). "Weird behavior" is to be expected when
you present software with unexpected input.
--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/
Re: Weird behavior in IE7 with DIVs wrapped in links
am 19.09.2007 19:12:44 von Andy Dingley
> That's a syntax error.
No, it's an error of validity, not of syntax.
> elements may not contain
Agreed.
It's not a good idea to embed