Cross-browser nested DIV width issues.

Well I started working on this menu for a website. It is supposed to have horizontal link bars (no images, just text and the hover attribute) that span the width of the navigation table, but that is not so. I had it working in IE and I must have changed the wrong thing and now it doesn't work correctly in IE, Firefox, or Opera.


div.menu a {
color: #E4E3E3;
background: #80864E;
text-decoration: none;
font-size: 11px;
line-height: 20px;
font-family: serif;
padding: 2px 1px;
width: 100%;
}

div.menu a:link {
color: #E4E3E3;
background: #80864E;
border: 1px solid #797F4A;
width: 100%;
}

div.menu a:active {
color: #E4E3E3;
background: #80864E;
border: 1px solid #797F4A;
width: 100%;
}

div.menu a:visited {
color: #E4E3E3;
background: #80864E;
border: 1px solid #797F4A;
width: 100%;
}

div.menu a:hover {
color: #E4E3E3;
background: #4E5801;
border: 1px solid #000000;
width: 100%;

}


I tried doing width: 206px and that was working in IE but not for Firefox or Opera.

So the usual three options, I have misplaced something, I have left something out, or it's not possible.

Any help at all would be greatly appreciated, I've been trying to fix this all day with no luck. Thanks!

It can be time consuming to get CSS menus to work as you want. Rather than reinventing the wheel each time I prefer to use one of the menus from the excellent Listamatic site.

See http://css.maxdesign.com.au/listamatic/horizontal20.htm for details.

It can be time consuming to get CSS menus to work as you want. Rather than reinventing the wheel each time I prefer to use one of the menus from the excellent Listamatic site.

See http://css.maxdesign.com.au/listamatic/horizontal20.htm for details.


Thank you very much. I'm sort of new to CSS and I was trying to make my own menu so I could learn how to do it instead of copying and pasting, but its more frustrating obviously to try it myself. I'm thinking I'm using the wrong method anyhow...

Thanks again!

Well I started working on this menu for a website. It is supposed to have horizontal link bars (no images, just text and the hover attribute) that span the width of the navigation table, but that is not so. I had it working in IE and I must have changed the wrong thing and now it doesn't work correctly in IE, Firefox, or Opera.
What does your HTML look like? This doesn't look like a drop-down menu. Drop-down menus are the ones that are hard to get working cross-browser.

Maybe you can show us a link and explain what is wrong?