| Author | Messages | |
matt
Posts:1
| | 07/25/2008 4:37 PM |
| Here is what I do to get the undesired behavior: In Firefox, move the cursor over a root menu item, sub-menu drops down, attempt to move cursor (slowly) over a sub-menu item, and the sub-menu disappears. Notes: If you move the cursor fast enough over the sub-menu items, the sub-menu stays visible. This behavior does not occur when IE is used. | | | |
| |
| John Mitchell
Posts:3478
| | 07/25/2008 4:44 PM |
| This behavior is common in a CSS menu if you have a small gap between the parent and the child menu.
What you need to do is make sure that the Child menu lines up directly with the border of the Parent border or even overlaps a pixel or so.
It sounds like you have a gap of about a pixel since it works in IE (with it's box model) and not in FF.
It may just be padding or margin on something like #nav li in the css. | | | |
| dom
Posts:4
| | 07/26/2008 4:05 AM |
| | is there a CSS script available for vertical hover menu that will work in both IE and firefox? | | | |
| John Mitchell
Posts:3478
| | 07/26/2008 7:27 AM |
| Hi dom,
The menus in this package work across browsers. You can check out the examples at http://demo.snapsis.com
| | | |
| dom
Posts:4
| | 07/27/2008 10:43 AM |
| Im using this CSS and when using firefox all the levels of the menu are visible at ones and are mixed together(one on top of the other) its generally a mess
Can anyone help me with this Css script in order for it to work for both IE and firefox
Thanks
/* ================================
Main CSS STYLES FOR Snapsis CSSNavMenu BlueLeftNav Skin
================================
*/
body{
font-size:11px;
font-family:Tahoma;
color:#000;
}
html{}
html>body #PortalBorder {height:auto}/*for mozilla */
.TabList {
font-size:11px;
font-family:Tahoma;
font-style:normal;
color:Red;
}
/*
//////////////BLUELEFTNAV
*/
/* IE-PC doesn't see these child selectors but CSS2 compliant browsers can make use of them
#NavTabs > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#NavTabs a {float:none;}
/* End IE5-Mac hack */
.TabList ul {
clear:both;
margin:0;
padding:10px 10px;
list-style:none;
display: inline;
}
.TabList li {
float:left;
margin:0;
display: inline;
padding:0 0 0 2px;
}
.LinkIcon {
border:0;
padding-right:2px;
}
select.TabList {
border-left: #339933 1px solid;
border-right: #339933 1px solid;
border-top: #339933 1px solid;
border-bottom: #339933 1px solid;
background-color: #C1CFF9;
color:#000;
font-weight:normal;
font-size:75%;
}
#NavTabsContainerBorder {
background-color:white;
padding:2px;
border:1px solid #333;
display:block;
height:100%;
}
#NavTabsContainer {
border:1px solid #333;
background-color: #E5F5FF;
height:100%;
width:185px;
vertical-align:top;
padding:10px 5px 10px 5px;
}
#NavTabs a {
width:165px;
float:left;
text-align:left;
padding:2px;
text-decoration:none;
border:1px solid #E5F5FF;
border-left:solid 4px #E5F5FF;
color:#000;
}
#NavTabs a:hover {
background-color: #D3EBF7;
border:1px solid #000;
border-left:4px solid blue;
color:#000;
}
#NavTabs .Level0 {
padding-top:5px;
padding-bottom:5px;
border-top: 1px solid #333;
}
#NavTabs .Level0 a {
font-weight:bold;
}
#NavTabs .Level1 {
padding-left:6px;
}
#NavTabs .Level2 {
padding-left:12px;
}
#NavTabs .SelectedTab a
{
font-weight:normal;
border-left:4px solid blue;
background-color: #FFF;
color:#000;
}
#NavTabs .DisabledTab {
color:#000;
font-weight:bold;
padding-left:4px;
width:165px;
}
#nav ul {
padding:0;
margin:0;
list-style:none;
float:right;
width:14.5em;
background-color: #FFFFFF;
}
#nav li {
position: relative;
float:right;
line-height : 1.25em;
width: 14em;
list-style: none;
border-bottom-color:#929292;
border-bottom-style:solid;
border-bottom-width:1px;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -599em;
background-color: #FFFFFF;
margin:-1.9em 0 0 0em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
background-color: #FFFFFF;
}
#nav a {
font-size:1.08em;
display:block;
width: 14em;
width : 12.5em;
text-decoration:none;
font-weight:normal;
margin:1px 0 1px 2px;
padding : 2px 0 2px 6px;
color:#000;
}
#nav a.hasChildren {
background: url(MRPix/rightarrow2.gif) center right no-repeat;
}
#nav li a:hover {
background-color: #D3EBF7;
font-size:12px;
font-weight:normal;
color:#000;
}
#nav li a.SelectedTab {
font-weight:normal;
font-size:12px;
background-color: #FFF;
color:#000;
}
#nav .DisabledTab {
color:#ccc;
}
/*no need to change these hover classes unless you need more than 4 levels */
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li.iehover ul ul,
#nav li.iehover ul ul ul,
#nav li.iehover ul ul ul ul{
left: -999em;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.iehover ul,
#nav li li.iehover ul,
#nav li li li.iehover ul {
left: auto;
}
#navContainerBorder {
background-color:#FFFFFF;
padding:0px;
border-right:1px solid #DDDDDD;
}
#navContainer {
background-color: #FFFFFF;
width:12em;
vertical-align:top;
text-align:right;
padding:10px 5px 10px 5px;
}
#LoginUserContainer {
position:relative;
padding-right:25px;
}
A.BannerLinks:Link, A.BannerLinks:Active, A.BannerLinks:Visited
{
font-family: Tahoma;
font-size: 75%;
font-weight:bold;
color:#000;
padding-left:5;
}
A.BannerLinks:hover
{
color:#FFF;
text-decoration:none;
}
A.Content:Link, A.Content:Active, A.Content:Visited
{
color:#000;
height:auto;
}
A.Content:hover {
color:#FFF;
}
A.FooterLinks:Link, A.FooterLinks:Active, A.FooterLinks:Visited
{
font-weight:bold;
color:#f1f1f1;
padding-left:5;
}
A.FooterLinks:hover
{
color:#FFFFFF;
text-decoration:none;
}
#copyright{
text-align:left;
width:290px;
padding-left:20px;
}
#terms{
left:300px;
width:250px;
text-align:center;
}
#host{
text-align:right;
right:10px;
width:300px;
padding-right:10px;
}
.Head{
font-family: Georgia,Serif;
font-size: 95%;
font-weight: bold;
}
Input.NormalTextbox
{
}
.NormalSmall
{
font-family: Verdana, San-Serif;
font-size: 80%;
font-weight: normal;
color: #000000
}
.NormalSmallRed
{
font-family: Verdana, San-Serif;
font-size: 80%;
font-weight: normal;
color: #CC0000
}
.CSS01
{
position:relative;
top:0;
bottom:0;
margin:5px;
width:100%;
border: #333 1px solid;
}
.CSS01 #Top
{
position:relative;
top:0;
left:0;
height:34px;
width:100%;
background:url(Top.jpg) repeat-x top left;
}
.CSS01 .Content
{
position:relative;
top:0;
left:0;
width:90%;
margin:5px;
background-color:#FFF;
}
.CSS01 #Middle
{
border-left: #333 1px solid;
border-right: #333 1px solid;
}
.CSS01 #Bottom
{
position:relative;
top:0;
left:0;
padding-top:4px;
height:25px;
}
.DivL
{
position:absolute;
text-align:left;
top:2px;
left:5px;
padding-right:10px;
width:50%;
}
.DivIcon
{
float:left;
text-align:left;
top:2px;
left:5px;
padding-right:10px;
width:25px;
}
.DivC
{
position:relative;
left:0;
padding-left:5px;
padding-right:5px;
width:100%;
}
.DivR
{
position:absolute;
width:50%;
text-align:right;
padding-left:10px;
top:2px;
right:5px
}
#PortalContainer
{
background:url(PortalBannerRepeat.jpg) repeat-x top left;
border:1px solid #333;
height:100%;
width:100%;
}
#PortalBanner
{
height:125px;
padding-left:5px;
background:url(PortalBanner.jpg) no-repeat top left;
width:100%;
}
#TopRightContainer
{
width:100%;
text-align:right;
padding-top:1px;
padding-right:10px;
padding-left:10px;
}
.LeftPane
{
width:175px;
padding-top:4px;
padding-left:5px;
padding-bottom:5px;
}
.ContentPane
{
width:100%;
height:100%;
padding-top:0;
padding-left:5px;
padding-right:5px;
}
.RightPane
{
text-align:left;
width:275px;
padding-top:0;
padding-right:10px;
}
#PortalFooter
{
position:relative;
height: 20px;
width:100%;
font-size:70%;
font-weight: bold;
background:url(FooterBack.jpg) repeat-x bottom;
color: #f1f1f1;
text-decoration: none;
}
.ControlPanel
{
BORDER-RIGHT: #003366 1px solid;
BORDER-TOP: #003366 1px solid;
BORDER-LEFT: #003366 1px solid;
WIDTH: 100%;
BORDER-BOTTOM: #003366 1px solid;
HEIGHT: 64px;
BACKGROUND-COLOR: #ffffff;
}
.Head
{
FONT-WEIGHT: bold;
FONT-SIZE: 90%;
COLOR: #333333;
FONT-FAMILY: Georgia,Serif;
}
.SubHead
{
FONT-WEIGHT: bold;
FONT-SIZE: 85%;
COLOR: #3333FF;
FONT-FAMILY: Tahoma, Arial, Helvetica;
}
.SubSubHead
{
FONT-WEIGHT: bold;
FONT-SIZE: 80%;
COLOR: #3333FF;
FONT-FAMILY: Tahoma, Arial, Helvetica;
}
.Normal
{
FONT-WEIGHT: normal;
FONT-SIZE: 80%;
FONT-FAMILY: Tahoma, Arial, Helvetica;
}
TD.Normal
{
FONT-SIZE: 80%;
}
TD.NormalTextBox
{
FONT-SIZE: 80%;
}
TD.NormalBold
{
FONT-SIZE: 80%;
}
.NormalBold
{
FONT-WEIGHT: bold;
FONT-FAMILY: Tahoma, Arial, Helvetica;
}
.NormalRed
{
FONT-WEIGHT: bold;
COLOR: #ff0000;
FONT-FAMILY: Tahoma, Arial, Helvetica;
}
.NormalTextBox
{
FONT-WEIGHT: normal;
FONT-FAMILY: Tahoma, Arial, Helvetica;
}
| | | |
| John Mitchell
Posts:3478
| | 07/27/2008 2:28 PM |
| It looks like you are using a combination of the BlueLeftNav and Suckerfish CSS. For what you are trying to do it would be much better to start with the Vertical Hover CSS Menu Example | | | |
| dom
Posts:4
| | 07/27/2008 5:22 PM |
| im using exactly what u say the script may be complex because i have more than one menu's in there but the one im asking u for help with firefox is the vertical hover.
If u look close to the script u will see the css script of the Vertical Hover menu. And the problem is that the Vertical Hover menu does not work correctly on Firefox
any ideas on how to make it work | | | |
| John Mitchell
Posts:3478
| | 07/27/2008 5:35 PM |
| Sorry, I didn't look close enough to see which CSS you were using, I just saw the BlueLeftNav comment in there.
I'm not really following what exactly isn't working, but if you can zip up your current skin and attach that to a post I'll try it out in FireFox and see if I can help. | | | |
| dom
Posts:4
| | 08/05/2008 3:54 AM |
| I have send u a also a private message cause i did not see that i could upload attachments here. Ok i send you my skin file and my css of the snapsis menu and all the little things that come with it. Remember the problem is that in firefox all the menu's at my left panel are shown meesed up all the child pages are visible at ones and all are on top of each other Thanks in advanced dimitris |
 Attachment: 185542096971.zip
| | |
|
|