Hi Folks,
Please take a look at the following page:
In particular, the pop-out navigation on the left hand side. This works fine in IE6. However when I look at the page using Netscape 7, the navigation is all over the place and when you mouseover the page jumps.
Can anyone give me some advice on the reason why this is happening.
The relevant CSS settings for the navigation are:
#nav, #nav ul
{
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 123px;
}
#nav li a {
font-family: Verdana, Trebuchet MS, Sans-Serif;
font-size: 8pt;
width: 123px;
display : block;
color : black;
text-decoration : none;
background-color : #FFDD00;
border-top : 2px solid white;
padding: 2px 0px 2px 10px;
}
#nav li ul li a {
font-family: Verdana, Trebuchet MS, Sans-Serif;
font-size: 8pt;
width: 140px;
display : block;
color : black;
text-decoration : none;
background-color : #FFAA00;
border : 1px solid red;
padding: 2px;
}
#nav li
{
position : relative;
float : left;
line-height : 25px;
margin-bottom : -1px;
width: 123px;
}
#nav li ul li
{
position : relative;
float : left;
line-height : 15px;
margin-bottom : -1px;
width: 123px;
}
#nav li a:hover {
color : white;
background-color : Red;
}
#nav li ul
{
position : absolute;
left: -999em;
margin-left : 123px;
margin-top : -29px;
}
#nav li ul.member
{
position : absolute;
left: -999em;
margin-left : 123px;
margin-top : -50px;
}
#nav li:hover ul, #nav li.sfhover ul
{
left: auto;
}
Mighty
Please take a look at the following page:
In particular, the pop-out navigation on the left hand side. This works fine in IE6. However when I look at the page using Netscape 7, the navigation is all over the place and when you mouseover the page jumps.
Can anyone give me some advice on the reason why this is happening.
The relevant CSS settings for the navigation are:
#nav, #nav ul
{
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 123px;
}
#nav li a {
font-family: Verdana, Trebuchet MS, Sans-Serif;
font-size: 8pt;
width: 123px;
display : block;
color : black;
text-decoration : none;
background-color : #FFDD00;
border-top : 2px solid white;
padding: 2px 0px 2px 10px;
}
#nav li ul li a {
font-family: Verdana, Trebuchet MS, Sans-Serif;
font-size: 8pt;
width: 140px;
display : block;
color : black;
text-decoration : none;
background-color : #FFAA00;
border : 1px solid red;
padding: 2px;
}
#nav li
{
position : relative;
float : left;
line-height : 25px;
margin-bottom : -1px;
width: 123px;
}
#nav li ul li
{
position : relative;
float : left;
line-height : 15px;
margin-bottom : -1px;
width: 123px;
}
#nav li a:hover {
color : white;
background-color : Red;
}
#nav li ul
{
position : absolute;
left: -999em;
margin-left : 123px;
margin-top : -29px;
}
#nav li ul.member
{
position : absolute;
left: -999em;
margin-left : 123px;
margin-top : -50px;
}
#nav li:hover ul, #nav li.sfhover ul
{
left: auto;
}
Mighty