IE 6 block display bug?

clickable buttons aren't as clickable as they should be

[martinship]

I'm creating some clickable buttons using CSS. The following code works great in the latest versions of IE, Opera, Safari, and Firefox, but not IE 6. Ol' 6 only makes the link text clickable. The other browsers do it "right", and the whole inside of the button is clickable.

My assumption is that IE 6 is not handling the display:block style for the link properly.

The border, obviously not part of the link style, isn't clickable in any browser, but I'm willing to live with that.

Is there a fix for this? Is it an IE bug?

The CSS:

.button {
background-color: #09f;
border: 2px solid;
border-color: #2af #08e #08e #2af; 
margin-left: auto;
margin-right: auto;
width: 6em;
}
.button a {
text-align: center;
padding: 0 4px;
color: #def;
text-decoration: none;
display: block;
}

The XHTML:
<div class="button"><a href="#">Button Text Goes Here</a></div>

[Marshall]

Try this:

.button {
background-color: #09f;
border: 2px solid;
border-color: #2af #08e #08e #2af;
margin-left: auto;
margin-right: auto;
width: 6em;
text-align: center;
padding: 0 4px;
color: #def;
text-decoration: none;
display: block;
}

<a href="#" class="button">Button Text Goes Here</a>

This way, you have more possibilities :
<div><a href="#" class="button">Button Text Goes Here</a></div> -or-
<p><a href="#" class="button">Button Text Goes Here</a></p> -or-
<li><a href="#" class="button">Button Text Goes Here</a></li>

Just a thought, but not sure about IE6. I do think it makes the border clickable though.

Marshall

PS.

you can add this (color to your liking):
.button:active {
background-color: #08e;
border: 4px solid;
border-color: #08e #2af #2af #08e;
margin-left: auto;
margin-right: auto;
width: 6em;
text-align: center;
padding: 0 4px;
color: #def;
text-decoration: none;
display: block;
}

[edited by: Marshall at 3:57 am (utc) on July 5, 2007]

[martinship]

Just a thought, but not sure about IE6. I do think it makes the border clickable though.

Yes, it does work properly in IE6! The border is now clickable, of course. Thanks!

I used the container DIV because when A is styled inline it applies the borders to every line of text. I needed a button for multiple lines of text. Looks like using the display:block style fixes that issue without need for a DIV.

And I do have hover and active states for the button as well, I just didn't post them here in the bare bones example. :)