CSS: IE vs. andere Browser

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_ie_vs_andere_browser_138308/page_1 - zur Vollversion wechseln!

DJ_Cyberdance schrieb am 07.03.2005 um 00:15

Daß der IE nicht zu den weltbesten Browsern gehört, ist hinlänglich bekannt, aber manches gibt mir schon ordentlich zu denken, wenn es um <div> geht:

1.)
DIV.topline {
position: absolute;
left: 250px;
top: 0px;
width: 1600px;
height: 3px;
color: #FF0000;
}

Das sollte eine rote Linie, 3px hoch, erzeugen. Funktioniert im Mozilla, im Firefox, in Opera. IE klotzt mir eine Linie hin, die 16px hoch ist. Sieht absolut bescheiden aus. Irgendeine Idee, wie ich dem besch******* IE klar mache, daß diese Linie bitte nur so hoch ist, wie ich es im CSS angebe?

2.)
DIV.boxcolor
{
background: #990000;
border-style: solid;
border-color: #660000;
border-width: 5px;
width: 30px;
}
Mozilla, Firefox und Opera machen diese Box 40px breit - Weil Breite sind 30px und zweimal Rand mit 5px sind insgesamt 40px. IE macht die Box 30px breit - und rechnet den Rand nach innen weg, also die Fläche innerhalb des Rahmens ist nur 20 px breit. Vorschläge, wie man dieses Verhalten angleichen kann?

that schrieb am 07.03.2005 um 00:22

http://msdn.microsoft.com/workshop/...comment_ovw.asp

Zitat
Conditional comments make it easy for developers to write pages that downgrade gracefully in less capable browsers, while making it easy to take advantage of the enhanced features and performance offered by Internet Explorer 5 and later versions.

MS hat zwar leichte Formulierungsprobleme mit der Begründung, aber was sie damit aussagen wollten ist, dass man mit diesem Mechanismus ganz hervorragend Workarounds für fehlerhaftes Verhalten des IE vor anderen Browsern verstecken kann.

watchout schrieb am 07.03.2005 um 00:40

1.) overflow:hidden (braucht keine cond. comments )

2.) da hätt' ich nur die idee 2 divs zu verschachteln und das innere mit der gewünschten breite OHNE jeglichen border zu machen

Für beides benötigt man keine cond. comments - aber that's post find' ich trotzdem top

DJ_Cyberdance schrieb am 07.03.2005 um 14:25

Danke für den TIp mit overflow:hidden, das funktioniert, nur is mir nicht klar, woher der Overflow in einem leeren div kommen soll... Naja egal.
In zweiterem Fall gings eher darum, daß ein div mit 5px-Border gleich breit sein sollte wie eines ohne - das hab ich schlußendlich mit

padding-left: 5px;
padding-right: 5px;

geschafft. Jetzt sind die DIVs zwar in den unterschiedlichen Browsern unterschiedlich breit, aber wenigstens sind die mit Rahmen gleich groß wie die ohne.

userohnenamen schrieb am 07.03.2005 um 15:02

machs mit 2 verschiedenen css files
so hab ich es des öfteren gelöst

und mittels JavaScript abfrage wähl ich dann aus welches css file er verwenden soll

Rektal schrieb am 07.03.2005 um 15:20

@userohnenamen: bad bad. Wenn fuer IE, auf alle Faelle ConditionalComments.

Das overflow kommt vermutlich von der line-height. Vom overflow abgesehen kannst du im IE die Hoehe eines Block-Elementes nicht kleiner machen als Zeilenhoehe (default gegeben durch die Textgroesse). D.h., wenn du height: 3px haben willst, muesstest du auch die line-height extra auf 3px setzen.

DJ_Cyberdance schrieb am 07.03.2005 um 17:07

Naja mittlerweile paßt das Layout in allen getesteten Browsern (Opera, IE, Firefox & Mozilla) halbwegs, Danke für eure Tips!

Hab zwar schon recht viel mit Stylesheets gearbeitet, aber eigentlich immer nur sehr grundlegende Dinge. Folgendes Problem hatte ich unlängst (Beispiel):

Ich hab zwei Arten von DIVs. Die einen haben roten, die anderen zB blauen Hintergrund. Links und Text in roten DIVs sind immer hellrot, Links und Text in blauen DIVs sind immer hellblau. Von mir aus sind Tabellen in roten DIVs mit Rand, im blauen ohne. Egal, es geht nur darum, daß gleiche Elemente unterschiedlich aussehen und das aussehen eigentlich nur von der DIV-Klasse abhängt.

Muß ich jetzt sowohl für DIV, P, TABLE als auch A eine eigene Klasse erstellen oder kann ich die Linkfarbe, Textfarbe, Tabellenlayout, ... irgendwie auch im DIV angeben?

Solche Dinge habe ich bis jetzt so gelöst:
DIV.blau {...}
A.blau {....}
P.blau {...}
TABLE.blau {...}

DIV.rot {...}
A.rot {....}
P.rot {...}
TABLE.rot {...}

was im XHTML-file dann etwa so aussieht:
<div class='rot'>
<a class='rot'>...
<table class='rot'>
<p class='rot'>
....
</div>
bzw. äquivalent für blau. Will sagen, ich muß jedem Element sagen, daß es zur Klasse rot gehört - obwohl das eigentlich eh klar ist, weils ja in einem DIV der Klasse rot drinsteht.
Ich denk mir, das muß auch einfacher gehen, aber wie gesagt, hab CSS immer sehr ausgiebig, aber auch nur in sehr einfacher Form verwendet.

flaimo schrieb am 07.03.2005 um 18:55

klassen- und id-namen sollte man immer benennen nach was sie sind, nicht wonach sie aussehen. wenn du bei einem redesign dann dei blaue farbe auf rot änderst in der klasse .blau kennt si kein schwein mehr aus.

siehe http://meyerweb.com/eric/thoughts/2...-classes-clean/

watchout schrieb am 07.03.2005 um 20:06

Zitat von Rektal
Das overflow kommt vermutlich von der line-height. Vom overflow abgesehen kannst du im IE die Hoehe eines Block-Elementes nicht kleiner machen als Zeilenhoehe (default gegeben durch die Textgroesse). D.h., wenn du height: 3px haben willst, muesstest du auch die line-height extra auf 3px setzen.

Das stimmt nicht ganz - das Problem sind nämlich die Leerzeichen, hast du ein absolut leeres Element wie <a href...></a> oder ein Element, wo zb. nur ein Bild mit ein PX höhe ABER ohne leerzeichen, also <div><img ... /></div> (nicht <div> <img .../></div>

dann kannst du das Element auch kleiner machen.
Das Problem ist nämlich dass der IE Leerzeichen als Text interpretiert, und zwar auch dann, wenn ein Element ausser Leerzeichen nichts anderes enthält.

ps: Mit Leerzeichen meine ich jetzt alleFormen von "Whitespace", also \n ,\r, \t, [blank],...

@DJ:
Nehmen wir an, du hast eine solche Struktur (jetzt unabhängig von Namenskonventionen):

Code:

<body>
 <div class="blau">
  <a href="1">Lnk1</a>
  <a href="2">Lnk2</a>
 </div>
 <div class="rot">
  <a href="1">Lnk1</a>
  <a href="2">Lnk2</a>
 </div>
</body>

so kannst du etwa alle links im "blauen" teil mit
.blau a { ... }
formatieren.
Wobei das " " auf alle Unterelemente zutrifft, also auch in einer <div><div><div><a></a></div></div></div> Form würde das a-Element nach deinen Angaben Formatiert

DJ_Cyberdance schrieb am 07.03.2005 um 23:37

Zitat von flaimo
klassen- und id-namen sollte man immer benennen nach was sie sind, nicht wonach sie aussehen. wenn du bei einem redesign dann dei blaue farbe auf rot änderst in der klasse .blau kennt si kein schwein mehr aus.

Vielen Dank für den Hinweis, mach ich auch immer so. Das war ja, wie mehrfach erwähnt, nur ein Beispiel und mir erschien diese Namensgebung fürs rasche Verständnis sinnvoller.

@ watchout: Danke für die Info!

Rektal schrieb am 10.03.2005 um 14:57

[QUOTE]Originally posted by watchout
[B]Das stimmt nicht ganz - das Problem sind nämlich die Leerzeichen [...]
Das Problem ist nämlich dass der IE Leerzeichen als Text interpretiert, und zwar auch dann, wenn ein Element ausser Leerzeichen nichts anderes enthält.[/qoute]
Danke fuer die Ausfuehrung, so ists viel verstaendlicher! lG