✔ Problem: padding-left/right funktioniert nur im IE?

Status
Nicht offen für weitere Antworten.
E

Eminem

Erfahrenes Mitglied
Problem: margin-left/right funktioniert nur im IE?

Also ich hab mir eine Navigation gebaut, hier folgender Code:

Code: 
<style type="text/css">
<!--
TD.linkbutton a{
	text-decoration:	none;
         margin-left:		10px;
         margin-right:		10px;
         padding-top:		2px;
         padding-bottom:		2px;
         height:			18px;
         width:			100px;
	border:			1px solid #000000;
	font-family:		tahoma, verdana, arial, helvetica;
	font-size:		12px;
	font-weight:		regular;
	text-align:		center;
	color:			#CC0000;
	background-color:	#999999;
}
TD.linkbutton a:hover{
	color: #ffffff;
	background-color:	#666666;
}
#navi {
	background-color:	#999999;
	border:			1px solid #000000;
}
-->
</style>



<table id="navi" border="0" width="600" height="28" cellspacing="0" cellpadding="0">
<tr>
 <td class="linkbutton"><a href="">neuigkeiten</a></td>
 <td class="linkbutton"><a href="">produkte</a></td>
 <td class="linkbutton"><a href="">wunschliste</a></td>
 <td class="linkbutton"><a href="">philosophie</a></td>
 <td class="linkbutton"><a href="">kontakt</a></td>
 <td class="linkbutton"><a href="">impressum</a></td>
</tr>
</table>

Das Problem hierbei ist, dass die Navigation nur im IE korrekt angezeigt wird? Liegt das eventuell an margin-left/right? Und was kann ich machen?
Vielen Dank.

MFG Eminem
 
Zuletzt bearbeitet:
Entferne mal das doppelte <!-- aus dem CSS-Code ;-]

Code: 
style type="text/css">
<!--
TD.linkbutton a{
	text-decoration:	none;
         margin-left:		10px;
         margin-right:		10px;
         padding-top:		2px;
         padding-bottom:		2px;
         height:			18px;
         width:			100px;
	border:			1px solid #000000;
	font-family:		tahoma, verdana, arial, helvetica;
	font-size:		12px;
	font-weight:		regular;
	text-align:		center;
	color:			#CC0000;
	background-color:	#999999;
}
TD.linkbutton a:hover{
	color: #ffffff;
	background-color:	#666666;
}
<!-- 
#navi {
	background-color:	#999999;
	border:			1px solid #000000;
}
-->
</style>
 
Das Problem hierbei ist, dass die Navigation nur im IE korrekt angezeigt wird?
Zum Vergrößern anklicken....

Ich glaube, dass das Problem ist, dass der IE es falsch anzeigt...
Du hast da einen kleinen Rechenfehler
Mit sechs tds à 126px (width+margin+padding) kommst du auf 756px. Genau die zeigt der IE an, obwohl du der Tabelle nur 600px (100px à td) zugewiesen hast.
Also musst du nur die Größen der tds oder die Größe der Tabelle ändern.

Greetz

edit: kommst doch auf 120 px pro td; hatte mich mit den paddings+border vertan :)
 
Zuletzt bearbeitet:
Wenn die Links die Eigenschaft display: block erhalten, übernehmen FF & CO die Weitenangabe, sowie die margin- und padding-Angaben:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
TD.linkbutton a{
        text-decoration:        none;
         margin-left:                10px;
         margin-right:                10px;
         padding-top:                2px;
         padding-bottom:                2px;
         height:                        18px;
         width:                        100px;
        border:                        1px solid #000000;
        font-family:                tahoma, verdana, arial, helvetica;
        font-size:                12px;
        font-weight:                regular;
        text-align:                center;
        color:                        #CC0000;
        background-color:        #999999;
        display: block;
}
TD.linkbutton a:hover{
        color: #ffffff;
        background-color:        #666666;
        display: block;
}

#navi {
        background-color:        #999999;
        border:                        1px solid #000000;
}
-->
</style>

</head>
<body>

<table id="navi" border="0" width="600" height="28" cellspacing="0" cellpadding="0">
<tr>
 <td class="linkbutton"><a href="">neuigkeiten</a></td>
 <td class="linkbutton"><a href="">produkte</a></td>
 <td class="linkbutton"><a href="">wunschliste</a></td>
 <td class="linkbutton"><a href="">philosophie</a></td>
 <td class="linkbutton"><a href="">kontakt</a></td>
 <td class="linkbutton"><a href="">impressum</a></td>
</tr>
</table>

</body>
</html>
[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück