✔ Mal wieder der Internet Explorer...

ljungi · 27. August 2005

Hallöchen,

Ich habe da eine Frage...
Arbeite mich gerade in CSS ein, klappt alles auch wunderbar. Nun habe ich das (wirklich kleine) CSS mal angewendet und im Opera Firefox und natürlich im Internet Explorer (6) getestet.

Nun kommt folgendes raus:

Wie ihr seht ist beim Internet Explorer die erste Box total daneben.

Hier mal der Quelltext der Style.css und der HTML-Datei:

HTML:

          <div id="links">
          	<div id="navbox">
          		<div class="navtitle"><a href="#">Titel1</a></div>
          		<div id="innavbox">
          			<a href="#">Hallo</a>
          			<a href="#">Du</a>
          		</div> 
            </div>

          	<div id="navbox">
          		<div class="navtitle"><a href="#">Titel2</a></div>
          		<div id="innavbox">
          			<a href="#">wir</a>
          			<a href="#">ihr</a>
          		</div>
            </div>
          </div>

Code:

#links {
  width: 25%;
  float: left;
  border-left: 1px solid #072A66;
  border-right: 1px solid #072A66; 
  border-bottom: 1px solid #072A66;
  position: relative;
}

#navbox {
 	background-color: #F0F5FA;
 	border-left: 1px solid #34498B;
 	color:#5176B5;
}

#navbox a {
 	color:#5176B5;
 	text-decoration: none;
}

#navbox a:hover {
 	color:#34498B;
 	text-decoration: none;
}
/*-----*/
#innavbox {
  background-color: #fff;
  margin: 0px 2px 0px 5px;
  border: 0;
  font-weight: bold;
  padding: 0;
}

#innavbox a {
	display: block;
	border-left: 5px solid #5176B5;
	color: #000;
	padding: 2px 0px 2px 10px;
	text-decoration: none;
}

#innavbox a:hover{
	color: #34498B;
	border-left: 5px solid #992A2A;
	background-color: #F2DDDD;
	text-decoration: none;
}

Ich hoffe ihr findet den Fehler oder könnt mir einen Tipp geben, wie ich das Anzeigeproblem beheben kann.

Grüße
ljungi

Gumbo · 27. August 2005

Probier mal Folgendes:

HTML:

<div id="links">
	<dl class="navbox">
		<dt><a href="#">Titel1</a></dt>
		<dd><a href="#">Hallo</a></dd>
		<dd><a href="#">Du</a></dd>
	</dl>
	<dl class="navbox">
		<dt><a href="#">Titel2</a></dt>
		<dd><a href="#">wir</a></dd>
		<dd><a href="#">ihr</a></dd>
	</dl>
</div>

Code:

dl.navbox {
	margin:				0;
	color:				#5176B5;
	background-color:		#F0F5FA;
	border-left:			1px solid #34498B;
}
dl.navbox dt a:link,
dl.navbox dt a:visited {
	color:				#5176B5;
	text-decoration:		none;
}
dl.navbox dt a:hover {
 	color:				#34498B;
 	text-decoration:		none;
}
dl.navbox dd {
	margin:				0 2px 0 5px;
}
dl.navbox dd a {
	display:			block;
}
* html dl.navbox dd a {
	width:				100%;
}
dl.navbox dd a:link,
dl.navbox dd a:visited {
	padding:			2px 0 2px 10px;
	font-weight:			bold;
	color:				#000;
	background-color:		#fff;
	border-left:			5px solid #5176B5;
	text-decoration:		none;
}
dl.navbox dd a:hover {
	color:				#34498B;
	border-color:			#992A2A;
	background-color:		#F2DDDD;
}

ljungi · 27. August 2005

Hallo,

danke für den Code.
Nun verstehe ich aber nicht, was an meinem Code alles "falsch" war. Würde das gerne noch erfahren, denn dadurch lern ich's ja erst.

Dass ich die id falsch angewendet habe weiß ich nun auch - die id ist einmalig und sollte nicht 2x im Code vorkommen.

Warum aber der Anzeigefehler?

Und was bedeutet in deinem Code der Teil:

Code:

* html dl.navbox dd a {
	width:100%;
}

* html ?

Danke schon mal!

Grüße
ljungi

son gohan · 27. August 2005

Hi, das * html ist ein CSS Hack mit dem du ausschließliche CSS Attribute für den IE Brwoser schreiben kannst. Alle anderen gängigen Browser schauen über Element welche ein * html vorgesetzt haben hinweg.

Also im Prinzip kannst du auch einfach nur ein * schreiben und das html weg lassen zur besseren Verständnis, weil es hie halt auf das Sternchen ankommt, welches dafür sorgt das nur der IE die darauf nachfolgenden CSS Attribute versteht und annimt. Es gibt auch manche Leute die schreiben einfach ein minus - vor solchen Elementen und erzeugen den gleichen Effekt das nur der IE die darauf folgenen Attribute versteht.

Es gibt auch noch viele andere CSS Hacks. Wenn du z.B. genau umgekehrt arbeiten willst, dann kannst du auch einfach einen Hack anwenden der nur von anderen gängigen Browser interpretiert wird ausser dem IE das würde z.B. so gehen, du schreibst vor jedem Element ein html>body dann lesen alle Brwoser ausser de IE die darauf folgenen Angaben.

So nun sollte dir etwas geholfen sein.

ljungi · 27. August 2005

Danke, nun bin ich ein wenig klüger

Ich habe das ganze noch weiter getrieben und stoße wieder auf meine Grenzen.

Wieder ist es der Internet Explorer der streikt (wer baut auch so nen quatsch zusammen...!)

Erklären ist schwer, schaut euch das Bild an und dann das vom Opera (FF zeigt das gleich wie der Opera an):

Hier der Quelltext... Danke noch mal für die Hilfe von oben, Gumbo

Die "umschließenden" divs sind "links" und "mitte".

Bitte auch beachten, dass der Abstand von 1% zwischen Links und Rechts beabsichtigt sind (wie beim Opera angezeigt).

HTML:

					<div id="links">
						<dl class="navbox">
						<dt><a href="#">Titel1</a></dt>
						<dd><a href="#">Hallo</a></dd>
						<dd><a href="#">Du</a></dd>
						</dl>
						<dl class="navbox">
						<dt><a href="#">Titel2</a></dt>
						<dd><a href="#">wir</a></dd>
						<dd><a href="#">ihr</a></dd>
						</dl>
						</div>
          </div>
          <div id="mitte">
						<div class="maintitle">Titel der Seite </div>
						<div class="mainsubtitle"><em>Hier steht der Untertitel</em></div>
			  		<br />
						<fieldset class="fieldset">
							<legend>Tabellentitel</legend><br /><a href="">Was geht maaan?</a>
						</fieldset>
						<br />
						<div class="intbl">
							<table cellspacing="1">
								<tr>
									<td colspan="2">Hallo</td>
								</tr>
								<tr>
									<td>tu das</td>
									<td>tu das</td>
								</tr>
							</table>
						</div>        	
          </div>
          <br style="clear:both;" />

Hier dann das CSS, eigentlich hatte ich extra schon links und mitte so gerechnet, dass nur 99% gesamt rauskommen. Ein Prozent soll ja dazwischen frei sein.

Die anderen Klassen hab ich nicht mit reingepackt. Ist ja nun auch nicht wichtig, da das ohne die ganzen Tabellen und div's nicht anders aussieht.

Code:

#links {
  width: 25%;
  float: left;
  border-left: 1px solid #072A66;
  border-right: 1px solid #072A66; 
  border-bottom: 1px solid #072A66;
  position: relative;
}
#mitte {
  width: 74%;
  float:right;
  border-left: 1px solid #072A66;
  border-right: 1px solid #072A66; 
  border-bottom: 1px solid #072A66;
  position: relative;
  background-color: #F0F5FA;
  display: block;
}

//UPDATE

Wenn ich das eben gelernte anwende

kommt folgender Code raus:

Code:

*html #mitte {
  width: 72%;
  float:right;
  border-left: 1px solid #072A66;
  border-right: 1px solid #072A66; 
  border-bottom: 1px solid #072A66;
  position: relative;
  background-color: #F0F5FA;
  display: block;
}

html>body #mitte {
  width: 74%;
  float:right;
  border-left: 1px solid #072A66;
  border-right: 1px solid #072A66; 
  border-bottom: 1px solid #072A66;
  position: relative;
  background-color: #F0F5FA;
  display: block;
}

So funktioniert es zwar, ist aber wie ich finde nicht gerade sehr galant. Geht das anders?

Grüße
ljungi

Gumbo · 27. August 2005

Also im Prinzip kannst du auch einfach nur ein * schreiben und das html weg lassen zur besseren Verständnis, weil es hie halt auf das Sternchen ankommt, welches dafür sorgt das nur der IE die darauf nachfolgenden CSS Attribute versteht und annimt.

Es kommt nicht nur auf den Universal-Selektor allein, sondern auf die Kombination aus dem Universal-Selektor und dem Element-Selektor für html-Elemente. Denn die Logik allein würde uns sagen, dass das html kein Eltern-Element besitzt. Die Syntax der * html-Kombination sagt jedoch aus, dass nachfolgende Eigenschaften auf alle html-Kind-Elemente greifen sollen, die ein beliebiges Eltern-Element haben.
Dies ist nur einer von wirklich vielen CSS-Hacks oder Filtern, um nur den Internet Explorer mit seinen Anomalien zu bedienen.

In deinem Fall wird dir wohl nichts anderes übrig bleiben als wieder einen CSS-Hack zu verwenden, denn leider interpretiert der Internet Explorer das Box-Modell anders als die meisten übrigen Browser, was schließlich zu dieser Fehldarstellung führt.

son gohan · 27. August 2005

Danke für die Korrektur Gumbo.

ljungi · 28. August 2005

Danke für eure Hilfe!

Wenn ich wieder wo hängen bleibe, werd ich mich wieder melden - aber vorerst klappt alles.

Bleibt nur zu hoffen, dass der IE 7 vernünftig interpretiert

Grüße
ljungi

Maik · 7. September 2005

ljungi hat gesagt.:
Danke für eure Hilfe!

Wenn ich wieder wo hängen bleibe, werd ich mich wieder melden - aber vorerst klappt alles.

Frage beantwortet? Problem gelöst? Dann markiere dein Thema bitte als "Erledigt"!

Thanx ;-]

✔ Mal wieder der Internet Explorer...

ljungi

Grünschnabel

Gumbo

Erfahrenes Mitglied

ljungi

Grünschnabel

son gohan

Erfahrenes Mitglied

ljungi

Grünschnabel

Gumbo

Erfahrenes Mitglied

son gohan

Erfahrenes Mitglied

ljungi

Grünschnabel

Maik

Neue Beiträge