CSS Text mittig unter Bild ausrichten.

[Yuri_Orlov]

Hi,

ich habe per CSS die Auflistung ul/li definiert.

unter Mozilla wird alles so dargestellt wie es soll.

IE spackt rum:
www.l-fx.de/nav/nav.php

Ich habe dazu das gefunden:
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align

"...text-align bezieht sich nicht nur auf Textinhalte, sondern auf alle inline dargestellten Elemente (wie z.B. <img>). Der Internet Explorer wendet diese Eigenschaft jedoch fälschlich auch auf Block-Elemente an.
Block-Elemente selbst werden über Seite margin ausgerichtet, wobei gleiche Werte für margin-left und margin-right eine Zentrierung bewirken können...."

CSS Code für Mozilla:

div.bg {
background-image: url(./images/top_bg.gif);
background-color:orange;
height:60px;
}


div.bg2 {
background-image: url(./images/top_bg2.gif);
background-color:orange;
height:31px;
}

ul#Navigation {
margin: 0; padding: 0.4em;
text-align: center;
}
	
ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
  }
  ul#Navigation a, ul#Navigation span {
background:url("images/top_trennung.gif") no-repeat right top; 
float: left;
margin: 0.4em; padding: 0.2em 1.5em;
font-family: 'Tahoma';
color: #21386b;
text-decoration: none; 
font-size:9pt;
}
  
  ul#Navigation a:hover, ul#Navigation span {
    text-decoration: underline;
  }

  
  * html ul#Navigation a, * html ul#Navigation span {  /* Korrektur fuer IE 5.x */
    width: 8em;
    w\idth: 6em;
  }

  ul#Navigation div {
     clear: left;
  }


label, input, select, a#Navi, div.Textnavi { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: right;
}


a {
font-family: 'Tahoma';
color: #21386b;
text-decoration: none; 
font-size:9pt;
padding: 2 0px 0 10px;
}

a:hover {
text-decoration: underline; 
}

div.Textnavi {
font-family: 'Tahoma';
color: #21386b;
text-decoration: none; 
font-size:9pt;
padding: 2 10px 0 10px;
}

form {
  margin:0;
  padding:.5em;
}

input.text_bgImage, select.bgImage {
    width: 144px; /* entspricht Grafikbreite */
    height: 18px; /* entspricht Grafikhöhe */
    background: url('images/input_bg.gif'); /* Hintergrundgrafik */
    border: 0; /* Elementrahmen deaktivieren */
    padding: 0 5px 0 5px; /* Innenabstand oben - rechts - unten - links */
}

CSS Code für IE:

div.bg {
background-image: url(./images/top_bg.gif);
background-color:orange;
height:60px;
}


div.bg2 {
background-image: url(./images/top_bg2.gif);
background-color:orange;
height:31px;
}

ul#Navigation {
margin: 0; padding: 0.4em;
}
	
ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
    }
  ul#Navigation a, ul#Navigation span {
background:url("images/top_trennung.gif") no-repeat right top; 
float: left;
margin: 0.4em; padding: 0.2em 1.5em;
font-family: 'Tahoma';
color: #21386b;
text-decoration: none; 
font-size:9pt;
}
  
  ul#Navigation a:hover, ul#Navigation span {
    text-decoration: underline;
  }

  
  * html ul#Navigation a, * html ul#Navigation span {  /* Korrektur fuer IE 5.x */
    width: 8em;
    w\idth: 6em;
  }

  ul#Navigation div {
     clear: left;
  }


label, input, select, a#Navi, div.Textnavi { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: right;
}


a {
font-family: 'Tahoma';
color: #21386b;
text-decoration: none; 
font-size:9pt;
padding: 4 0px 0 10px;
white-space: nowrap;
}

a:hover {
text-decoration: underline; 
}

div.Textnavi {
font-family: 'Tahoma';
color: #21386b;
text-decoration: none; 
font-size:9pt;
padding: 4 10px 0 10px;
}

form {
  margin:0;
  padding:.3em;
}

input.text_bgImage {
    width: 144px; /* entspricht Grafikbreite */
    padding: 0 5px 0 5px; /* Innenabstand oben - rechts - unten - links */
}

select.bgImage {
    width: 144px; /* entspricht Grafikbreite */
    padding: 0 5px 0 5px; /* Innenabstand oben - rechts - unten - links */
}

Danke!

 

[Skuzzle]

Hi,

versuch mal den Ordnerbildern den style "margin: 0px auto;" zu geben.

 

[Yuri_Orlov]

so, Problem gelöst:
Einfach das rausschmeißen und es paßt!

* html ul#Navigation a, * html ul#Navigation span {  /* Korrektur fuer IE 5.x */
    width: 8em;
    w\idth: 6em;
  }

YO.