css menu help

**number22** · 01-05-2009, 05:58 PM

I'm sorry for my english, it's not very good, I'm italian..I have a little problem with this menu: http://www.dynamicdrive.com/style/cs...el_css_menu_2/
when I open the page(with the menu) with Internet Explorer it's all right, but if I open the page with Firefox, the menu it's not visualized correctly..after the last button the menu doesn't go on till the end of the page! Can it depend from my css? Anyone can help me please? Many thanks!!

**Snookerman** · 01-05-2009, 06:06 PM

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out.

**number22** · 01-06-2009, 10:25 AM

This is the code of the css:

html,body{margin:0;padding:0}
body{font: 94% arial; color: #666666}
p{margin:0 10px 10px}
div#content p{line-height:1.4; margin:10px 10px 10px 10px}
div#interno a{margin: 0 0 0 0}
div#navigation{background:#0000CC}
div#extra{background:#0000CC}
div#footer{background: #333;color: #FFF}
div#footer p{font-size:11px; margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%}
div#content{margin: 20px 200px}
div#interno{margin-left:20px; margin-right: 10px;}
div#navigation{float:left;height: 1100px;width:200px;margin-left:-100%}
div#extra{float:left;height: 1100px;width:200px;margin-left:-200px}
div#footer{clear:left;width:100%;}

.jqueryslidemenu{
font: bold 12px Arial;
background: #0000CC;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #0000CC; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #FFFFFF;
color: #0000CC;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Arial;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid white;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

and this is the code in the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>A.S.D. FUTSAL P.S.N.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="css/default.css" />



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>

</head>

<body>
<div id="container">
<div id="wrapper">
<div id="content">
<div align="center"><img src="imgs/img1.jpeg" width="590px" height="200px"></div>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="#">Società</a>
<ul>
<li><a href="Organigramma.htm">Organigramma</a></li>
<li><a href="Storia.htm">Storia</a></li>
<li><a href="#">Campo da gioco</a></li>
</ul>
</li>
<li><a href="#">Stagione 07/08</a>
<ul>
<li><a href="#">Campionato</a></li>
<li><a href="#">Coppa Veneto</a></li>
</ul>
</li>
<li><a href="#">La squadra</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Rassegna stampa</a></li>
<li><a href="News.htm">Notizie</a> </li>
</ul>
</li>
<li><a href="Contatti.htm">Contatti</a> </li>
</ul></div>

<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<img src="imgs/Partner.jpg" width="100%">
<div align="center"><img src="imgs/Boscaro.jpeg">
<img src="imgs/AuroraAss.jpeg"><br>
<img src="imgs/ItalFeltri.jpeg">
<img src="imgs/Cisl.jpg" width="190" height="90"></div>

</div>
</div>
<div id="navigation">

</div>
<div id="extra">

</div>
<div id="footer"><p align="center">
<a href="http://jigsaw.w3.org/css-validator/">
<img align="left" style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS Valido!" />
</a>

<a href="http://jigsaw.w3.org/css-validator/">
<img align="left" style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="CSS Valido!" />
</a>
Sede: via Napoli n° 37 - 35020 Ponte San Nicolò - Per corrispondenza: via Marina n° 7 - 35127 Padova<br>
Tel: 049 8705223 - Cell: 348 2523046 - email: info@futsapsn.it
</p></div>
</div>
</body>
</html>

thank you very much!!

**number22** · 01-06-2009, 05:55 PM

I think it's better the direct link to the page:
http://www.futsalpsn.it/Nuovo3/index.htm
the menu it's not visualized correctly in Firefox but olso in IE7 (a friend of mine tells me that he didn't see it as I want)! Many thanks!!

**Snookerman** · 01-06-2009, 06:45 PM

Try adding this to your css code:

Code:

.jqueryslidemenu {default.css (line 22)
-x-system-font:none;
background:#0000CC none repeat scroll 0 0;
font-family:Arial;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
width:100%;
position:absolute;
}

**number22** · 01-09-2009, 05:06 PM

Thank you very much!! Now it's perfect!! Can you explain me where the problem was and how you have resolved it? Many thanks!!!

Thread: css menu help

Thread Tools

Search Thread

css menu help

Bookmarks

Bookmarks

Posting Permissions