Hello,
I am attempting a suckerfish type menu on this page (
http://www.inspired-evolution.com/About_Me.php) and I am having a few
issues. In IE 6 the submenu isn't aligning vertical to the main navigation.
It is appearing off to the right a bit. In Mozilla, the main menu isn't
centered like I want. It's appearing off to the right. In both IE and Moz
there is too much spacing in between the dark blue row that contains the
menu. I am referring to the top and bottom margins, but cannot see where
this spacing is coming from. I having been looking at the CSS for a while,
and belive I need a fresh pair of eyes to look at it!
the CSS is question is:
#navcontainer2
{
width:54em;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
background-color:#036;
margin:0 0 0 2em;
padding:0 0 2em 8em;
height:1;
}
* html #navcontainer2
{
width:62em;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
background-color:#036;
margin-left:.5em;
padding:0;
height:1em;
}
#navlist2 ol, #navlist li
{
margin:0;
padding:0;
list-style-type: none;
}
#navlist2 a:link, #navlist2 a:visited
{
margin:0;
padding:0;
color: #ccc;
border-right: 1px solid #ccc;
text-decoration: none;
font-weight:bold;
}
#navlist2 a:link#current, #navlist2 a:visited#current,
{
border-bottom: 1px solid #fff;
color: #fff;
}
#navlist2 a:hover { color: #f0f8ff; text-decoration:underline; }
#navlist2 a {
display:block;
width:10em;
height:1.5em;
line-height:1.5em;
}
#navlist2 li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#navlist2 li ol.second { /* second-level lists */
position: absolute;
margin:0;
border-bottom:1px solid #fff;
background: #369;
width:10em;
left: -999em; /* using left instead of display to hide menus because
display: none isn't read by screen readers */
}
#navlist2 li>ol.second { /* second-level lists for modern browsers */
position: absolute;
border-bottom:1px solid #fff;
background: #369;
padding:0;
width:10em;
margin:0 0 .5em 1.5em;
left: -999em; /* using left instead of display to hide menus because
display: none isn't read by screen readers */
}
#navlist2 li ol.second a { /* second-level lists */
padding:.5em 0 .5em 0;
background: #369;
border-bottom:1px solid #fff;
height:1.5em;
}
#navlist2 li ol.second a:link { /* second-level lists-link */
height:1.5em;
border-bottom:1px solid #fff;
color:#fff;
}
#navlist2 li ol.second a:visited { /* second-level lists-visited */
border-bottom:1px solid #fff;
color:#f0f8ff;
}
#navlist2 li ol.second a:hover { /* second-level lists -hover*/
text-decoration:none;
color:#036;
background-color:#789;
}
#navlist2 li ol.second a:active { /* second-level lists-active */
padding:.5em 0 .5em .5em;
color:#669;
}
#navlist2 li:hover ol.second, #navlist2 li.sfhover ol.second { /* lists
nested under hovered list items */
left: auto;
}
full CSS is at :
http://www.inspired-evolution.com/Gilbert.css
any guidance/assistance is greatly appreciated.
--
::Bruce::
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
