Make an entire LI width linkable? 2

[Bravogolf]

Am in the process of putting together a menu made from UL and LI tags and formatted with CSS. At the mo, I have an <a href... tag within the LI but naturally enough that only makes the text clickable. How can I make the entire LI span clickable? Does it have to be Onlick="Window.Open? If so, will that work on all browsers?

 

[Foamcow]

Set the <a> to be a block level element so it fills the width of the <li>. You will need to add padding or a height to the <a> to make the required size vertically.


You may also find that you will need to add height:1% to the containing <li> element to avoid the "peek-a-boo" bug in IE.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Bravogolf]

Ah, I see. So that's what the display: block is for! Cheers Foamcow

 

[Bravogolf]

Hmm, that works fine but when I wrap it all in a DIV tag so that the width is restricted the display: block stops working ..?
DIV tag is

.lhcol 
{
	WIDTH: 120px;
	float: left;
	margin: 0px;
	display: block;
}

Example of menu at

http://www.heaphydesigns.com/ef2/menu 2.php

 

[Vragabond]

It does not work only in IE. Because for some reason, IE (when switching anchor element to block level element) assumes width: auto; whereas other browsers assume width: 100%;. This causes a bunch of problems if you want some extra padding in the links and still want the whole area clickable in IE. Since your div is limited with pixels anyway, I suggest you just limit your links as well (make them 120px wide with padding and width).

 

[Bravogolf]

Ah, I understand, thanks again Vagrabond