Inhaltsverzeichnis

KvFG.org Statisches HTML

Link zur Seite: kvfg.org

  1. IE interpretiert <div> Container falsch und zentriert diesen nicht;
  2. IE kann kein PNG anzeigen bzw. zeigt keine Transparenzen in PNGs an;

Code

Zuerst der Abschnitt HTML: 

<div id="navcontainer">
<ul id="navlist">
	<li><a href="https://www.kvfg.org/moodle">moodle</a></li>
	<li><a href="https://serverg.kvfg.tue.schule-bw.de/mrbs"> mrbs </a></li>
	<li><a href="https://serverg.kvfg.tue.schule-bw.de/horde3">horde</a></li>
	<li><a href="https://mail.lehrerpost.de/"> eMail </a></li>
	<li><a href="https://www.kvfg.org/egw"> eGW </a></li>
</ul>
</div>

Die Leerzeichen um die Links müssen leider sein, damit der IE die Felder einigermaßen gleichmäßig verteilt.

Und der hierzu passende CSS Schnipsel. Damit der Effekt funktioniert müssen noch die entsprechenden Hintergrundbilder vorhanden sein: 

/* Der Eintrag für body als übergeordnetem div Container ist nötig, um dem IE das Zentrieren beizubringen */
 
body {	text-align: center; }
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333300;
}
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF3300;
	text-decoration: underline;
}
#navcontainer
{
	width: 800px;
	height: 120px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(logo_kvfgorg_css.jpg);
	background-repeat: no-repeat;
}
#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }
#navcontainer ul
{
	text-align: center;
	margin-left: 27px;
	margin-right: auto;
	padding: 0 0 0 0;
	color: #FFFFFF;
	font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
	font-size: 0.85em;
	letter-spacing: 2px;
	font-weight: bold;
}
 
#navcontainer ul li a
{
	padding: 0.2em 12px;
	color: #FFFFFF;
	text-decoration: none;
	float: left;
	border-right: 1px solid #94B473;
	height: 100px;
	width: 80px;
	margin-top: 10px;
}
#navcontainer ul li a:hover
{
	color: #ff9900;
	font-size: 1.2em;
}
#navlist li a:hover, #navlist li a:active
{
	color: #FFFFFF;
	text-decoration: none;
	background-image: url(pfeil.jpg);
	background-repeat: no-repeat;
	text-align: center;
	text-transform: capitalize;
	font: bold normal 10px/16px "Lucida Sans Unicode", verdana, lucida, arial, helvetica, sans-serif;
}

Angepasste Vorlage von: http://css.maxdesign.com.au/index.htm

Problemlösung

Die Beispieldateien oben enthalten schon die Problemlösung:

  1. Ersetzen der PNG durch JPG (dafür geht dann einiges am Aussehen über die Wupper);
  2. Den jeweils übergeordneten <div> Container (im Bsp Oben ist das dann gleich mit body gemacht worden) mit text-align: center zentrieren

Sollte die restliche Seite nicht zentriert sein, dann kann