---
title: "display: visibility ger oönskade mellanrum"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/155746-display-visibility-ger-oönskade-mellanrum"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "silfver"
published: "2007-01-08T19:55:02.000Z"
updated: "2007-01-08T21:07:48.000Z"
replies: 12
views: 510
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/155746-display-visibility-ger-oönskade-mellanrum"
---

# display: visibility ger oönskade mellanrum

## #1 — silfver, 2007-01-08T19:55Z

Som rubriken förtäljer så får jag hemska glapp mellan mina rubriker. Så här ser min kod ut: 

```
<h3><a href="#" onclick="visa(document.getElementById('categories'))">Kategorier +</a></h3>
<div id="categories" style="visibility: hidden;">
	test
</div>

<h3><a href="#" onclick="visa(document.getElementById('archive'))">Arkiv +</a></h3>
<div id="archive" style="visibility: hidden;">
	test
</div>
```

 Innehållet i div:arna döljs, men de tar fortfarande lika mycket utrymme. Hur kan man lösa det?

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

## #2 — @nders, 2007-01-08T19:56Z

Använd *display:none;* och *display:block;* istället.

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

## #3 — silfver, 2007-01-08T20:00Z

> **@nders skrev:**
>
> Använd *display:none;* och *display:block;* istället.

Då fungerar inte scriptet jag använder för att visa/dölja. :l 

```
	<script language="JavaScript" type="text/javascript">
	function visa(layer) {
		if(layer.style.visibility=='hidden'){
			layer.style.visibility='visible';
		} else {
			layer.style.visibility='hidden';
		}
	}
	</script>
```

 Jag har prövat att ersätta visibility mot display...

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

## #4 — doggelito, 2007-01-08T20:12Z

```
<script language="JavaScript" type="text/javascript">
	function visa(layer) {
		if(document.getElementById(layer).style.display=='none'){
			document.getElementById(layer).style.display='block';
		} else {
			document.getElementById(layer).style.display='none';
		}
	}
	</script>
```

borde göra susen! :)

/red
ops, såg att du redan skickar in document.get... redan i a-taggen så då blir det kaka på kaka!

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

## #5 — @nders, 2007-01-08T20:16Z

Jag skulle bara ha ändrat *visibility='visible'* till *display='block'* och *visibility='hidden'* till *display='none'*, så borde det fungera.

mvh

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

## #6 — silfver, 2007-01-08T20:32Z

> **doggelito skrev:**
>
> ```
> <script language="JavaScript" type="text/javascript">
> 	function visa(layer) {
> 		if(document.getElementById(layer).style.display=='none'){
> 			document.getElementById(layer).style.display='block';
> 		} else {
> 			document.getElementById(layer).style.display='none';
> 		}
> 	}
> 	</script>
> ```
>
> 
> 
> borde göra susen! :)
> 
> /red
> ops, såg att du redan skickar in document.get... redan i a-taggen så då blir det kaka på kaka!

 Din kod borde väl fungera till följande? 

```
<h3><a href="#" onclick="visa(document.getElementById('archive'))">Arkiv +</a></h3>
<div id="archive" style="display: none;">
<p>test</p>
</div>
```

 Men jag lyckas inte...

> **@nders skrev:**
>
> Jag skulle bara ha ändrat *visibility='visible'* till *display='block'* och *visibility='hidden'* till *display='none'*, så borde det fungera.
> 
> mvh

Jag prövade med det först. Men det fungerade inte. :(

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

## #7 — @nders, 2007-01-08T20:43Z

hur ser alltså din kod ut nu?

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

## #8 — silfver, 2007-01-08T20:45Z

> **@nders skrev:**
>
> hur ser alltså din kod ut nu?

Precis så som jag skrev i inlägget före dig.

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

## #9 — @nders, 2007-01-08T20:48Z

Du använder alltså doggelitos funktion med html-koden du visar?
Nej, det fungerar inte. Du använder ju document.getElementById() på båda ställena. Ska du ha med det i funktionen, då ska du inte ha med det i anropet. Skicka i så fall bara namnet på div:en som skall tändas / släckas.

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

## #10 — silfver, 2007-01-08T20:54Z

> **@nders skrev:**
>
> Du använder alltså doggelitos funktion med html-koden du visar?
> Nej, det fungerar inte. Du använder ju document.getElementById() på båda ställena. Ska du ha med det i funktionen, då ska du inte ha med det i anropet. Skicka i så fall bara namnet på div:en som skall tändas / släckas.

Jag förstår inte riktigt hur du menar. Jag är inte så haj på javascript. :l

Jag prövade att bara ändra så som du skrev tidigare, men det fungerar inte. Hur ska länkarna se ut?

```
<script language="JavaScript" type="text/javascript">
function visa(layer) {
	if(layer.style.display=='none'){
		layer.style.display='block';
	} else {
		layer.style.display='none';
	}
}
</script>
```

 Ifall jag använder dggelitos kod, hur ska länkarna se ut då?

**r/** Jag antog att du menade att jag bara skulle plocka bort dockument... så det ser ut så här: 

```
<a href="#" onclick="visa('archive')">Arkiv +</a>
```

 Men det gjorde ingen skillnad.

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

## #11 — @nders, 2007-01-08T21:00Z

Om du har ändrat javascriptfunktionen enligt mitt förslag ska du inte ändra länkarna.
Om du har ändrat javascriptfunktionen enligt doggelitos förslag ska du ändra länkarna till så som du skrev i ditt senaste inlägg.

Hur funkar det inte? Får du något javascript-fel?

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

## #12 — silfver, 2007-01-08T21:04Z

> **@nders skrev:**
>
> Om du har ändrat javascriptfunktionen enligt mitt förslag ska du inte ändra länkarna.
> Om du har ändrat javascriptfunktionen enligt doggelitos förslag ska du ändra länkarna till så som du skrev i ditt senaste inlägg.
> 
> Hur funkar det inte? Får du något javascript-fel?

Okay. Nu har jag ändrat scriptet så att det blev så som du ville ha det. Länkarna ser ut som i mitt första inlägg. Men det fungerar inte ändå. Jag har kollat felkonsolen i Firefox men den visar ingenting.

Fungerar det för dig ifall du testar?

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

## #13 — silfver, 2007-01-08T21:07Z

Nu löste det sig. Tog bort allt och började om. Jag tror det var scriptet som sparade en kaka som rörde till det. :) Tack för ditt tålamod!

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/155746-display-visibility-ger-oönskade-mellanrum