DO NOT USE THIS!
Although I made these tables, I wouldn't actually recommend using them... I do think they look good and a more imaginative person than myself could make them look better, but I think if you're going to have a list of links, it should be marked-up as a list rather than put into tables - that's not what tables are for. For a better example, see my UL 'table' menu.
Having said that, I often see people trying to find how to do this - make the whole cell's background change on hover, so here's the answer.
This line is the key (it sorts IE out) :
* html #tablemenu1 td a {height:1px;}
| first link | second link | third link | fourth link |
| fifth link | sixth link | seventh link | eighth link |
| ninth link | tenth link | eleventh link | twelfth link |
| first link | second link | third link | fourth link |
| fifth link | sixth link | seventh link | eighth link |
CSS
/*table-menu 1*/
#tablemenu1 {
width: 100%;
margin: 0 auto;
border-collapse:collapse;
table-layout:fixed;
}
#tablemenu1 td {
width:25%
}
#tablemenu1 td a {
text-decoration:none;
display:block;
padding:8px;
font: 14px Arial, sans-serif;
font-weight:bold;
}
#tablemenu1 td a:link, #tablemenu1 a:visited,
#tablemenu1 a:active{
color: #6633FF;
background-color:#66CCFF;
}
#tablemenu1 td a:hover {
color: #6600FF;
background-color:#66FFFF;
font-variant:small-caps;
}
#tablemenu1 td {
text-align: center;
}
* html #tablemenu1 td a {height:1px;}
/*table-menu 2*/
#tablemenu2 {
width: 100%;
background-color: black;
margin: 0 auto;
border-collapse:collapse;
table-layout:fixed;
}
#tablemenu2 td {
width:25%
}
#tablemenu2 td a {
text-decoration:none;
display:block;
padding:8px 0;
font: 14px Arial, sans-serif ;
font-weight:300;
}
#tablemenu2 td a:link, #tablemenu2 a:visited,
#tablemenu2 a:active{
color: white;
background: black;
}
#tablemenu2 td a:hover {
color: red;
background: white;
border-left-color:red;
font-weight:600;
}
#tablemenu2 td a{
border:3px solid white;
border-right:none;
text-align: center;
border-bottom:none;
}
#tablemenu2 tr.bottom td a {
border-bottom:3px solid white;
}
#tablemenu2 td.right a {
border-right:3px solid white;
}
* html #tablemenu2 td.left a {
border-left:none;
}
* html #tablemenu2 td a {height:1px;}
HTML
<h1>Table Menus</h1>
<p><strong>DO NOT USE THIS!</strong></p>
<p>Although I made these tables, I wouldn't actually recommend using them... I do think they look good and a more imaginative person than myself could make them look better, but I think if you're going to have a list of links, it should be marked-up as a list rather than put into tables - that's not what tables are for. For a better example, see my <a href="~ul-table">UL 'table' menu</a>.</p>
<p>Having said that, I often see people trying to find how to do this - make the whole cell's background change on hover, so here's the answer.</p>
<p>This line is the key (it sorts IE out) :</p>
<code class="centre">
* html #tablemenu1 td a {height:1px;}
</code>
<h2>Table 1</h2>
<table id="tablemenu1" cellspacing="1">
<tr>
<td><a href="#n">first link</a></td>
<td><a href="#n">second link</a></td>
<td><a href="#n">third link</a></td>
<td><a href="#n">fourth link</a></td>
</tr>
<tr>
<td><a href="#n">fifth link</a></td>
<td><a href="#n">sixth link</a></td>
<td><a href="#n">seventh link</a></td>
<td><a href="#n">eighth link</a></td>
</tr>
<tr>
<td><a href="#n">ninth link</a></td>
<td><a href="#n">tenth link</a></td>
<td><a href="#n">eleventh link</a></td>
<td><a href="#n">twelfth link</a></td>
</tr>
</table>
<h2>Table 2</h2>
<table id="tablemenu2" cellspacing="0" cellpadding="0">
<tr>
<td class="left"><a href="#n">first link</a></td>
<td><a href="#n">second link</a></td>
<td><a href="#n">third link</a></td>
<td class="right"><a href="#n">fourth link</a></td>
</tr>
<tr class="bottom">
<td class="left"><a href="#n">fifth link</a></td>
<td><a href="#n">sixth link</a></td>
<td><a href="#n">seventh link</a></td>
<td class="right"><a href="#n">eighth link</a></td>
</tr>
</table>
Yes, thank you Paul. I'm more than aware of that - in fact, I think I said so at the top of this page. If you look at the site-menu and go to "UL 'table' menu", you'll see something exactly like you're suggesting.
I don't know... I'd seen people having problems doing this and so I wanted to show how it could be done. I don't think it's the best way to do it, but this is how you can make a decent-looking menu when your menu items are in a table. I could take this down, but I thought "What the hell? It's not really harming anyone and could actually help one or two people."
What do you think? Should I just remove this page?
Oh crap, I didn't spot your UL menu, my fault. I reckon something along the lines of "DO NOT USE THIS" would be a good idea.
Not a bad idea...
Ya know, you really don't need the * html . . . I made something similar to what you've got and it works in IE, Mozilla and Opera. In fact, before I visited this site, I'd never even heard of the * html hack. If you'd like the code, send an email to dgeren1960@hotmail.com.
OK. I realize that using tables for menus probably isn't the best approach. But, if all you need is a single row footer menu . . . Why not?
Daniel,
Thanks for the interest.
Without wanting to sound ungrateful, I'm not so interested in another way of making a menu with tables because, as I mentioned, I don't think it's the right way to do it.
I understand what you're saying about 'Why not?' - like who really cares? Maybe it's only purists who really care, but the fact is that this is not tabular data - it's a list of links. HTML says what things are - you put paragraphs in 'p' tags, headings in 'hx' tags, etc. This is a list, so you put the list items in 'li' tags.
As for the '* html' hack - I'm glad I've introduced you to something new. I suggest going to my CSS FAQ page and reading about IE - especially the part about 'hasLayout'.
I have read your CSS FAQ page. In fact, I read that page before I read this one. And, I would really like to thank you for the * html hack. It is incredibly useful, but I don't think it is necessary to use it all the time. And, I understand that it only works in IE 6. What about IE 5x? Is there any way to target that browser through CSS. And, by the way, I know that tables are meant for tabular data and that ul or ol tags are meant for lists. Perhaps I'm not as 'pure' a purist as you are. The way I see it is, if it works, then don't fix it.
Daniel,
I may have given the wrong impression here, '* html' will actually affect IE5x too. Maybe I should change anything I've written that might suggest it's just IE6. I guess I focus on that because very few people actually use IE5x anymore. If you do want to target only those browsers (IE5x) you can do this : #element {
color:yellow; /* for IE5x */
c\olor:white; /* for other browsers :/
}
Have a look at this page in IE5x and you'll see this hack applied (just for you).
There's a big list of hacks/filters at centricle.
As for your last point about being a purist and if something isn't broken not to fix it... What can I say? I'm not attacking anyone for doing things incorrectly here, I'm just trying to help people do things the right way. There's no need to 'fix' a table menu if you don't use one in the first place...
Thanks. The hack/filters page is already bookmarked.
I don't currently have IE 5x, I was just curious. I know there are few of them out there, but you never know when someone running that browser may stumble onto your web site. I also discovered that the * html hack works with classes as well. I know, the purists advise against using classes, at least in excess. But, in my case, it was necessary.
The reason I put my menu into a table is because, I guess, it's just easier to think of tables as being horizontal and lists as being vertical, ya know. But, I think I'm going to try it your way (using a list instead, and using my own code) and see what I come up with (but not before I make a backup. Always a good idea).
Anyway, thanks again.
Daniel,
I've been working on a page to help make simple menus. It's not really finished, but it mostly works... Anyway, bear in mind that this is a work in progress and see if my menumaker helps - just play with numbers and things, then check the box that says 'see only this menu' and view the source for the code.
I hope it helps.
One problem. Minor really. I need a menu that stretchs 100% across the enclosing container, which is fluid and contains 6 or 7 menu items, with a 1 px border around each menu item. Can you see why I chose a table? Floating list items just doesn't cut it in this situation at least not in IE (I did try this once before using floating divs without much success either). In order for this to work in IE, I have to set negative 1 px margins on the left and right, which effectively hides the 1 px border on the extreme left and right of the menu. All it takes is that 1 px to send the last menu item below the rest of the menu. I've looked at other list sites, but they all use fixed widths as well. I haven't tried using display: inline;, because you can't give an inline element a specific width. Thanks, anyway for all of your help. I've learned a lot.
Daniel,
Have you ever been to Sitepoint? Paul O'Brien there is a CSS God - here's exactly what you're after courtesy of Paul.
I do believe you are correct. He is a CSS God! That's exactly what I was looking for. Thank you!
Your css helped me a lot. Thank you very much.
Keep up the good work.
Greetings.
customized writing paper <a href="https://papermetering.com/ ">write my paper one day</a> writing help for kids
essay spanish <a href="https://essaymeson.com/ ">tok essay example</a> essay review
school essay <a href="https://essaymesa.com/ ">video essay</a> professional essay writers
Something with the exact same appearance could be marked up as a list with line breaks or nested lists (a list per row).