✔ margin zwischen Tabs bei Untermenue (horizontal) im IE anders

[Necro_nomicon]

Hallo!

Ich hab folgendes Problem. Bei einem horizontalen Untermenue hab ich den Zwischenabstaend der einzelnen Tabs (li) mit margin-right so definiert, dass er 3 Pixel sein soll.
Das funktioniert bei FF auch gut, allerdings bei IE nicht.
Wenn ich jetzt den Abstand auf z.B. 10 px erhoehe, dann nimmt zwar FF und IE einen groesseren Abstand, aber bei allem was unter 5 Pixel ist reagiert er nicht.

AUch bei margin-bottom (ganz unten im code) ergibt sich eine Spalte von 2px Unterschied zwischen FF und IE.

Hier der Code:

<tr>

    <td colspan="2"  class="strich" valign="top">

		<!-- UNTERMENUE -->

			<div id="tabs">

				<ul>

					<li><a href="#.html"><img src="img/menue/team.gif" width="49" height="20" alt="" border="0" class="unten"><span>Test</span></a></li> 

					<li><a href="#.html"><img src="img/menue/team.gif" width="49" height="20" alt="" border="0" class="unten"><span>Test</span></a></li></ul></div>

							 </td>

						</tr>

.strich {

	border-bottom:4px;

	border-bottom-color:#50A687;

	border-bottom-style:solid;

	}



a span {

	display:none;

	}




#tabs ul {

	margin-left: 0px;

	padding-left:0px;

	display:inline;

	background-image:none; /*** weil ul im hauptmenue bereits bg bild definiert hat ***/

	}



#tabs ul li {

	margin-right:3px; /*** Abstand zwischen den Tabs IE nimmt nicht ***/

	margin-bottom:0px;


	list-style:none;

	display:inline;

	font-size:20px;

	line-height:20px; /*** zur Positionierung des Bildes mit size ***/

	/*** background-color:#50A687; ***/



	/*** height:20px; ***/

	}



.unten {

	position: relative;

	margin-bottom:-5px; /*** Unterschiedliche Hoehe IE -7px und FF -5px ***/

	}

 

[Maik]

Hi,

hiermit hält sich auch der IE an den gewünschten Außenabstand:

#tabs ul li {
        margin-bottom:0px;
        list-style:none;
        display:inline;
        font-size:20px;
        line-height:20px;
        }

#tabs ul li a {
      float:left;
      display:inline;
      margin-right:3px;
}

Was den unterschiedlichen unteren Außenabstand im FF und IE angeht, solltest du nicht nur die linken Polsterungeigenschaften des ul-Elements auf null zurücksetzen.

Wenn das nicht weiterhilft, empfehle ich dir diese Regel:

#tabs ul li a img { display:block; }

mfg Maik

 

[Necro_nomicon]

Danke funktioniert nun!

Irgendwie fange ich diese Listen immer falsch an und verkompliziere sie.

Das mit dem Abstand unten funktioniert nicht bei beide Varianten.
Wenn ich bei ul nicht nur left sondern alles aus 0px; setzte passiert gar nichts.

Wenn ich die zweite Variante nehme, dann entsteht ein Spalt zwischen dem Tab und dem Strich darunter (ist keine Border).

Macht aber nichts, das Problem mit unten ist absolut marginal. Muss nicht ueberall 100 Prozent gleich sein.