webForumDet fria alternativet
Logga in / Bli medlem

Space mellan #active och hover i CSS meny?

HTML & CSS

10 svar · 476 visningar · startad av UrMe

UrMes avatarUrMeMedlem sedan apr. 2001762 inlägg
Frågan#1

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>
GuffaMedlem sedan juni 2004533 inlägg
#2

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.

silfverMedlem sedan apr. 200312 679 inlägg
#3

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.

GuffaMedlem sedan juni 2004533 inlägg
#4

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>
UrMes avatarUrMeMedlem sedan apr. 2001762 inlägg
#5

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

zcorpanMedlem sedan dec. 20042 245 inlägg
#6
<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.

silfverMedlem sedan apr. 200312 679 inlägg
#7

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>
zcorpanMedlem sedan dec. 20042 245 inlägg
#8

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

martins avatarmartinMedlem sedan apr. 2000313 inlägg
#9

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

silfverMedlem sedan apr. 200312 679 inlägg
#10

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

zcorpanMedlem sedan dec. 20042 245 inlägg
#11

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