Email conversation
| From | John Bilicki |
|---|
| To | Me |
|---|
| Subject | hyperlink question |
|---|
| Date | 21 April 2004 22:54 |
|---|
Hello,
Great site! I have a quick question, I'm making rollover menus and I
can't seem to get the hyperlinks set to 100% width (to fill up each TD) so
whats the simplest way I can do this? I'm using external style sheets.
John
| From | Me |
|---|
| To | John Bilicki |
|---|
| Subject | Re: hyperlink question |
|---|
| Date | 22 April 2004 09:18 |
|---|
John,
Easy question, the answer is not quite so easy.
links will take up full width of their container if you set them to
display: block;
Unfortunately, IE/Win has a bug when it comes to interpreting this, as the
link takes up the full width, but only the normal width is clickable. To
avoid this, set the width of the link to 100%
Because other browsers use the W3C box model, setting their width to 100%
causes problems, so in those browsers, the usual way is to use the >
selector (which IE/Win does not understand) to reset width to auto.
I know you are using tables here, but note that if you separate the links
with <br> tags, these will usually cause an extra line-break, so you might
want to set them to
display: none;
So to summarise:
assuming your HTML is:
<table id="linkpanel">
<tr><td><a href="blah">hello</a></td></tr>
<tr><td><a href="blah2">hello2</a></td></tr>
<tr><td><a href="blah3">hello3</a></td></tr>
</table>
your CSS should be
#linkpanel a { display: block; width: 100%; }
#linkpanel td > a { width: auto; }
Hope you find this useful.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/