Forum Moderators: not2easy
Being close to the stardard is very important to me but having it work in Internet Explorer is equally important.
Is there a typical way to setup a menu like this using divs and CSS? Is there something wrong with my HTML or CSS? I have validated both but something is still obviously wrong.
Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Stylesheet:
.menu {
width: 131px;
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 12px;
font-weight: bold;
font-family: Tahoma, Arial, Verdana, sans-serif;
float: left;
border: 1px solid #000000;
}
.menu a {
display: block;
padding: 2px 2px 2px 5px;
background: #006600;
text-decoration: none;
}
.menu a:link, .menu a:active, .menu a:visited {
color: #FFFFFF;
}
.menu a:hover {
background: #000000;
color: #FFFFFF;
}
The menu:
<div>
<div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 1</a></div><br clear="left">
<div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 2</a></div><br clear="left">
<div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 3</a></div><br clear="left">
<div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 4</a></div><br clear="left">
<div><img src="/images/menu/bar_menu.gif" width="131" height="10" align="top" alt=""></div>
</div>
ul {
padding : 0;
}
li {
margin : 0;
padding : 0;
list-style : none;
}
ul a {
display : block;
}
There's room to play with most of the margins and paddings. You might want to also check out "Taming Lists" at A List Apart.
I've already tried doing that and it breaks in all Mozilla/Gecko-based browsers (Mozilla, Netscape, Firefox). It works great in Opera and IE though. :D
.menu a:link, .menu a:active, .menu a:visited
{color: #FFFFFF;}
With your links the order should be lvha.(link, visited, active, hover)
so just change the above to this
.menu a:link, .menu a:visited, .menu a:active
{color: #ffffff;}See if this helps you out.
Also, another excellent site is listamatic. The have several tutorials in there that would be excellent for you to go through.
...it breaks in all Mozilla/Gecko-based browsers.Unlikely; I suspect something else is wrong, since I've used it with no problems before.
Can you post the CSS you used and discribe how it breaks?
BTW, sorry for missing your reference to "A List Apart," mep00. Unfortunately that site seems to be down at the moment but I'll try checking it later.
Unlikely; I suspect something else is wrong, since I've used it with no problems before.Can you post the CSS you used and discribe how it breaks?
See this thread: [webmasterworld.com...]
Perhaps "break" is the wrong term. It doesn't display the correct width. Width is important because I have an image at the bottom of the menu and the menu has to be the same width as the image. I've been able to get menu to be the right width in Mozilla, Netscape, etc. but it doesn't look right in Opera and IE.
See this thread: [webmasterworld.com...]Try adding:
html>body .menu li a {width: auto;}
Try adding:
html>body .menu li a {width: auto;}
Thanks! That seem to solve the width problem but now the box is hugging the text so they still aren't the right width. :(
...but now the box is hugging the text so they still aren't the right width.Try tweaking the paddings and/or margins.
Try tweaking the paddings and/or margins.
I think my best bet at this point is to just change the appearance of the menus. I would prefer to have my current look but it *can* be changed. ;)
Question: what, exactly, was the original width problem? If hugging the text is new, what was the problem before, the part that html>body .menu li a {width: auto;} fixed? I looked at your referenced thread and saw that you were having issues with floats, not widths.
Originally the list items were set to 131px wide and Mozilla, Firefox, and Netscape were displaying those items as if they were 137px wide. So I switched from using an unordered list to divs, which created new problems. Thankfully, those problems have now been fixed. :D
Instead of starting a new thread, I posted my new menu in the same thread (as a question for someone who had already responded). Then I started this thread because I started having a new problem. Sorry for any confusion. In the future I'll try to keep the number of threads to a minimum.
