---
title: "Space mellan #active och hover i CSS meny?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/124968-space-mellan-active-och-hover-i-css-meny"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "UrMe"
published: "2005-03-23T14:12:58.000Z"
updated: "2005-03-24T18:31:45.000Z"
replies: 10
views: 495
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/124968-space-mellan-active-och-hover-i-css-meny"
---

# Space mellan #active och hover i CSS meny?

## #1 — UrMe, 2005-03-23T14:12Z

Jag har ett problem med min meny, det blir typ 2 pixlars mellanrum mellan knappen som är "taggad" som aktiv och hover effekten i Firefox. I Internet Explorer så är det "bara" ett mellanrum på vänstra kanten till knappen. 

Fast i IE så blir active knappen 2 pixlar bredare till höger när den är markerad.

Svårt att förklara, här är koden om nån skulle vilja hjälpa mig. Jag hittade scriptet på nån sida som jag har modifierat en aning.

```
#navcontainer ul
{
	text-align: center;
	padding-bottom: 7px;
	padding-top: 7px;
	padding-left:0;
	padding-right:0;
	list-style-type: none;
	margin:0;
	/* cancels gap caused by top padding in Opera 7.54 */
	background-color: #90A2C4;
	color: white;
	width: 100%;
	font-family: Verdana,Helvetica,sans-serif;
	font-size:10px;
	font-weight:bold;
	border:0;
	/* fixes Firefox 0.9.3 */
}

#navcontainer ul li
{
	display: inline;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 7px;
	/* matches link padding except for left and right */
	padding-top: 7px;
	margin:0;
	border:0;
}

#navcontainer ul li a
{
	padding-left: 27px;
	padding-right: 27px;
	padding-bottom: 7px;
	padding-top: 7px;
	margin:0;
	color: white;
	text-decoration: none;
}

#navcontainer ul li a:hover
{
	background-color: #00378D;
	color: white;
	margin:0;
	padding-left:27px;
	padding-right:27px;
}

#navcontainer #active
{ 
	background-color: #00378D;
	padding-bottom: 7px;
	padding-top: 7px;
	padding-left: 0;
	padding-right: 0;
	margin:0;
}
```

```
<div id="navcontainer">
	<ul>
		<li><a href="1.html">Sida1</a></li>
		<li><a href="2.html">Sida2</a></li>
		<li id="active"><a href="3.html">Sida3</a></li>
		<li><a href="4.html">Sida4</a></li>
		<li><a href="5.html">Sida5</a></li>
		<li><a href="6.html">Sida6</a></li>
	</ul>
</div>
```

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

## #2 — Guffa, 2005-03-23T19:01Z

Det beror på att den tar med blanksteg (radbrytningar och tabbar räknas som mellanslag i html) som finns mellan li-taggarna. Ifall du lägger dem på samma rad försvinner mellanrummet.

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

## #3 — silfver, 2005-03-23T19:04Z

> **Guffa skrev:**
>
> Det beror på att den tar med blanksteg (radbrytningar och tabbar räknas som mellanslag i html) som finns mellan li-taggarna. Ifall du lägger dem på samma rad försvinner mellanrummet.

Ifall du menar

```
		<li id="active"><a href="3.html">Sida3</a></li>
^--- Det här --^
```

 så kan jag bara säga att du har fel. Det är något annat som ställer till det.

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

## #4 — Guffa, 2005-03-23T19:18Z

Nej, det är inte det jag menar.

Jag menar tabbarna **och** radbrytningarna.

Men varför göra det så komplicerat?

Testad i:
Internet Explorer 6.0
Firefox 1.0.1
Netscape 6.1
Netscape 7.2
Opera 7.54

```
#navcontainer
{
	text-align: center;
	padding: 7px 0;
	background-color: #90A2C4;
 	width: 100%;
	font-family: Verdana,Helvetica,sans-serif;
	font-size:10px;
	font-weight:bold;
}

#navcontainer a
{
	padding: 7px 27px;
	color: white;
	text-decoration: none;
}

#navcontainer a:hover, #navcontainer .active
{
	background-color: #00378D;
}
```

```
<div id="navcontainer">
<a href="1.html">Sida1</a><a href="2.html">Sida2</a><a class="active" href="3.html">Sida3</a><a href="4.html">Sida4</a><a href="5.html">Sida5</a><a href="6.html">Sida6</a>
</div>
```

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

## #5 — UrMe, 2005-03-24T08:31Z

Ojoj.. det där borde jag tänkt på innan :) .. Tackar Guffa! Det löste alla världens problem!

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

## #6 — zcorpan, 2005-03-24T08:45Z

> ```
> <a href="1.html">Sida1</a><a href="2.html">Sida2</a><a class="active" href="3.html">Sida3</a><a href="4.html">Sida4</a><a href="5.html">Sida5</a><a href="6.html">Sida6</a>
> ```

Det ser verkligen jättefint ut utan CSS. Not. Det finns en vits med att använda en lista.

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

## #7 — silfver, 2005-03-24T13:46Z

> **Guffa skrev:**
>
> Nej, det är inte det jag menar.
> 
> Jag menar tabbarna **och** radbrytningarna.

Uhm. Va? Tabbar har ingen som helst betydelse för hur det kommer se ut när sidan visas.

```
<p>
	Här är en massa text som skiter i mina tabbar.
</p>
```

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

## #8 — zcorpan, 2005-03-24T15:11Z

(<http://www.w3.org/TR/REC-html40/struct/text.html#h-9.1>)

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

## #9 — martin, 2005-03-24T16:18Z

> **silfver skrev:**
>
> Va? Tabbar har ingen som helst betydelse för hur det kommer se ut när sidan visas.

jodå, om tabbarna ligger mellan inline-grejer blir de ett mellanslag.

/ m a r t i n

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

## #10 — silfver, 2005-03-24T17:05Z

> **martin skrev:**
>
> > **silfver skrev:**
> >
> > Va? Tabbar har ingen som helst betydelse för hur det kommer se ut när sidan visas.
>
> jodå, om tabbarna ligger mellan inline-grejer blir de ett mellanslag.
> 
> / m a r t i n

Hm. Jag tror jag missuppfattar något. För jag förstår ingenting.  :p

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

## #11 — zcorpan, 2005-03-24T18:31Z

Såväl mellanslag, radbrytningar och tabbar tolkas som *white space* i HTML.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/124968-space-mellan-active-och-hover-i-css-meny