• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

IE sucks...<hr />

dkdenz

dkdenz

New member
Wer kann mir mal bitte erklären, warum NUR der IE das nicht macht?
:mad:
Sinn des ganzen: ein hr-Fake,
weil die Formatierung einer horizontalen Linie viel zu unkompatibel ist...

Code: 
div.linie {
             position:relative;
             padding:0px;
             margin:0px;
             width:75%;
             height:1px;
             background:#b7ab00;
             border:0px;
             }

5 Browser stellen das korrekt dar.
Der IE zeigt mir ein etwa 10-12 Pixel hohes Etwas an...
 
naja ich weiß nicht ob das was damit zu tun hat aber ich hatte gestern das problem das der IE mir nach meinem
</form> tag immer ungefähr 50px platz nach unten geschoben hat...
ich hab das problem nicht lösen können!!! hab das </form> tag einfach soweit verschoben das man es nicht mehr gesehen hat.
Vielleciht ist es bei dir auch so??!!
könnte ja sein nicht ;)
zur überschrift..
hat da je einer dran gezweifelt ^^

Hellsing
 
Gelöst!
Habe noch ein font-size:1px; reingeschrieben,
nun geht's mit dem einen Manko,
das im IE die 'Linie' nun 2 Pixel hat.
Aber damit kann ich erstmal leben...

@HsF_Hellsing:
Du musst in Dein Form-Tag einfach display:inline reinschreiben...
 
Danke ZeitGeist.
Die Idee hatte ich dann auch...

Code: 
.linie {
        padding:0px;
        margin:0px;
        width:75%;
        height:1px;
        background:#b7ab00;
        border:0px;
        font-size:1px;
        }
 
Zuletzt bearbeitet:
Trotzdem danke für den Tipp.
Wenn Du jetzt noch wüsstest wie ich aus den 2 Pixeln einen mache... :)
 
Danke Nodgeil. :D

overflow:hidden hat geholfen...

Code: 
.linie {
        padding:0px;
        margin:0px;
        width:75%;
        height:1px;
        background:#b7ab00;
        border:0px;
        overflow:hidden;
        }

Eigentlich logisch, so im Nachhinein gesehen... :rolleyes:
 
Zuletzt bearbeitet:
Ich wüßte es auf normalem Wege nicht, aber ich würde anstatt der font-size dem div ein <img src="blind.gif" width="1" height="1" border="0"> als Inhalt geben und dir Recht mit deiner Überschrift.
 
finde deine Lösung auch besser :)
[edit: aber nun kannst du dir auch font-size sparen.
 
Zuletzt bearbeitet:
und was ist mit <hr /> ?
da brauchts kein overflow beim IE, aber dafür ein text-align:left


Code: 
<style type="text/css">
        hr.linie {
             position:relative;
             padding:0px;
             margin:0px;
             width:75%;
             height:1px;
             background:#b7ab00;
             border:0px;
             text-align:left;
             }

</style>
</head>
<body>
<hr class="linie" />
</body>

edit: korrigierte Version:
Code: 
<style type="text/css">
        hr.linie {
             position:relative;
             padding:0px;
             margin:0px;
             height:1px;
             color:#b7ab00;
             border:0px;
             }

</style>
</head>
<body>
<hr class="linie" />
</body>
 
Zuletzt bearbeitet:
Mh.
Also ich finds etwas verkorgst, aber das ist ja bei mir normal.
Font-Size stimmt und dazu noch Line-Height auf 0px gesetzt und das Ganze läuft rund.
Aber mal ehrlich, würde es ein border-top nicht auch tun?
Und immer diese Prozentangabe, ... *arg.
Das einziege wohin ein größer werdener Text verschwinden sollte ist doch nach unten, wozu also dann width mit Prozentangaben? Zu mal Blockelemente von hause aus sich der Umgebung anpassen, sprich sie haben immer 100%.

div.line {
font-size:1px;
line-height:0px;
height:1px;
border-top:1px solid #b7ab00;
}

Was natürlich noch viel mehr kompatibler und einfacher wäre, wäre ein Background-Image, welches die Linie gekachelt erzeugt.
Aber egal.

Grüße Robert
 
Zu bines Beispiel:
klappt soweit, nimmt aber die Farbe nicht an...

Zu womstars Beispiel:
da geht gar nix. Keine Linie zu sehen...
Offenbar ist das Beispiel ungetestet.
Wieso sollten Blockelemente 100% haben?
Die machen das, was man ihnen sagt, also auch 75%...
Zudem kann man ein Blockelement auf inline stellen.
Und was das Pic angeht, ist das ansich ja eine gute Idee,
aber da kann ich gleich ein Pic nehmen und die Werte angeben,
das muss ich nicht extra als BG-Pic in ein div packen.

(Ich habe beide Beispiele nur im FF und IE gecheckt...)

So funktioniert es genau wie ich es wollte:
Code: 
.linie {
        padding:0px;
        margin:0px;
        width:75%;
        height:1px;
        background:#b7ab00;
        border:0px;
        overflow:hidden;
        }

Ist ja letztendlich aber auch egal, ich habe nur versucht,
eine Alternative zum schwer formatierbaren hr-Element zu testen.
Dies ist natürlich alles andere als korrekt,
denn dazu ist ein div einfach nicht gedacht...

Man kann ja hier mal gucken,
wie man sich verrenken muss,
wenn man das hr formatieren will...
http://www.css-technik.de/details/133/9/CSS-Snippets.htm
http://www.css4you.de/trickkiste/tr00007.html
 
Zuletzt bearbeitet:
Mh.
Dann hast Du wirklich was falsch gemacht, denn das hier:

Code: 
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">
<head>

<title>/</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style>
div.line {
font-size:1px;
line-height:0px;
height:1px;
border-top:1px solid #b7ab00;
}
</style>
</head>
<body>
<div class="line"></div>
</body>
</html>

Funktioniert im IE4-6, NS6-7, Mozilla, Firefox und Opera4-7. Und wie schon oft gesagt, ich setze nichts ins Forum was nicht funktioniert.

Das ein Blockelement sich immer von der Breite her der Umgebung anpasst solltest Du aber schon mal gemerkt haben.

<div style="border:1px solid #000"></div>

Das DIV wäre hier so breit, wie es seine Umgebung zulässt. Und wozu auf Inline? Damit man wieder ein <br /> einfügen kann?

Und ich denke das darin ein großer Unterschied besteht, ob man ein Tag gesetztes Bild nimmt oder einem DIV ein Hintergrundbild verpasst. Denn Text-Browser würde dann an der Stelle den Alt-Text anzeigen, was gut und gerne zu Verwirrungen beim Lesen führen kann. Mit einem DIV hat ein Text-Browser keine Probleme.

Wenn man dann in dieses Linien-DIV noch ein HR setzt, werden in Text-Browser wunderbar die Inhalte durch Linien getrennt.
Sprich so:
<div class="line"><hr style="display:none;visibility:hidden;" /></div>


Aber ich glaub ich rede mich um Kopf und Kragen, Du machst es ja eh wie Du möchtest, was mir recht ist. :)
 
dkdenz schrieb:
Zu womstars Beispiel:
da geht gar nix. Keine Linie zu sehen...
Zum Vergrößern anklicken....
Dann habe ich wohl was falsch gemacht.
Jedenfalls war nix zu sehen...

Dein Bsp. funktioniert, mein Bsp. funktioniert...


Trotzdem nochmals das:
dkdenz schrieb:
Ist ja letztendlich aber auch egal, ich habe nur versucht,
eine Alternative zum schwer formatierbaren hr-Element zu testen.
Dies ist natürlich alles andere als korrekt,
denn dazu ist ein div einfach nicht gedacht...
Zum Vergrößern anklicken....

Was noch viel schlimmer ist: der olle Maxe ist tot... :(
 
Zuletzt bearbeitet:
Hallöchen, wie ich sehe ist es hier noch ein bisschen weitergegangen.
Na jut, dann klugscheißer ich nochmal was hinterher :D

Pardon für den Fehler mit der Farbe. Ein hr-tag wird mit color: gefärbt anstatt mit background. (War mir nicht aufgefallen, weil ich den Farbcode geprüft habe welche Farbe der Code ergeben sollte.)

Und schwer formatierbar ist es wie womstar schon meinte insofern eigentlich nicht, weil es sich als Block-Element dem äußeren Element angleicht. Deshalb kann man sich die width-Angabe auch ganz sparen.
Schließlich ist die hr immer irgendwo drin. Entweder im body oder im bereits formatierten Layout.
Und weil man sich dann auch jegliches align sparen kann ist hr wohl der kürzeste Weg.


Die Version mit dem border geht auch, bin jedoch weiterhin von der Verwendung von hr überzeugt, weil der Code doch letztendlich am kürzesten ist.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben