Hässliches Problem - FiFo - IE

(hier klicken, um zum Original Thread zu gelangen)

rbrixel

Hallo!

Hab da folgendes Problem:

Firefox:

http://www.brxl.de/bilder/fifo.jpg

Internet Explorer:

http://www.brxl.de/bilder/ie.jpg

CSS-Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

#menu
{
	padding: 5px;
	height: 30px;
	background-color: #ffffff;
	display: table-cell;
	vertical-align: middle;
	color: #000000;
	font-face: Arial, Verdana;
	font-size: 8pt;
}

#menu:hover
{
	background-color: #336699;
	color: #ffffff;
}

#content
{
	font-face: Arial, Verdana;
	font-color: #000000;
	font-size: 10pt;
	padding: 15px;
}

Menu:

code:

1:
2:
3:
4:
5:
6:
7:

<!-- ---------- MENU ---------- -->
 <div align="center">
 <div id="menu">Startseite</div>
 <div id="menu">Wir über uns</div>
 <div id="menu">Dienstleistungen</div>
 <div id="menu">Preisliste</div>
 </div>

So wie es im Firefox aussieht, ist es richtig - im IE siehts dafür total bekackt aus - hat da jemand eine Idee?

mfg,
René.

webmaster333

Hi,

Menüs werden heutzutage mit Listen umgesetzt. Hier mal ein kleiner Denkanstoß für ein horizontales Menü:

HTML

code:
1: 2: 3: 4: 5: 6: 7: 8:	<ul> <li><a href="#">Startseite</a></li> <li><a href="#">Wir über uns</a></li> <li><a href="#">Dienstleistungen</a></li> <li><a href="#">Preisliste</a></li> </ul>

CSS

code:
1: 2: 3: 4:	ul { list-style-type: none; margin: 0; padding: 0 } ul li { float: left; padding: 0 10px 0 10px; text-align: center }

viele Grüße
Georg

der_nic

Ausserdem darfst du eine ID nur einem einzigen Element geben. Mehrere Elemente werden über Klassen ausgewählt

rbrixel

hmm... geht irgendwie trotzdem noch nicht...

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

li.menu
{
	padding: 5px;
	background-color: #ffffff;
	color: #000000;
	font-face: Arial;
	font-size: 8pt;
	text-align: center;
}

li.menu:hover
{
	background-color: #336699;
	color: #ffffff;
}

ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: center;
}

...und im IE gibts keinen hover-effekt?

rbrixel

Habs jetzt gelöst!

CSS:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

a.menu
{
	padding: 10px;
	background-color: #ffffff;
	color: #000000;
	font-family: Arial;
	font-size: 8pt;
	text-align: center;
	text-decoration: none;
	display: table-cell;
}

a.menu:hover
{
	background-color: #336699;
	color: #ffffff;
}

HTML:

code:
1: 2: 3:	<a href="#" class="menu">Startseite</a> <a href="#" class="menu">Wir über Uns</a> ...

Im IE, wie im FiFo gleich... Thx. Es lag an den Klassen sag ich jetzt einfach mal...

der_nic

Naja nicht ganz...

Der hover-Effekt aktzepiert der IE(6) nur bei Ankerelementen (<a />), während hingegen FF und Opera ihn überall verstehen.

rbrixel

Zitat:

Original von der_nic
Naja nicht ganz...

Der hover-Effekt aktzepiert der IE(6) nur bei Ankerelementen (<a />), während hingegen FF und Opera ihn überall verstehen.

ja, das hab ich auch gemerkt - verwende zwar den IE7 u FiFo 3.b5 - nur im <a ..>-Tag frisst er es...

Danke für eure Hilfe bzw. Denkanstoss!

(hier klicken, um zum Original Thread zu gelangen)