✔ Background- und Align-Probleme

Status
Nicht offen für weitere Antworten.
Suchfunktion

Suchfunktion

Erfahrenes Mitglied
Hallo!

Vorweg: Ich verwende XHTML 1.1
Ich erstelle eine Seite, welche komplett ueber CSS formatiert wird (man lernt ja aus Fehlern ;) ) und habe nun 2 Probleme.

Problem 1: DIV-Background + Hovereffekt
Ich habe folgendes Menue:
HTML: 
<ul id="menu_static">
	<li class="menu_entry">
		<a href="#">Anfahrt</a>
	</li>
	<li class="menu_entry">
		<a href="#">Kontakt</a>
	</li>
	<li class="menu_entry">
		<a href="#">Impressum</a>
	</li>
</ul>

CSS:
CSS: 
ul#menu_static li{
	list-style:  none;
	line-height: 30px;
	padding-left: 15px;
	font-size: 12px;
}

ul#menu_static li:hover{
	list-style:  none;
	line-height: 30px;
	padding-left: 15px;
	font-size: 12px;
	background-image: url(../images/nav_kasten_on.gif);
	background-position: center left;
	background-repeat: no-repeat;
}

Jetzt die Frage:
Wieso funktioniert der Hover-Effekt mit dem Hintergrundbild nicht?
(Funktioniert im Mozilla FireFox. Im Internet Explorer aber nicht.)
An sich funktioniert alles, nur das Hintergrundbild wird nicht angezeigt, wenn man ueber einen der DIV's geht.


Problem 1: Text-Align
Ich moechte meinen Seiteninhalt (bzw. die Tabelle in der sich die Inhalte befinden) zentriert anzeigen lassen.
Hier erstmal mein HTML- und CSS-Zeugs:
HTML: 
<body class="main">
	<table class="main_table" cellpadding="0" cellspacing="0">
		<tr>
			<td class="main_cell_header" colspan="2">Test123</td>
		</tr>
	</table>
</body>

CSS:
CSS: 
.main{
	padding: 10px 0 0 0;
	text-align: center;
}

Problem:
Im Internet Explorer wird der Inhalt (also dieTabelle) zentriert angezeigt, im FireFox allerdings ist sie normal am linken Rand. Wieso? Und was kann ich daran aendern?

Vielen Dank :)
 
Zum ersten Problem: Übertrage die Eigenschaften einfach auf das a-Element. Der Internet Explorer interpretiert die :hover-Pseudoklasse leider nur bei diesem Element.

Zum zweiten Problem: Probier mal Folgendes:
Code: 
.main {
	padding: 10px 0 0 0;
	text-align: center;
}
.main_table {
	margin: 0 auto;
	text-align: left;
}
Vielleicht wird die Tabelle noch eine definierte Breite benötigen. Probier’s einfach mal aus.
 
Hi,
hat beides super funktioniert :)

Aber ich habe noch eine Verstaendnissfrage:
Wieso klappt das ploetzlich, wenn ich margin 0 auto nehme?

(Muss schliesslich nicht nur klappen, sonder ich will auch verstehen WIESO es klappt ;) )

Ich habe den Thread mal auf Erledigt gesetzt, aber waer cool, wenn mir trotzdem jemand sagen koennte, wieso das ganze jetzt funktioniert ;)
 
Zuletzt bearbeitet:
Die text-align:center-Eigenschaft für das body-Element wird von den modernen Browsern nicht auf die darin eingebundenen Blockelemente (table, div, usw.) angewendet bzw. vererbt.

Mit margin:0 auto wird das Blockelement im Browserfenster am oberen Rand ausgerichtet und horizontal zentriert, wobei hierfür auch eine Breitenangabe für das Element erforderlich ist.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück