8 svar · 341 visningar · startad av web00132
Hejsan!
Jag har två problem med min expanderbara meny. Båda problemen handlar om placeringen av lagret som ska visa undermenyerna. Jag har validerat koden både med CSS validatorn och XHTML strict validatorn och det ser finfint ut.
Så här vill jag att min meny ska se ut (bifogar fler bilder i fler inlägg efter detta):
Tyvär vill menyn inte se ut så i Firefox. I Firefox blir det tyvärr ett litet mellanrum mellan undermenyerna och huvudlänkarna:
Det var mitt ena problem. Det andra problemet verkar vara samma i både explorer och Firefox även om det verkar mer vanligt förekommande i Firefox. När jag går in på min sida och ställer muspekaren på en huvudlänk hoppar undermenyn iväg en bit till vänster istället för att lägga sig direkt under huvudlänken. Vad beror det på? Titta här:
Lägger in koden också. CSS-filen:
body,html {
width:100%;
height:100%;
margin:0;
padding:0
}
.bigtable {height:100%; width:688px; padding:0; margin:0; border:0px; vertical-align:top;}
.notsobigtable {height:100%; width:688px; padding:0; margin:0; border:0px;}
.td1 {vertical-align:top; height:78px; background-image:url(innehall/bilder/topp.jpg);}
.linktd {padding:0px 15px 0px 15px; text-align:center; height:20px; margin:0; vertical-align: middle;}
.linktd2 {width:1px; background:#000000; height:18px; margin:0; padding:0;}
.linktd3 {width:207px; margin:0; padding:0;}
.linktd4 {height:1px; background-image:url(innehall/bilder/streck.jpg); margin:0; padding:0;}
.linktd5 {height:10px; margin:0; padding:0;}
.contenttd {width:688px; height:100%; vertical-align:top; padding:0; margin:0;}
.dotstd {width:3px; background-image:url(innehall/bilder/prickar.jpg);}
.texttd {font-family:trebuchet ms,verdana,arial,sans-serif; font-size: 12px; padding:0; margin:0; vertical-align:top;}
.mellantd {width:30px; padding:0; margin:0;}
.mellantd2 {width:100px; padding:0; margin:0;}
.mellantd3 {height:50px;}
.undermarginal {margin-bottom:26px;}
h5 {font-weight:bold; font-size:12px; margin:0; padding:0;}
h4 {font-weight:normal; font-size:12px; margin:0; margin-top:13px; padding:0;}
img {border:0px; margin:0px; padding:0px;}
p {font-weight:normal; font-size:12px; margin:0; margin-bottom:13px; padding:0;}
.imgclass {vertical-align:bottom; padding:0; margin:0;}
.ddm1 {
font: 10px verdana,arial,sans-serif;
}
.ddm1 .item1,
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
padding: 0px 19px 0px 0px;
border: 0px;
text-decoration: none;
display: block;
position: relative;
margin: 0;
}
.ddm1 .item1 {
background: #ffffff;
color: #000000;
}
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
background: #D3EAFE;
color: #000000;
}
.ddm1 .item2,
.ddm1 .item2:hover {
padding: 6px 28px 4px 8px;
text-decoration: none;
display: block;
white-space: nowrap;
}
.ddm1 .item2 {
background: #ffffff;
color: #000000;
}
.ddm1 .item2:hover {
background: #D3EAFE;
color: #000000;
}
.ddm1 .section {
border: 1px #000000;
border-style: solid solid solid solid;
position: absolute;
visibility: hidden;
z-index: -1;
white-space: nowrap;
margin-top: 1px;
}
.ddm1 .left, .ddm1 .left:hover { border-style: solid none solid solid; }
.ddm1 .right, .ddm1 .right:hover { border-style: solid solid solid none; }
* html .ddm1 td { position: relative; } /* ie 5.0 fix */
Menybiten i HTML-koden:
<table cellspacing="0" cellpadding="0" class="bigtable">
<tr>
<td class="td1" colspan="5">
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" id="menu1" class="ddm1" border="0">
<tr>
<td class="linktd5">
<a class="item1 left" href="http://www.rasundakontor.se/"><img src="innehall/bilder/start.gif" alt="Start" /></a>
</td>
<td class="linktd5">
<a class="item1" href="javascript:void(0)"><img src="innehall/bilder/kontor.gif" alt="Kontor" /></a>
<div class="section">
<a class="item2" href="?sida=kontor&undersida=lokalfakta">Lokalfakta</a>
<a class="item2" href="?sida=kontor&undersida=hyresvillkor">Hyresvillkor</a>
<a class="item2" href="?sida=kontor&undersida=ritningar">Ritningar</a>
</div>
</td>
<td class="linktd5">
<a class="item1" href="javascript:void(0)"><img src="innehall/bilder/service.gif" alt="Service" /></a>
<div class="section">
<a class="item2" href="?sida=service&undersida=narservice">Närservice</a>
<a class="item2" href="?sida=service&undersida=kommunikationer">Kommunikationer</a>
<a class="item2" href="?sida=service&undersida=solnacentrum">Solna Centrum</a>
</div>
</td>
<td class="linktd5">
<a class="item1" href="?sida=historia"><img src="innehall/bilder/historia.gif" alt="Historia" /></a>
</td>
<td class="linktd5">
<a class="item1" href="?sida=kontakt"><img src="innehall/bilder/kontakt.gif" alt="Kontakt" /></a>
</td>
</tr>
</table>
</td>
</tr>
Det är enklare att felsöka om du länkar till sidan.
Det framgår från bilderna, därför gjorde jag inte det:
http://www.rasundakontor.se/ny/
Förresten, hur ser den ut för er i div olika webbläsare? Om nån har Mac också vore det grymt att få veta hur den ser ut där. Tackar på förhand!
Stoppa in:
display:block; --> img {}
Ändra:
.ddm1 .section {
border-style: [b]none[/b] solid solid solid;
margin-top: [b]0[/b]px;
}
men resten av innehållet i .ddm1 .section ska stå kvar.
Har ingen aning hur det blir då i IE, men det ser iaf bra ut i FF.
Att dina undermenyer hamnar fel "ibland" beror kanske på nåt javascriptfel. Det verkar som det rättas till när man uppdaterar sidan. Men blir fel igen när man kör en total refresh (CTRL + F5).....
Åh, skönt! Det var ju enkelt. Men jag vill nog ha kvar min border dock. Den avgränsar liksom från huvudlänkarna. Varför vill du att jag ska ta bort den?
Då skapar jag en tråd i javascript-forumet istället och avslutar denna tråd. Tack för hjälpen!
:bire
web00132 skrev:
Åh, skönt! Det var ju enkelt. Men jag vill nog ha kvar min border dock. Den avgränsar liksom från huvudlänkarna. Varför vill du att jag ska ta bort den?
Jag fick nog för mig att du inte behövde den, då du hade ett streck.jpg som låg ovanför, men den hamnade ju över så den ska vara kvar såklart. ;)