IE: a display block

[jace41]

I was playing around with some css files to compare them in the browsers and notice that IE doesn't support the a and hover display block that contain the link inside. Is there a hack or solution to address this problem?

css:

#testbox {
	background-color: #00CC00;
	width: 200px;
}

#test a {
	padding: 2px;
	display: block;
}

#test a:hover {
	background-color: #CC3300;
}

<dl id="testbox">
	<dt id="test"><a href="#">test1</a></dt>
</dl>

<div id="testbox">
	<div id="test"><a href="#">test1</a></div>
</div>

jace

[AutisticCuckoo]

Try this:

#test a {
  display: block;
  width: 100%;
}

[jace41]

Thanks! It works. I tweaked the width 100% to 98% due to the padding to prevent the display from being expand 2px outward, just curious is there better approach when deal with padding and 100% width situation?

#test a {
display: block;
padding: 2px;
width: 98%;}

jace

[Paul O'B]

Hi,

You can use the height:1% hack to force the whole area to be active.

/* mac hide \*/
* html #test a {height:1%}
/* end hide */

Then you don't need to worry about the width at all.

You should never really mix percentage and pixels as they will never add up to exactly what you want.

[AutisticCuckoo]

Originally Posted by jace41

is there better approach when deal with padding and 100% width situation?

You will have to use additional markup for that. For instance,

<a href="#"><span>Link text</span></a>

a {
  display:block;
  width:100%;
}

a span {
  padding:0 2px;
}

Using Paul's solution is probably better, though.