✔ padding-top problem

[Arndtinho]

Hallo,

ich habe ein Problem mit padding-top.
Hier ist erstmal der HTML-Code:

<div id="container">
      
      <div id="top_menue1"><a href="#" class="top_menue">Projekte</a></div>
      <div id="top_menue2"><a href="#" class="top_menue">Kontakt</a></div>
      <div id="top_menue3"><a href="#" class="top_menue">Impressum</a></div>
      ...
</div>

Und hier der Code aus dem CSS-File:

html {
    background-color:   #ffffff;
    height:             100%;
    margin:             0;
    padding:            0; 
}

body {
    background-color:   #ffffff;
    height:             100%;
    margin:             0;
    padding:            0;
}

#top_menue1 {
   position:               absolute;
   margin-top:             55px;
   margin-left:            200px;
   height:                 20px;
   width:                  100px;
   text-align:             center;
   border-top-width:       1px;
   border-top-style:       solid;
   border-top-color:       #000000;
   border-right-width:     1px;
   border-right-style:     solid;
   border-right-color:     #000000;
}

#top_menue2 {
   position:               absolute;
   margin-top:             55px;
   margin-left:            300px;
   height:                 20px;
   width:                  100px;
   text-align:             center;
   border-top-width:       1px;
   border-top-style:       solid;
   border-top-color:       #000000;
   border-right-width:     1px;
   border-right-style:     solid;
   border-right-color:     #000000;
}

#top_menue3 {
   position:               absolute;
   margin-top:             55px;
   margin-left:            400px;
   height:                 20px;
   width:                  100px;
   text-align:             center;
   border-top-width:       1px;
   border-top-style:       solid;
   border-top-color:       #000000;
   border-right-width:     1px;
   border-right-style:     solid;
   border-right-color:     #000000;
}

/** Links **/
/***********/
a.top_menue {
   color:                  #000000;
   font-family:            Arial;
   font-size:              12px;
   font-weight:            normal;
   text-decoration:        none;
}

a.top_menue:hover {
   color:                  #000000;
   font-family:            Arial;
   font-size:              12px;
   font-weight:            normal;
   text-decoration:        underline;
}

Das Problem an der Sache ist, wenn ich jetzt die Links mit

padding-top: 3px;

ein wenig zentrieren möchte, wird das weder vom IE noch vom Firefox interpretiert.
Habe auch schon bei #body und #html das padding: 0; wieder rausgenommen und getestet, aber ohne Erfolg. Was könnte noch falsch sein?

Gruß
Arndtinho

 

[Maik]

Das Inline-Element a benötigt hierfür die display:block-Eigenschaft.

 

[Arndtinho]

Danke, habs getestet und klappt.
Und wieso muss diese Eigenschaft mit rein?

 

[Maik]

Weil sich ansonsten auf das Inline-Element a keine "Box"-Eigenschaft (Breite, Höhe, Innenabstand) anwenden lässt.

 

[Arndtinho]

Danke. Da muss ich mir wohl nochmal ein paar Dinge anlesen.