Bottenmarginal på LI

13 svar · 440 visningar · startad av JAreMANNEN 3 nov. 2005

JAreMANNENMedlem sedan aug. 20002 272 inlägg

Frågan3 nov. 2005 10:11#1

Tjoo!

Har lite problem med en lista som jag byggt upp horisontellt.
Som ni ser på den bifogade bilden så får jag en marginal i botten på listan.
Har försökt trixa å fixa men lyckas inte så nu behöver jag lite hjälp.

* {margin:0; padding:0;}
#TopMenu {background-color:#fff; width:auto;}
#TopMenu ul {border-bottom:solid 1px #000; border-top:solid 1px #000;}
#TopMenu ul li {display:inline; border-left:solid 1px #000; padding:0 22px 0 22px;}
#TopMenu ul li a {font:10pt Arial; font-weight:bold; text-decoration:none;}

Själva listan

<div id="TopMenu">
  <ul>
    <li><a href="#">MÄRKEN</a></li>
    <li><a href="#">TROSOR</a></li>
    <li><a href="#">BH/LINNEN</a></li>
    <li><a href="#">BIKINI</a></li>
    <li><a href="#">KLÄDER</a></li>
    <li><a href="#">ACCÉSOARER</a></li>
    <li><a href="#">SÖK</a></li>
  </ul>
</div>

J.N.Medlem sedan apr. 20031 660 inlägg

3 nov. 2005 12:53#2

HEJ!

Testade i IE6 och FF, men jag får ingen linje som du får?

JAreMANNENMedlem sedan aug. 20002 272 inlägg

3 nov. 2005 12:59#3

J.N. skrev:

HEJ!

Testade i IE6 och FF, men jag får ingen linje som du får?

Glömde skriva tidigare att i IE funkar det klockrent.
Det är i FF (1.0.6) som mellanrummet uppstår.

Nu har jag ju iofs en massa andra element och divar runtomkring, la upp en helt ny testsida med enbart ovanstående kod.
Men jag får fortfarande 1px mellanrum :l

J.N.Medlem sedan apr. 20031 660 inlägg

3 nov. 2005 13:25#4

HEJ!

Använder också Firefox 1.0.6, men utan problem.

Låter som du får låta oss testa samma sida som du gör?

JAreMANNENMedlem sedan aug. 20002 272 inlägg

3 nov. 2005 13:29#5

Okej!

http://member.webforum.nu/787/List.htm

Peter SMedlem sedan dec. 20025 483 inlägg

3 nov. 2005 13:38#6

Jag får en marginal som är lika stor i båda bläddrarna.

J.N.Medlem sedan apr. 20031 660 inlägg

3 nov. 2005 13:39#7

HEJ!

Oavsett om jag kör din kod, med extrakod i, eller rensar bort övernavigeringen, fungerar det perfekt!

JAreMANNENMedlem sedan aug. 20002 272 inlägg

3 nov. 2005 13:42#8

Men altså, vad är det frågan om :OO
Jag trodde att det kunde bero på att jag kommit åt och ändrat text-storleken (ctrl+mus-scroll), men icke... Jag måste förminska texten jättemkt för att marginalen ska försvinna.
Väldigt skumt att det visas olika...

JAreMANNENMedlem sedan aug. 20002 272 inlägg

3 nov. 2005 14:05#9

Bara så det inte blir något missförstånd så bifogar jag en bild med marginalen rödmarkerad.
Förstår som sagt inte hur det kan visa olika i samma läsare...

tompeMedlem sedan juni 2004244 inlägg

3 nov. 2005 14:12#10

Får också en marginal i botten på listan. Använder Fx 1.0.7.

EDIT) Testade lite

silfverMedlem sedan apr. 200312 679 inlägg

3 nov. 2005 14:15#11

Jag får en marginal i Firefox 1.0.7 när jag kollar på http://member.webforum.nu/787/List.htm.

InsiderMedlem sedan jan. 2000978 inlägg

3 nov. 2005 14:31#12

Testa med den här CSS-koden:

* {margin:0; padding:0;}
#TopMenu {background-color:#fff; width:auto;}
#TopMenu ul {border-bottom:solid 1px #000; border-top:solid 1px #000;}

/*Easy clearing of floats [url]http://www.positioniseverything.net/easyclearing.html[/url]*/
#TopMenu ul:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#TopMenu ul {display: inline-table;}

/* Hides from IE-mac \*/
* html .#TopMenu ul {height: 1%;}
#TopMenu ul {display: block;}
/* End hide from IE-mac */
/*Easy clearing of floats End*/

#TopMenu ul li {display:inline;}
#TopMenu ul li a {font:10pt Arial;line-height:20px;font-weight:bold;
text-decoration:none;float:left;border-left:solid 1px #000; padding:0 22px 0 22px;}

Som du ser har jag kört med ett specialhack för att slippa lägga in extra classattribut i html-koden. Det finns för- och nackdelar med att använda css-hack.

Du styr höjden på menyn med line-height på #TopMenu ul li a

JAreMANNENMedlem sedan aug. 20002 272 inlägg

3 nov. 2005 14:34#13

tompe skrev:

Får också en marginal i botten på listan. Använder Fx 1.0.7.

EDIT) Testade lite

Jo, det fungerade...men nu ballade det ur i IE istället :OO

JAreMANNENMedlem sedan aug. 20002 272 inlägg

3 nov. 2005 14:36#14

Insider skrev:

Testa med den här CSS-koden:

* {margin:0; padding:0;}
#TopMenu {background-color:#fff; width:auto;}
#TopMenu ul {border-bottom:solid 1px #000; border-top:solid 1px #000;}

/*Easy clearing of floats [url]http://www.positioniseverything.net/easyclearing.html[/url]*/
#TopMenu ul:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#TopMenu ul {display: inline-table;}

/* Hides from IE-mac \*/
* html .#TopMenu ul {height: 1%;}
#TopMenu ul {display: block;}
/* End hide from IE-mac */
/*Easy clearing of floats End*/

#TopMenu ul li {display:inline;}
#TopMenu ul li a {font:10pt Arial;line-height:20px;font-weight:bold;
text-decoration:none;float:left;border-left:solid 1px #000; padding:0 22px 0 22px;}

Som du ser har jag kört med ett specialhack för att slippa lägga in extra classattribut i html-koden. Det finns för- och nackdelar med att använda css-hack.

Du styr höjden på menyn med line-height på #TopMenu ul li a

Lysande!
Tackar :)