Weird behavior in IE7 with DIVs wrapped in links

[Daniel Smedegaard Buus]

Hey 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 ===
<div id="navigation_bar">
<div class="buttons_wrap">
<ul class="buttons_list">
<!--<?php
wp_list_categories('sort_column=id&title_li=&optioncount=1'); ?>-->
<!--<?php wp_list_pages('title_li=&sort_column=menu_order'); ?>-->
<li class="works">
<a href="/?cat=1" title="View all articles filed under Works" <?
php if (cur_page() == 'works') { echo("class=\"current\""); } ?>>
<div class="link">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/
transparent.gif" />
<span class="text">
Works
</span>
</div>
</a>
</li>
<li class="contact">
<a href="/?page_id=2" title="Contact" <?php if (cur_page() ==
'contact') { echo("class=\"current\""); } ?>>
<div class="link">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/
transparent.gif" />
<span class="text">
Contact
</span>
</div>
</a>
</li>
....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: progidXImageTransform.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: progidXImageTransform.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: progidXImageTransform.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

 

[David Dorward]

<a href="/?cat=1" title="View all articles filed under Works" <?
php if (cur_page() == 'works') { echo("class=\"current\""); } ?>>
<div class="link">

That's a syntax error. <a> elements may not contain <div> elements.
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.

 

[Andy Dingley]

That's a syntax error.

No, it's an error of validity, not of syntax.

<a> elements may not contain <div> elements.

Agreed.

It's not a good idea to embed <div> in <a>. As it's impossible to do
this in HTML (if you did it anyway, then it's no longer HTML), then
the browser has to compensate by turning your approximation of what
you thought you needed into the browser's approximation of what it
thinks you wanted. Obviously this is now vague, unpredictable and out
of control. Don't do it.