Inline-Block mit IE: div mit height aber ohne width?

Projecta · #1 (**permalink**) 19.03.2010, 17:18

Hallo,

da ich nun schon länger an einem Problem hänge möchte ich euch gerne bitten, mir ein wenig zu helfen.

Es geht um ein Menu, das als Liste horizontal und zentriert dargestellt werden soll.
Der Code funktioniert auch schon ganz gut, nur leider fällt der IE aus dem Rahmen, sobald ich dem DIV-Element (.active) innerhalb des Inline-Wrappers (li) eine Höhe ohne Breite zuweise. Das ist aber wichtig, um ein Hintergrund-Bild mit repeat-x darstellen zu können. Mit angegebener Breite funktioniert es auch im IE. Die Breitenangabe variiert allerdings, ist also nicht vorhanden (JavaScript kommt nicht in Frage).

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
<!--

#navigation
{
	height:25px;
	width:500px;
	overflow:hidden;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	color:#fff;
	line-height:1;
}

ul
{
	margin:0;
	padding:0;
}

li
{
	display:inline-block;
	margin:0;
	padding:0;
	vertical-align:top;
}

*html li
{
	display:inline;
}

*:first-child+html li
{
	display:inline;
}

.active
{
	height:25px; /* IE6 (IE7?) stellt Inline-Wrapper (li) ohne Breitenangabe als Block dar! Float wg. Zentrierung keine Alternative! */
	background-color:#b7db27;
}

-->
</style>
<title>IE Fix</title>
</head>

<body>

<div id="navigation">
<ul>
<li><div class="link"><a href="#">Link 1</a></div></li>
<li><div class="active"><span>Active</span></div></li>
<li><div class="link"><a href="#">Link 3</a></div></li>
<li><div class="link"><a href="#">Link 4</a></div></li>
</ul>
</div>

</body>
</html>

Hat da vielleicht irgendwer ne Idee?
Ich würde mich sehr freuen, wenns ne Möglichkeit gibt, das ganze doch noch hinzubekommen, oder aber jemand ne Alternative kennt.

Vielen Dank schon mal im Voraus für eure Mühen.

Schöne Grüße aus Kärnten
Projecta

EvT · #2 (**permalink**) 19.03.2010, 18:37

Allgemein: Um display:inline-block in IE zu erreichen, verwendet man stattdessen display:inline; zoom:1; (vor anderen Browsern verbergen!)

Den Sinn der Divs in den li's verstehe ich noch nicht so ganz.

Gruß zurück.

Projecta · #3 (**permalink**) 19.03.2010, 20:46

Hallo EvT,

danke für deine Hilfe. Fürn IE hab ichs wie zu sehen display: inline gesetzt, und die DIVs benötigt man angeblich für Firefox, aber leider funktioniert das mit den Breitenangaben nicht so wie gewünscht...

Dennoch Danke

EvT · #4 (**permalink**) 19.03.2010, 21:08

IE braucht display:inline u n d zoom:1 !

Zusätzlich macht Firefox < 3 Probleme. Zum einen kennen diese Versionen display:inline-block nicht, reagieren aber auf display: -moz-inline-box;

Code:

li{
display: -moz-inline-box;
display: inline-block;
[...]
}

Zum zweiten sollte li in diesem Fall in FF <3 stabilisiert werden, das geht ganz gut mit einem span:

Code:

li span {
	display: table;
	border-collapse:collapse;
	border-spacing: 0;
	}

Also, ersetz die Divs durch Span und überleg nochmals, ob die Klassen 'link' und 'active' wirklich gebraucht werden.

.

Austen · #5 (**permalink**) 19.03.2010, 22:34

Zitat:

Zitat von EvT

IE braucht display:inline u n d zoom:1 !

Wieso? Die <li> haben durch inline-block sowieso hasLayout=true.

fricca · #6 (**permalink**) 19.03.2010, 22:51

Zitat:

Zitat von Projecta

Der Code funktioniert auch schon ganz gut, nur leider fällt der IE aus dem Rahmen, sobald ich dem DIV-Element (.active) innerhalb des Inline-Wrappers (li) eine Höhe ohne Breite zuweise.

Die Höhe löst haslayout aus. Das Problem ist hier erläutert:
Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung

Zitat:

Float wg. Zentrierung keine Alternative!

Schau doch mal in die FAQ.
Außerdem liegt das div innerhalb des inline-block-Elements. Ein float hätte auf die Zentrierung keinen Einfluss.

Projecta · #7 (**permalink**) 20.03.2010, 02:20

Hm,

vielen Dank für eure Hilfe.

Das mit dem FF ist mir bekannt und hab ich wg. einfacherem Code weggelassen.
Das mit dem hasLayout hab ich jetzt mal ausprobiert und zoom:1 gesetzt, doch leider ohne die gewünschte Wirkung.
Die Klassen kann ich nur bedingt beeinflussen, da ich das ganze in TYPOlight verwirklichen möchte und die grundlegende Navigationsmechanik nicht verändern kann (bzw. ich mir nicht ohne dringlichen antun möchte). Allerdings wüsste ich nicht, wie die Klassen an sich stören sollten.

Leider komm ich auch nach Studium eures Infomaterials nicht dahinter, obs ne Möglichkeit gibt, ein Blockelement (egal ob DIV, span, oder sonst eines) innerhalb eines inline(-block) elements mit einer Höhe OHNE Breite zu definieren.

Werde wohl das Wochenende weiter versuchen der Sache auf den Grund zu gehen.

Vielen Dank nochmals
Projecta

fricca · #8 (**permalink**) 20.03.2010, 12:08

Zitat:

Zitat von Projecta

Leider komm ich auch nach Studium eures Infomaterials nicht dahinter, obs ne Möglichkeit gibt, ein Blockelement (egal ob DIV, span, oder sonst eines) innerhalb eines inline(-block) elements mit einer Höhe OHNE Breite zu definieren.

Dann musst du genauer studieren.
Nimm deinen Code oben. Schreib bei deinem Element "active" float:left dazu -- für den einen betroffenen Browser.

Alternativlösung ohne das für ältere Geckos problematische inline-block wurde auch bereits verlinkt.

Projecta · #9 (**permalink**) 20.03.2010, 16:46

DANKE FRICCA!!!

Das mit dem float:left für active funktioniert. Da wär ich nie draufgekommen...

Werd jetzt noch FAQ Nr.13 durchackern, ist vielleicht sogar noch brauchbarer.

Vielen Dank nochmals und ein schönes Wochenende
Projecta

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09
Darstellungsprobleme im IE	lea11011989	CSS	17	05.11.2010 09:44
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Frage zu horizontalen Linien	marvin1989	CSS	3	29.12.2009 23:35
Mozilla zeigt DIV zu oft an	cracki	CSS	6	09.03.2008 15:22