---
title: "Problem med lista och CSS"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/142869-problem-med-lista-och-css"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "biggles-1"
published: "2006-02-22T21:22:50.000Z"
updated: "2006-02-22T23:09:31.000Z"
replies: 6
views: 426
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/142869-problem-med-lista-och-css"
---

# Problem med lista och CSS

## #1 — biggles-1, 2006-02-22T21:22Z

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\>

\<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"\>

\<style type="text/css"\>
		\<!--
\#content{margin: 1em 1em 1em 1em; 
		padding: 0; 
		float: left;}

\#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\>

\<div id="menycontainer"\>

\<ul id="meny"\>

	\<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

Permalänk: https://www.webforum.nu/p/142869

## #2 — Insider, 2006-02-22T22:15Z

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.

Permalänk: https://www.webforum.nu/p/1770811

## #3 — Csson, 2006-02-22T22:32Z

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;
}
```

Permalänk: https://www.webforum.nu/p/1770817

## #4 — biggles-1, 2006-02-22T22:34Z

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

Permalänk: https://www.webforum.nu/p/1770819

## #5 — biggles-1, 2006-02-22T22:45Z

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

Permalänk: https://www.webforum.nu/p/1770821

## #6 — Csson, 2006-02-22T22:58Z

> **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 :).

Permalänk: https://www.webforum.nu/p/1770823

## #7 — biggles-1, 2006-02-22T23:09Z

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!

Permalänk: https://www.webforum.nu/p/1770826

---

Tråden på webben: https://www.webforum.nu/amne/html-css/142869-problem-med-lista-och-css
