No replies
Carl
Offline
newbie
Last seen: 15 years 20 weeks ago
Timezone: GMT-2
Joined: 2004-07-20
Posts: 1
Points: 0

Okay, this is the third version of this pop-up menu that I have created today. So far, every version I have created has had something wrong with it in some browser. I have tried tables (they look different in every browser), unordered lists, ordered lists, and now divs. This time, this works perfectly in Firefox, Opera, Mozilla, and Netscape. However, it doesn't even come close to working in Internet Explorer.

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>