Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

IE6 benutzt nicht die angegebene Länge der <hr>

Antwort erstellen

IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon Tortix » 09.08.2010, 12:08

Hallo zusammen,

bin neu hier, ich hoffe ich beachte alle Förmlichkeiten! ;)

Mein Problem ist folgendes:
Wir sollen für die Schule zur HTML / CSS Übung eine kleine Bewerbungshomepage erstellen. Meine Grundseite steht größtenteils und jetzt machen Kleinigkeiten Probleme.

Ich habe den Inhalt mit zwei Horizontalen Linien oben und unten vom Rest getrennt. Im Firefox funktioniert das auch, nur im IE 6 (soll in diesem Browser ebenfalls funktionieren besagt die Aufgabe) macht er die Linien zu kurz und ich weiß nicht warum.

Außerdem habe ich erstmal bei allen Elementen die margin und das padding auf 0 gesetzt, was der IE ebenfalls ignoriert.

Hier der Screenshot vom Firefox: http://img834.imageshack.us/i/firefoxi.jpg/
Hier der Screenshot vom IE6: http://img525.imageshack.us/i/ie6q.jpg/

Und hier entsprechende Quelltextauszug:

Code: Alles auswählen
<hr class="linieObenBlau" /> 
<hr class="linieObenOrange" />

<div id="hauptteil">
.
.
.
</div>

<hr class="linieUntenOrange" />
<hr class="linieUntenBlau" />


Code: Alles auswählen
*
{ margin: 0px; padding: 0px; }

.linieObenBlau
{ color: blue; width: 92%; margin-left: 0px; text-align: left; }

.linieObenOrange
{ color: orange; width: 70%; margin-left: 0px; text-align: left; }

.linieUntenOrange
{ color: orange; width: 70%; margin-left: 30%; margin-top: 100px; text-align: right; }

.linieUntenBlau
{ color: blue; width: 92%; margin-left: 8%; text-align: right; }


Scheinbar liegt es bei den unteren Linien an dem "margin-left", aber wenn ich mit "margin-right: 0px" arbeite, macht er es im IE6, aber nicht im Firefox^^

Bin etwas überfordert mit dem Problem, danke schonmal für Hilfen!
Tortix
neu hier
 
Beiträge: 4
Registriert: 09.08.2010, 11:51
Nach oben

Re: IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon sejuma » 09.08.2010, 12:42

Ich habe keinen IE 6 mehr zum Testen.
Welchen Doctype verwendest du denn?
Versuche es gf. mal mit diesem:
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jedenfalls darfst du mit dem falschen Doctype den IE nicht in Quirsmode schicken, sonnst stellt er das CSS-Boxmodell und damit auch die Breiten falsch dar.

Definiere auch mal
Code: Alles auswählen
html, body {width: 100%;}
, damit die prozentualen Angaben einen Bezugspunkt haben.
Bild
sejuma
Vielposter
 
Beiträge: 788
Registriert: 15.07.2009, 17:46
Nach oben

Re: IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon Tortix » 09.08.2010, 13:04

Danke für die Antwort...
Hat aber beides nix geändert :(

Ich verwende folgenden Doctype:
<!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" xml:lang="de" lang="de">
Tortix
neu hier
 
Beiträge: 4
Registriert: 09.08.2010, 11:51
Nach oben

Re: IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon Azra » 09.08.2010, 13:34

Gibt es einen Grund, warum du für IE6 optimierst?
Wenn diese Seite als Bewerbungsstütze bei einer Agentur für Mediengestaltung dient ist es ziemlich unsinnig, da diese wohl die neusten Browserversionen (IE8) nutzt.
Außerdem können sie nicht von dir erwarten, dass du alle Bugs in Browsern fixen kannst.
Eine Optimierung ist also eher von der Zielgruppe abhängig.

Wir haben hier ebenfalls keinen IE6 mehr, also fällt mir soweit auch nichts dazu ein.


Weiterer Beitrag folgt...
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum
Nach oben

Re: IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon Tortix » 09.08.2010, 13:49

Wie gesagt, es ist nur eine Aufgabe / Projekt für die Schule, die folgenden Punkt beeinhaltet:

"Vorraussetzungen:
- Projekt ist mindestens für den Firefox 3.x und IE ab 6.x – 8.x getestet"

Und ich will nicht so gern weg von den Linien, da sie meiner Meinung nach für mein schlichtes Design wichtig sind =)
Tortix
neu hier
 
Beiträge: 4
Registriert: 09.08.2010, 11:51
Nach oben

Re: IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon Azra » 09.08.2010, 13:58

Ach, da habe ich zu flüchtig gelesen.
Ich versuche zwischendurch irgendwo eine Lösung zu finden, keiner geht hier vergessen :wink:

Spontan fallen mir 2 Methoden ein, das selbe Ergebnis zu erzielen:
- Ein Bild mit den gewünschten Linien erstellen und einbinden.
- 2 <div>-Container mit gewünschter Höhe und Breite sowie Hintergrundfarbe untereinander platzieren

Aber naja. :|
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum
Nach oben

Re: IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon Azra » 09.08.2010, 14:14

Das Problem ist wohl, dass der Internet Explorer das <hr> als Inline Element sieht.
Die restlichen Browser sehen es als Block Element.

Was du also tun kannst:

Code: Alles auswählen
/* Für Internet Explorer */
hr {
   text-align: right;
   width: 30%;
   height: 2px;
   color: #F00;
   border: none;
}

/* Für Opera und Gecko-basierende Browser */
html>body hr {
   margin-right: 0;
   width: 30%;
   height: 2px;
   background-color: #F00;
   border: 0px solid #F00;
}


Ob es was nutzt, sei dahin gestellt :roll:
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum
Nach oben

Re: IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon Tortix » 09.08.2010, 14:29

Hey super danke!

Funktioniert, wäre nur klasse, wenn du mir das mit dem " html > body hr " nochmal erklärst... Ich verstehe nicht ganz, warum das vom Firefox interpretiert wird und der IE die normalen Klassen / hr Selektoren interpretiert.

Aber echt danke für die Hilfe :)
Tortix
neu hier
 
Beiträge: 4
Registriert: 09.08.2010, 11:51
Nach oben

Re: IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon Azra » 09.08.2010, 14:42

...warum...

Ist so weil ist so :|
Willkommen in der bunten fröhlichen Welt von CSS :flucht:

...ich habe selber gerade die Ausbildung zum Mediengestalter angefangen
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum
Nach oben

Re: IE6 benutzt nicht die angegebene Länge der <hr>

Beitragvon sejuma » 09.08.2010, 15:24

Der IE 6 erfordert offensichtlich aufgrund eines Bugs, dass du hr als Blockelement definierst. Er hält sich insofern nicht an die vorgegebenen Konventionen.

Damit er dies donnoch tut, kannst du definieren:

Code: Alles auswählen
hr {display: block;}

Das ist für die standardkonformen Browser dann zwar doppelt gemoppelt und deshalb unnötig, schadet aber nichts und ist insofern der einfachste Weg.

Der zweite Weg ist eine sogenannte "Browserweiche" wie von Azra vorgeschlagen.
Ich kenne sie für den IE 6 indem man vor das Element, den ID oder die Klasse ein *html setzt.
In diesem Falle also
Code: Alles auswählen
*html hr {display: block;}

Das kann dann nur der IE 6 interpretieren; von anderen Browsern wird es ignoriert.

In deinem Fall könnte ferner auch folgendes nützen, hab's jedoch nicht getestet:

Code: Alles auswählen
.linieObenBlau
{ color: blue; width: 92%;  float: left; }

.linieObenOrange
{ color: orange; width: 70%; float: left; }

.linieUntenOrange
{ color: orange; width: 70%;  margin-top: 100px; float: right; }

.linieUntenBlau
{ color: blue; width: 92%; float: right; }


Durch die Float-Angabe werden Inline-elemente zu Blockelementen, so dass das o.g. display: block; überflüssig wird.

nach den hr's solltest du jedoch clearen, z.B. mit
Code: Alles auswählen
<div style="clear: both;"><!--Clear-Div--></div>

oder (besser) über das jeweils folgende Element.
Bild
sejuma
Vielposter
 
Beiträge: 788
Registriert: 15.07.2009, 17:46
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "IE6 benutzt nicht die angegebene Länge der <hr>"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: Google [Bot] und 2 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de