CSS Boxen und der IE...

SerivaSenkalora · 07.09.2010

Hallo zusammen,

ich habe mir ein schlichtes "Template" zusammengebaut. Es sitzt auch alles da wo es sein soll, nur im IE mal wieder nicht...

Es geht um diese Seite:

CSS:

Die Links auf der Seite funktionieren alle nicht, da ich die anderen Seiten nicht hochgeladen habe.

IE User werden sofort sehen (alternativ: ), dass der #content div sich um eine Menülänge nach unten verschiebt und sich dadurch der Hintergrund der alles umgebenden #alles div unschön hervordrängt. Den #content div krieg ich einfach nicht wieder nach oben. Alle anderen Browser machen das richtig. Nebenbei soll das rechte Bild über der Tabelle sein (machen auch alle anderen Browser richtig)... Zusätzlich schneidet der IE mir die Hintergrundbilder meiner Menüpunkte unten ab...

Könnt ihr mir helfen die CSS so umzuschreiben, dass alle Browser sie verstehen? Es ist immer nur der dämliche IE, der nichts versteht, Safari, Firefox und Opera stellen die Seite wie gewünscht dar. Ich habe zwar schon über sog. Browserweichen gelesen, allerdings muss ich gestehen, dass ich da nicht so ganz durchsteige.

Bei meiner derzeitigen HP (s. Signatur) klappt aber doch auch alles wie es soll, deswegen finde ich grad auch nicht die Stelle über die der IE stolpern könnte.

Schonmal Danke für's Lesen. ^^

Und wo ich gerade dabei bin:
Meldungen über sonstige Auffälligkeiten oder auch einfach nur eure Meinung sind ebenfalls erwünscht. ^^

LG
Seriva

PS: Ja, die Meta-Tags im Header fehlen noch, die werde ich noch ergänzen. ^^

sokie · 08.09.2010

AW: CSS Boxen und der IE...

leider führt dein link zur Seite ins leere (http-404)

SerivaSenkalora · 08.09.2010

AW: CSS Boxen und der IE...

Ja, wenn man seine Links nicht nochmal prüft, dann passiert sowas schonmal. ^^
Jetzt geht es.

LG
Seriva

mwxx · 08.09.2010

AW: CSS Boxen und der IE...

Hallo Seriva,

ich vermute auf den ersten Blick, dass der Hirni-IE daran scheitert, dass Du nicht alle DIV-Container gefloated hast und am Ende die Floats nicht sauber clearst (mit clear: both; innerhalb des targenden Containers). Damit kommt dieser komische Browser nämlich nicht klar.
Ansonsten für eine elgante, codearme CSS-Browserweiche google doch mal nach "Conditional Comments".

Viel Erfolg mwxx

PS: Gefällt mir gut, die Schlange, die ins Bild lugt ( :cool:

Landorien · 08.09.2010

AW: CSS Boxen und der IE...

Hallo.

du hast mehrere fehler in deinen Code. Zum einem benutzt du Tabellen zum auszeichnen deines Inhaltes und zu anderen positionierst du frei irgendwelche Elemente. Ebenso zerschneidest du bilder (Anscheinen mit Photoshop gesliced?) die zusammenhängend sind. Würdest du deinen Bildern einen "alt" Text geben, müsstet du wohl "das ist der körper der schlange" und "das ist der abgeschnittene kopf der schlange" schreiben.

Bilder die Inhalt haben werden mit Hilfe des img-Tags eingebunden. Bilder die zu Stylezwecken sind werden per CSS background eingebunden.

So sollte es browserübergreifend gehen:

HTML:

<!DOCTYPE html>
<html><head>

<title>test</title>

<style type="text/css">
* { margin:0; padding:0; }
html { height:100.5%; font: 100.01%/1.4em arial, sans-serif; color: #000; background:#fff; }
body { font-size:1em; width:800px; height:auto; margin:0 auto; background:#fff; }

#header { height:200px; position:relative; z-index:2; border:1px solid;}
#sidebar,#main  { margin:-75px 0 0; float:left; height:500px; }

#sidebar { width:25%; background:#ccc; }
#main { width:75%; background:#666; }
</style>
</head><body>

<div id="header"></div>
<div id="sidebar"></div>
<div id="main"></div>

</body></html>

Die height bei #sidebar und #main muss natürlich nach belieben angepasst werden. Ebenso die Breiten.

Gruß
Lando

MrAzrael · 08.09.2010

AW: CSS Boxen und der IE...

Explorer Exposed!

erklärt eigentlich alle BUGs des IE ab Version 5.5 bzgl. CSS so das auch Anfänger sie verstehen und man von vorn herein im CSS entgegen wirken kann

Vielleicht nimmt ein Mod den Link ja in die Linkliste der Hilfreichen Seiten mit auf

SerivaSenkalora · 08.09.2010

AW: CSS Boxen und der IE...

Hallo,

die Tabelle "table.aussen" werde ich bezeiten noch durch einen div ersetzen, die ist noch ein Fragment von den ersten Versuchen. ^^

Ich habe eine vermeintliche Lösung gefunden, könnt ihr die bitte mal testen? Ich habe nur IE 7, da ich den nie benutze ausser für sowas. ^^

Habe die Dokumenttypdeklaration ausgetauscht und mein IE kann mir die Seite nun fast korrekt anzeigen. Fast, weil das Bild oben rechts immer noch unter dem Hintergrund von table.aussen verschwindet.

Ausserdem ist der IE schneckenlangsam bei der Darstellung - ist das nur bei mir so? Das vermeintliche AktiveX Element was der da angeblich blockt ist gar nicht vorhanden (hab den Quelltext ja sebst komplett händisch verfasst und nichts derartiges reingeschrieben...).

Statt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Nehme ich jetzt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

LG
Seriva

Landorien · 08.09.2010

AW: CSS Boxen und der IE...

SerivaSenkalora schrieb:
die Tabelle "table.aussen" werde ich bezeiten noch durch einen div ersetzen, die ist noch ein Fragment von den ersten Versuchen. ^^

nichtnur diese Tabelle ist überflüssig..und ob du jetzt alles mit div-Tags machst oder mit table-Tags, da ist kein unterschied, beides ist nonsense.

Ausserdem ist der IE schneckenlangsam bei der Darstellung - ist das nur bei mir so?

Der Internet-Explorer sind ziemlich langsam bei Seiten parsen ebenso wie bei Seiten zeichnen. Ist eben schön etwas in die Jahre gekommen.

Zwar läuft die Seite im Standardkonformer Modus, aber man sollte immer die dtd. übergeben und den Modus (Strict, Transitional, Frameset, ...) angaben. Lediglich bei dem HTML56 Doctype fällt das weg.

Auf meine anderen aufgelisteten Anmerkungen bist du anscheinend garnicht eingangen, schade.

Gruß
Lando

zome · 08.09.2010

AW: CSS Boxen und der IE...

Hallo SerivaSenkalora,

setz das einmal in deinem CSS ein:

#content
{
background-image:url("design/bgmain.gif");
float:left;
margin-left:0;
margin-right:0;
padding-bottom:25px;
text-align:justify;
width:832px;

}

also das margin nach links weg - und nach links floaten lassen.
Ich würde in diesem Fall sogar behaupten dass der IE es richtig darstellt,
da ja rechts durch dein margin-left kein Platz mehr ist um dein #Content in derselben Zeile darzustellen -> also springt das Teil in die "nächste" Zeile.

Viel Glück

SerivaSenkalora · 08.09.2010

AW: CSS Boxen und der IE...

@Landorien
Ohne die Rahmen läuft es mir aus dem Ruder und es sieht nicht so aus wie es soll. Div oder Table, eins von beiden brauche ich dafür.

Und das Bild musste ich zerschneiden da es über zwei divs hinwegreicht, wie sollte ich das sonst anders machen?

Welche freien Elemente Du meinst weiß ich auch nicht, sorry.

Zu guter Letzt: Ich benutze eigentlich einen Validator um meine Eingaben zu prüfen. Ich mache das noch nicht so lange und bin immer froh, wenn da ein grünes Häkchen erscheint und es so aussieht wie es soll. ^^

@zome
Ich habe nie vorher mit float gearbeitet, deswegen komme ich damit noch nicht so ganz klar, mein altes design ist ziemlich starr und eben das gefiel mir ja nichtmehr. ^^

Aber bei 1000px Breite müssten 832 und 168 doch nebeneinander passen?

LG
Seriva

Landorien · 09.09.2010

AW: CSS Boxen und der IE...

SerivaSenkalora schrieb:
@Landorien
Ohne die Rahmen läuft es mir aus dem Ruder und es sieht nicht so aus wie es soll. Div oder Table, eins von beiden brauche ich dafür.

table-Tag wird verwendet um tabellarische Daten auszuzeichnen. Div-Tag wird verwendet um mehrere Elemente zu gruppieren.

Und das Bild musste ich zerschneiden da es über zwei divs hinwegreicht, wie sollte ich das sonst anders machen?

siehe hier:
z-index ist das zauberwort.

Zu guter Letzt: Ich benutze eigentlich einen Validator um meine Eingaben zu prüfen. Ich mache das noch nicht so lange und bin immer froh, wenn da ein grünes Häkchen erscheint und es so aussieht wie es soll. ^^

Ein Validator ist eine Maschine die Anhand des Doctypes abgleicht, ob du deine Elemente "wellformed" einsetzt. Darunter fallen z.B. "sind alle Tags, die geöffnet sind geschlossen" oder "Ist innerhalb des Tags X das Tag Y überhaupt erlaubt?".
Letzenendes kann der Validator nicht überprüfen, ob du deinen Inhalt semantisch und schematisch korrket ausgezeichnet hast. Ebensowenig kann er dir etwas richtig anzeigen, was nicht in deren Prüfalgorithumus eingepflegt ist (Stichwort MathML, SVG, HTML5-Tags, WAI-ARIA, ....).

HTML:

<!-- valide aber falsch: -->
<table summary="schwachsinnige tabelle">
 <tr>
    <td>Überschrift</td>
 </tr>
</table>

<!-- valide aber falsch: -->
<div id="ueberschrift">Überschrift</div>

<!-- valide aber falsch: -->
<div id="x"><div class="y"><div id="z"><div class="y"><div style="padding:2px;"><div id="huhu">hallo</div></div></div></div></div></div>

Aber bei 1000px Breite müssten 832 und 168 doch nebeneinander passen?

wenn du den selbigen Containern kein padding und margin gibst und dadurch dann die tatsächliche Breite viel größer ist.

Gruß
Lando

freejay · 09.09.2010

AW: CSS Boxen und der IE...

Div-Tag wird verwendet um mehrere Elemente zu gruppieren.

Ein div-Tag ist deutlich vielseitiger und wird nicht nur zum gruppieren von Elementen verwendet, sondern bietet noch viel zahlreichere Möglichkeiten. Das Gruppieren von Elementen ist eine von vielen Verwendungszwecke von divs.

wenn du den selbigen Containern kein padding und margin gibst und dadurch dann die tatsächliche Breite viel größer ist.

Ergänzung: Auch ein Border wird, je nach Browser, zur Breite dazu addiert.

zome · 09.09.2010

AW: CSS Boxen und der IE...

Ola - hast Du meinen CSS Code schon einmal ausprobiert?
Thereotisch sollte alles reinpassen, ich hab`mir deinen CSS Code aber einmal angeschaut. Und wie ich bei meiner letzten Antwort schon geschrieben hatte, da hast du bei Deinem Content Div einen Abstand nach links --> den rausnehmen und das Element auch nach links floaten lassen, ok?

Landorien · 09.09.2010

AW: CSS Boxen und der IE...

freejay schrieb:
Ein div-Tag ist deutlich vielseitiger und wird nicht nur zum gruppieren von Elementen verwendet, sondern bietet noch viel zahlreichere Möglichkeiten. Das Gruppieren von Elementen ist eine von vielen Verwendungszwecke von divs.

Aha und z.B. zu was?

Ergänzung: Auch ein Border wird, je nach Browser, zur Breite dazu addiert.

Jein! Wenn sich der IE z.B. im Quirks-Modus befindet wird der Border nicht mit dazu gerechnet, sondern ist in der angegebenen width beinhaltet.

SerivaSenkalora · 09.09.2010

AW: CSS Boxen und der IE...

Das float:left funktioniert. Da kann ich jetzt sogar wieder brav die alte (komplette) Deklaration einsetzen. Dass ich auf sowas einfaches nicht gekommen bin. *schäm* Danke. ^^ Bin leider nicht jeden Tag online, konnte deshalb die Änderung nicht sofort umsetzen.

So, wie also soll ich die Inhalte nun ordentlich untereinander reihen ohne ein div oder eine table zu benutzen??? Ich habe keine andere Möglichkeit gefunden um den Text genau SO zu verteilen.

Und was ein z-index ist werde ich dann wohl mal nachlesen, da ich nicht weiß was genau dieser bewirken soll.

LG
Seriva