I'm trying to replace a navigation list that was built using tables with clean HTML + CSS but I'm having a problem. If you look at the link you'll see the differences between the two:
When resized below a certain width the CSS version crumbles. If you look at the behaviour of the table based design it seems to adjust the padding accordingly. I thought ok, I'll simply use percentages on the padding that targets the list items but it doesn't work.
You can completely remove the #navigation div from your css and html, it's not doing anything there. A lot of people think you need a div there to contain the ul, but the ul itself acts as a div.
I'm trying to replace a navigation list that was built using tables with clean HTML + CSS but I'm having a problem. If you look at the link you'll see the differences between the two:
http://members.lycos.co.uk/beastskills/test3.html
When resized below a certain width the CSS version crumbles. If you look at the behaviour of the table based design it seems to adjust the padding accordingly. I thought ok, I'll simply use percentages on the padding that targets the list items but it doesn't work.
Is it possible?
on #menu add:
height;auto;
padding:10px 0 15px 0;
then add:
<div style="clear:both"></div>
just before the #menu div closes.
You can completely remove the #navigation div from your css and html, it's not doing anything there. A lot of people think you need a div there to contain the ul, but the ul itself acts as a div.
That should be a starting point for you.