Making blocks clickable in IE

[KeredDrahcir]

I'm trying to make a menu using a list and I want it be about 42px high. I need the whole of the block to be clickable and have managed to achieve this in Firefox but in IE only the text is clickable. I really need to sort this out since it seriously affects functionality.

.mainmenu li{
	float:left;
	display: inline-block;
	margin: 0;
	padding: 0;
	z-index:1000;
	height: 42px;
	position: relative;
}
.mainmenu li a{
	display: block;
	font-size: 13px;
	font-weight: 700;
	height: 33px;
	padding: 9px 25px 0;
	text-decoration: none;
	position: relative;
}

[drhowarddrfine]

Without a link or the complete markup, anything we say is just a wild guess.

[KeredDrahcir]

The XHTML code follows:

<div class="mainmenu">
  <ul>
    <li class='menu_child'>
      <a href='#' class='active'>Home</a>
    </li>
    <li class='menu_parent'>
      <a href='/[I]path[/I].html' class=''>Item 1</a>
    </li>
    <li class='menu_child'>
      <a href='/[I]path[/I].html' class=''>Item 2</a>
    </li>
    <li class='menu_child'>
      <a href='/[I]path[/I].html' class=''>Item 3</a>
    </li>
    <li class='menu_child'>
      <a href='/[I]path[/I].html' class=''>Item 4</a>
    </li>
    <li class='menu_child'>
      <a href='/[I]path[/I].html' class=''>Item 5</a>
    </li>
    <li class='menu_child'>
      <a href='/[I]path[/I].html' class=''>Item 6</a>
    </li>
  </ul>
</div>			


</div>

[drhowarddrfine]

Which version of IE? It works in IE9 however inline-block is buggy in IE<9.

[KeredDrahcir]

I’m testing it in 8. A lot of people I know are still using 6 though. I'd like it work in 8 and preferably 7. I know 6 is a real problem and I wait for the day when it's as dead as 5.

[drhowarddrfine]

I can't wait for all versions of IE to be dead. The world would be far better off.

I don't have IE available to me till I get back to the office later today.

[KeredDrahcir]

I to wish all versions of Internet Explorer or should I say Internet Destroyer are dead. I can't see that as being soon so I hope for version 6 at the present. They keep bring out new version and they'll are rubbish.

[KeredDrahcir]

Anysuggestions, this is the only thing preventing me from finishing.

[drhowarddrfine]

Sorry. I forgot about this. Try adding 'overflow:auto' to the li. If not, try 'clear:both'.

[KeredDrahcir]

Did them to the li and it gave it a horizontal scroll bar on the list item for the overflow and made it a vertical list with the clear. Tried on the li a and it made no difference in both cases.

[drhowarddrfine]

Finally remembered to look at this while in the office. I don't see the problem in IE7 or IE8.

[KeredDrahcir]

That's wierd. Is there anything you can suggest that could make it work as my end?
I found both your suggestions didn't work on the li a and produced undesiable results on the li tag. I reckon that if I could get the li tag to display the same, it could work. Is there anything you can suggest there?

[drhowarddrfine]

Do you have a link? Can you post the complete markup?

[KeredDrahcir]

A link wont help. I've had to change the way it works until I can get it fixed.

[KeredDrahcir]

The problem is an IE bug that boxes are not clickable with the transparent background colour. It's a daft idea. I fixed it but removing the first box, removing the transparent background colour to first box and giving it the value and just setting the value in that box to disappear and colour to go to black when it was clicked on.

Would you like to see the amended code?