08. november 2007 - 11:16
Der er
6 kommentarer
Dropdown menu problem i Mozilla
Jeg har lavet en dropdown menu, der skal folde sig ud over indholdet. Det fungerer fint i IE men i Mozilla, flytter indholdet sig nedad for at gøre plads til dropdownmenuen.
Er der nogen der har oplevet samme problem?
08. november 2007 - 11:37
#2
<link rel="stylesheet" type="text/css" href="/sfbpf/topmenu/total.css">
<table>
<tr>
<td>
<div id="box">
<div id="menucont">
<div class="menublock"
onmouseover="this.className='display'"
onmouseout="this.className='menublock'">
<a class="tl" href="#">Menuoverskrift</a>
<div class="subs">
<a class="sl" href="/fer.asp">menupunkt</a>
<div class="Sidste">
<a class="sl" href="/fer.asp">menupunkt</a></div>
</div>
</div>
<div class="menublock"
onmouseover="this.className='display'"
onmouseout="this.className='menublock'">
<a class="tl" href="#">Menuoverskrift</a>
<div class="subs">
<a class="sl" href="/fer.asp">menupunkt</a>
<div class="Sidste">
<a class="sl" href="/fer.asp">menupunkt</a></div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td width="805">
<div class="content">
<table>
<tr>
<td width="100%" align="left" valign="top">
her er indholdet
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
08. november 2007 - 11:37
#3
/* All the content boxes belong to the content class. */
.content
{
position:relative;
margin-top:0px;
margin-left:0px;
padding:0px 0px 0px 0px;
height: auto;
font-family: Helvetica, Arial, Verdana, sans-serif;
}
.tl {
}
#box
{
position:relative;
width:957px;
margin-top:0px;
margin-left:0px;
z-index: 200;
height: 34px;
}
/* controls the menu */
#menucont
{
width: 957px;
height: 30px;
position: relative;
background-image:url(menu.jpg);
}
.menublock,
.display
{
float:left;
width: 120px;
}
.subs
{
border-style:solid;
border: 1px solid #ccc;
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135, Strength=30);
background-color:#FFFFFF;
}
.subs a
{
display: block;
}
/* This makes the drop down disappear when not used */
.menublock
.subs
{
display: none;
}
/* The fonts for cl, dl, sl and tl SELVE MENUPUNKTERNE I TOPBAREN*/
a.tl, a.tl:hover, a.tl:active, a.sl, a.sl:hover, a.sl:active, a.cl, a.cl:hover, a.cl:active, a.dl, a.dl:hover, a.dl:active
{
display: block;
text-decoration: none;
color: #000;
margin: 3px 0px 0px 0px;
padding: 4px;
border: none;
color: #FFFFFF;
font-weight: bold;
height:26px;
}
/* The active drop down item - refer to as tl MARKER TOP MED RØD VED VALGT MENUPUNKT*/
a.tl:hover, a.tl:active , a.sl:hover, a.sl:active
{
color:#FF0000;
}
/* The background color of the drop down item when on a sub page */
a.cl, a.cl:hover
{
background-color:#A6E6FF;
}
/* The drop down itself - refer to as sl DENNE ER DROPDOWNMENUEN*/
a.sl, a.sl:hover, a.sl:active{
text-align: left;
font-weight: normal;
height: 14px;
margin: 0 0px 0 0px ;
padding: 4px;
background-color:#FFFFFF;
color:#000;
border-bottom: 1px solid #006689;
border-collapse:collapse;
}
/* det sidste menupunkt i hver kasse*/
.Sidste a.sl, .Sidste a.sl:hover, .Sidste a.sl:active{
border:none;
}
.subs a.sl:active
{
display: block;
}
/*mouseover farven på de små menupunkter*/
.subs a.sl:hover
{
display: block;
background-color: #E6EDEC;
background-color:#A6E6FF;
}
.subs a.dl:active
{
display: block;
}
.subs a.dl:hover
{
display: block;
background-color: #E6EDEC;
}
#menu
{
position:absolute;
/*left:50%;*/
width:770px;
margin-top:40px;
margin-left:0px;
background-color: #D82407;
font-family: Helvetica, Verdana, Arial, sans-serif;
/*font-size: 18px;*/
font-weight: bold;
color: #fff;
text-align: left;
z-index: 200;
letter-spacing: 1px;
padding: 3px 8px 3px 3px;
height: 20px;
/* The hack */
voice-family: "\"}\"";
voice-family: inherit;
}
/* be nice to Opera 5 rule. */
body>#menu
{
width: 770px;
}
#menu2
{
position:absolute;
/*left:50%;*/
width:770px;
margin-top:10px;
margin-left:0px;
background-color: #FFFFFF;
font-family: Helvetica, Verdana, Arial, sans-serif;
/*font-size: 13px;*/
font-weight: bold;
color: #D82407;
text-align: right;
padding-top:10px;
padding-left:0px;
padding-right: 10px;
margin-left:0px;
height: 30px;
/* Here again is the hack. */
voice-family: "\"}\"";
voice-family: inherit;
}
/* be nice to Opera 5 rule. */
body>#menu2
{
width: 770px;
}
08. november 2007 - 11:48
#4
Den flytter også i IE hos mig, når jeg samler din kode.
Har du et link til en side hos dig, hvor vi kan se fejlen i stedet?