Problem med lista och CSS

6 svar · 406 visningar · startad av biggles-1 22 feb. 2006

biggles-1Medlem sedan jan. 2005125 inlägg

Frågan22 feb. 2006 21:22#1

Har jobbat med en lista med undermenyer, som jag hämtat från WDS. Mallen skall vara ok för IE6 och FF, OCH jag var dum nog att inte kolla i praktiken innan jag började *ler*.

Problemet är att html och css fungerar bra i IE6 men något saknas i CSS-mallen, för att fungera i FF (1.0.6) där blocken blir mycket höga. Koden ser ut som följer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

#menycontainer{float: left;
margin: 0,1em 0 0 1em;
margin-left: 1em;
width: 11em;
font: 65% Verdana, Helvetica, sans-serif;}

#meny {margin: 0px;
padding: 0;
list-style-type: none;}

#meny a {display: block;
padding: 0.3em 0 0.3em 0.7em;
text-decoration: none;
height: 100%;
border: 1px solid #000000;
margin-top: 0.2em;
background: #FFFF99;}

#meny ul {list-style-type: none;}

#meny ul a {padding: 0.3em;}

#meny a:link {color: #000000;}

#meny a:visited {color: #000000;}

#meny a:hover {background: #FFFFFF;}

#meny a#current {font-weight: bold;
background: #DCD147;}

#meny a#subcurrent {font-weight: bold;
background: #DCD147;}
-->
</style>

</head>

<body>

\<li\>\<a href="aaa.html" target="\_top" style="font-weight: bold"\>AAA\</a\>\</li\>
\<li id="active"\>\<a href="bbb.html" target="body" id="current"\>BBB\</a\>
\<ul\>
	\<li\>\<a href="ccc.html" target="body"\>CCC\</a\>\</li\>
	\<li\>\<a href="ddd.html" target="body"\>DDD\</a\>\</li\>
	\<li\>\<a href="eee" target="body"\>EEE\</a\>\</li\>
\</ul\>
\</li\>
\<li\>\<a href="fff.html"\>FFF\</a\>\</li\>
\<li\>\<a href="ggg.html"\>GGG\</a\>\</li\>

</ul>
</div>

</body>
</html>

Någon som har något förslag på vad som saknas? Har själv letat under några timmar, men hittar inget som löser problemet.

Mvh bigglers-1 / Nils

InsiderMedlem sedan jan. 2000978 inlägg

22 feb. 2006 22:15#2

Problemet är att du satt

#meny a {height:100%}

som gör att blocken får en höjd som är 100% av sidans höjd.

CssonMedlem sedan feb. 2000438 inlägg

22 feb. 2006 22:32#3

Du har ett komma där det ska vara punkt (vilket iofs inte spelar nån större roll för sidans utseende):

#menycontainer{
    float: left;
    margin: [B]0,1em[/B] 0 0 1em;
    margin-left: 1em;
    width: 11em;
    font: 65% Verdana, Helvetica, sans-serif;
}

Om du lägger in följande mellan #meny a och #meny ul så slipper du de stora avstånden mellan rutorna i IE som uppstår om du tar bort height: 100% (det finns säkert betydligt snyggare lösningar):

html>body #meny a {
    height: auto;
}

biggles-1Medlem sedan jan. 2005125 inlägg

22 feb. 2006 22:34#4

Hm ..... så "enkelt" var det *ler*. Tack Insider!

Följer upp tråden med att undra över, vilket värde som styr "undermenyn´s" vänsterkant. Vad styr bredden, då jag skulle vilja börja lite längre till vänster, men hittar ingen "width" för detta!

Mvh biggles-1 / Nils

biggles-1Medlem sedan jan. 2005125 inlägg

22 feb. 2006 22:45#5

Hej Csson,

Gjorde ändringen enligt Insider, och valde att sätta "height: 10px" och då fungerade det som jag vill i båda webbläsarna.

När jag däremot satte "height: auto" blev det ett stort avstånd mellan blocken i IE, så jag måste ha missförstått dig eller ...?

Mvh biggles-1

CssonMedlem sedan feb. 2000438 inlägg

22 feb. 2006 22:58#6

biggles-1 skrev:

När jag däremot satte "height: auto" blev det ett stort avstånd mellan blocken i IE, så jag måste ha missförstått dig eller ...?

Du missade nog html>body som används för att dölja det efterföljande blocket från IE ;). Det vill säga att det ska se ut så här:

#meny a {
    display: block;
    padding: 0.3em 0 0.3em 0.7em;
    text-decoration: none;
    height: 100%;
    border: 1px solid #000000;
    margin-top: 0.2em;
    background: #FFFF99;
}

html>body #meny a {
    height: auto;
}

#meny ul {
    list-style-type: none;
}

Men vill du ha 10px så funkar ju det bra :).

biggles-1Medlem sedan jan. 2005125 inlägg

22 feb. 2006 23:09#7

Csson du har helt rätt, jag missade att skriva in det som fanns utanför klammern då det inte såg "rätt" ut *ler*. Tack för tipset!