Log in

View Full Version : CSS Horizontal hover menu TABLE ERROR


capt_cabo
08-13-2006, 04:59 PM
I am more confused than a Termite in a YOYO !

Default settings for the CSS Horizontal hover menu result in a BLUE TABLE expanding the entire screen width and a 50 pixel table height, despite default settings of a 20 pixel height.

I am not sure how to change settings for the BLUE TABLE which is larger than needed.

I have learned ALOT on the DD forum and am trying to get out of the YOYO !
mburt
08-13-2006, 05:02 PM
You need to include a link to the DD script
capt_cabo
08-13-2006, 05:12 PM
http://www.dynamicdrive.com/dynamicindex1/hover.htm

I think the opening DIV tag is missing Border elements
mburt
08-13-2006, 05:14 PM
...CSS Horizontal hover menu result in a BLUE TABLE

What is a BLUE TABLE? Do you literally mean the a table, which is blue?
capt_cabo
08-13-2006, 05:34 PM
Sorry for not being more clear - I need the CSS to be a width 800px by height 20px

The DIV tag in the CSS table appears BLUE in Dreamweaver while editing the code. Tables bellow the CSS are thrown off.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head><style type="text/css">

.hovermenu ul{
font: bold 11px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 0px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>

<body>
<tr>
<th width="800" height="20" scope="row"><div class="hovermenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</div>&nbsp;</th>
</tr>
</table>
</body>
</html>
jscheuer1
08-20-2006, 02:32 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head><style type="text/css">
.hovermenu {
height:18px;
}
.hovermenu ul{
font: bold 11px arial;
padding: 0;
margin: 0;
height: 20px!important;
height:16px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 0px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>

<body>
<table>
<tr>
<th width="800" height="20" scope="row" style="padding:0;"><div class="hovermenu"">
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</div></th>
</tr>
</table>
</body>
</html>