SELFHTML Forum
SELFHTML Forumsarchiv
2007
März
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: Stefan Richter, 30. 03. 2007, 22:37
Hallo,
bin gerade wieder einmal auf ein kleines Problem im Zusammenspiel von CSS und dem Internet Explorer gestoßen...
Ich habe ein DIV Element, welchem ich die CSS Eigenschaft overflow: hidden gebe. D.h., wenn das Element bspw. 200px hoch, aber dessen Inhalt größer ist, so wird der Inhalt nach 200px abgeschnitten...
In Firefox, Opera und allen (nicht IE) Browsern funktioniert dies auch einwandfrei... nur im Internet Explorer (6.x und 7.x) wird anscheinend overflow: hidden komplett ignoriert!?
Ich könnte nun bspw. um den DIV einen weiteren legen, mit einer Hintergrundfarbe, und diesem einen höheren z-index verpassen, so dass der darüberliegende Inhalt einfach überdeckt wird... dies ist aber für meine Umsetzung als Kontextmenü nicht erwünscht, da der DIV und dessen Inhalt halbtransparent erscheinen soll... und es daher unbedingt notwendig ist, dass der Inhalt bei Überschreitung der 200px Grenze ausgeblendet wird.
Wäre echt nett, wenn ihr mir einen Tipp geben könntet...
Hier noch die komplette Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
HTML, BODY {
}
#cSub {
width: 160px;
height: 200px;
border: solid 1px #000000;
}
#cSub #main {
height: 100%;
overflow: hidden;
}
UL {
position: relative;
top: 0px;
width: 160px;
list-style: none;
margin: 0px;
padding: 0px;
}
UL LI {
border: solid 1px #000000;
}
</STYLE>
<SCRIPT type="text/javascript">
var cMenuTimer = null;
function startScroll(n) {
if (!cMenuTimer) cMenuTimer = setInterval("scroll(" + (n == 'down' ? true : false) + ")", 50)
}
function stopScroll() {
if (cMenuTimer) { clearInterval(cMenuTimer); cMenuTimer = null }
}
function scroll(n) {
with (document.getElementById("menu")) {
var iTop = parseInt(style.top);
if (!iTop) iTop = 0;
iTop = iTop + (n ? -5 : 5);
if (iTop > 0) iTop = 0;
else if (iTop < -offsetHeight + 200) iTop = -offsetHeight + 200;
style.top = iTop + "px"
}
}
</SCRIPT>
</HEAD>
<BODY>
<P>
<A href="javascript:void(0)" onmousedown="startScroll('up')" onmouseup="stopScroll()">up</A>
<A href="javascript:void(0)" onmousedown="startScroll('down')" onmouseup="stopScroll()">down</A>
</P>
<DIV id=cSub>
<DIV id=main>
<UL id=menu>
<LI>Test 1</LI>
<LI>Test 2</LI>
<LI>Test 3</LI>
<LI>Test 4</LI>
<LI>Test 5</LI>
<LI>Test 6</LI>
<LI>Test 7</LI>
<LI>Test 8</LI>
<LI>Test 9</LI>
<LI>Test 10</LI>
<LI>Test 11</LI>
<LI>Test 12</LI>
</UL>
</DIV>
</DIV>
</BODY>
</HTML>
Grüße
Die folgende Nachricht zum Thema stammt von: Cheatah, 30. 03. 2007, 22:42
Hi,
»» Ich habe ein DIV Element, welchem ich die CSS Eigenschaft overflow: hidden gebe. D.h., wenn das Element bspw. 200px hoch, aber dessen Inhalt größer ist, so wird der Inhalt nach 200px abgeschnitten...
richtig.
»» In Firefox, Opera und allen (nicht IE) Browsern funktioniert dies auch einwandfrei... nur im Internet Explorer (6.x und 7.x) wird anscheinend overflow: hidden komplett ignoriert!?
Sicher? Du hast recht treffend erklärt, was der overflow-Fall ist: Er hängt von der Größe des Elements ab. Wie groß ist aber das Element?
»» Hier noch die komplette Datei:
»» <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Die Seite befindet sich im Quirks-Mode. Verlasse diesen unbedingt.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
Die folgende Nachricht zum Thema stammt von: Stefan Richter, 30. 03. 2007, 22:46
»» Sicher? Du hast recht treffend erklärt, was der overflow-Fall ist: Er hängt von der Größe des Elements ab. Wie groß ist aber das Element?
Das Element ist 200px hoch:
#cSub {
width: 160px;
-->> height: 200px;
border: solid 1px #000000;
}
»» Die Seite befindet sich im Quirks-Mode. Verlasse diesen unbedingt.
Habe es gerade bemerkt... wenn ich den DocType weglassen, dann funktioniert es auch im IE... warum? Wenn ich aber nun den DocType weglasse wird der Rest der Seite im IE nicht mehr korrekt dargestellt, weil er ja dann macht was er will...
Grüße
Die folgende Nachricht zum Thema stammt von: Cheatah, 30. 03. 2007, 22:52
Hi,
»» Das Element ist 200px hoch:
nicht raten. Prüfen.
»» #cSub {
»» width: 160px;
»» -->> height: 200px;
»» border: solid 1px #000000;
»» }
Dieses Element ist außerdem uninteressant, hat es doch overflow:visible gesetzt.
»» »» Die Seite befindet sich im Quirks-Mode. Verlasse diesen unbedingt.
»» Habe es gerade bemerkt... wenn ich den DocType weglassen, dann funktioniert es auch im IE... warum?
Keine Ahnung. Dadurch sollte er ebenfalls im Quirks-Mode sein. Oder habe ich die DOCTYPEs gerade falsch im Kopf und er war vorher Standards-Compliant (bzw. das, was Microsoft dafür hält)?
»» Wenn ich aber nun den DocType weglasse wird der Rest der Seite im IE nicht mehr korrekt dargestellt, weil er ja dann macht was er will...
Richtig. Also zurück zum Anfang:
Nicht raten. Prüfen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
Die folgende Nachricht zum Thema stammt von: Stefan Richter, 30. 03. 2007, 23:00
»» nicht raten. Prüfen.
Das Element ist 200px hoch!! So habe ich es jedenfalls angegeben... und es wird ja auch so angezeigt.
»» Dieses Element ist außerdem uninteressant, hat es doch overflow:visible gesetzt.
Ja genau, das Element "main" ist ja interessant und dieses ist auf overflow: hidden gesetzt und ebenfalls 200px hoch, da dieses das Element "cSub" komplett ausfüllt...
»» Keine Ahnung. Dadurch sollte er ebenfalls im Quirks-Mode sein. Oder habe ich die DOCTYPEs gerade falsch im Kopf und er war vorher Standards-Compliant (bzw. das, was Microsoft dafür hält)?
So wie ich es als erstes gepostet habe, befindet sich der Browser im Standard Mode, also wo er sich halt nach den W3C Angaben richten soll... ohne DocType befindet sich der Browser dann im Quirks-Mode, wo es dann auch korrekt dargestellt wird.
Mein Problem ist aber leider: Lasse ich den DocType weg, macht der IE was er will und stellt den Rest der Seite falsch dar...
Daher meine Frage, gibt es einen CSS-Hack oder ähnliches, um den selben Effekt zu erzielen, so dass es dann auch mit dem IE klappt?
Die folgende Nachricht zum Thema stammt von: Stefan Richter, 30. 03. 2007, 23:15
Nachtrag:
Sobald ich das Listenelement UL (kann auch ein Div sein) auf position: relative setze, wird overflow: hidden im IE komplett ignoriert!
Die folgende Nachricht zum Thema stammt von: Stefan Richter, 30. 03. 2007, 23:21
Nachtrag:
Problem hat sich gelöst... und zwar muss im "main" DIV ebenfalls position: relative stehen, dann klappts auch mit dem IE... obwohl es eigentlich unlogisch erscheint.
Trotzdem vielen Dank für die Hilfe.
Grüße
Die folgende Nachricht zum Thema stammt von: gaby, 31. 03. 2007, 15:33
»» Nachtrag:
»»
»» Problem hat sich gelöst... und zwar muss im "main" DIV ebenfalls position: relative stehen, dann klappts auch mit dem IE... obwohl es eigentlich unlogisch erscheint.
Hi,
Auch wenn sich dein Problem mittlerweile gelöst hat, finde ich deinen Code nicht optimal.
Du hast da nicht die Ursachen des Problems beseitigt, sondern nur an den Symptomen herumgedoktert. ;-)
Sehr wahrscheinlich brauchst du in der UL kein
UL {
position: relative;
top: 0px; }
(Das ist der Default-Wert)
Ich würde auch eher dem Element 'overflow:hidden' geben, dem du auch 'height: 200px' zugeordnet hast.
IMO wäre UL dafür das geeignete Element. Die umgebenden Container brauchen keine height-Angabe, da die UL diese schon auf eine Höhe von 200px ausdehnt.
Die Box #main kannst du dann auch weglassen.
#cSub {
width: 160px;
/* height: 200px; */
border: solid 3px blue;
}
UL {
width: 160px;
height: 200px;
overflow: hidden;
list-style: none;
margin: 0px;
padding: 0px;
}
UL LI {
border: solid 1px #000000;
}
So ist es kürzer und funktioniert trotzden. ;-)
Grüße
gaby
Die folgende Nachricht zum Thema stammt von: Stefan Richter, 31. 03. 2007, 19:47
Vielen Dank für den Hinweis, ich werde es ausprobieren... jedenfalls funktioniert mein scrollbares Menü jetzt erstmal in allen gängigen Browsern (auch dem IE ;-) ).
»» Sehr wahrscheinlich brauchst du in der UL kein
»» UL {
»» position: relative;
»» top: 0px; }
»» (Das ist der Default-Wert)
Ja, theoretisch schon... wenn ich aber kein position:relative setze, klappt das mit dem Scrollen nicht!
Nochmals danke...
Grüße
Die folgende Nachricht zum Thema stammt von: gaby, 31. 03. 2007, 20:12
»» »» Sehr wahrscheinlich brauchst du in der UL kein
»» »» UL {
»» »» position: relative;
»» »» top: 0px; }
»» »» (Das ist der Default-Wert)
»»
»» Ja, theoretisch schon... wenn ich aber kein position:relative setze, klappt das mit dem Scrollen nicht!
Du bist dir aber schon darüber im Klaren, daß User ohne JS im Browser _nicht_ scrollen können? IMO sollte man solche elementaren Browserfunktionen nicht von JavaScript abhängig machen.
Guck mal hier:
http://gaby77.ga.funpic.de/forum/demo/stefan-scroll_in_ul/stefan-1.html
Grüße
gaby
Die folgende Nachricht zum Thema stammt von: Stefan Richter, 01. 04. 2007, 20:22
»» Du bist dir aber schon darüber im Klaren, daß User ohne JS im Browser _nicht_ scrollen können? IMO sollte man solche elementaren Browserfunktionen nicht von JavaScript abhängig machen.
Ja, darüber bin ich mir schon im Klaren... aber die komplette Seite ist auf JavaScript aufgebaut... wer halt meint es zu deaktivieren, kommt da nicht drauf... da nehme ich aber auch keine Rücksicht darauf, da es sich bei der Seite um ein Browsergame handelt und das soll nicht 0815 HTML Design beinhalten ;-)
Grüße
Die folgende Nachricht zum Thema stammt von: D.R., 31. 03. 2007, 14:24
Hallo,
»» »» Hier noch die komplette Datei:
»» »» <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
»»
»» Die Seite befindet sich im Quirks-Mode.
Nö, das ist der Doctype für HTML 4.01-Strict, bei welchem kein Browser den in den Quirksmode schaltet.
mfg. Daniel
--
Experten raten von der Verwendung des Internet Explorers ab!
Mein SELF-stylesheet | Darum Firefox!
Selfcode: ie:{ fl:( br:> va:) ls:& fo:) rl:( n4:# ss:| de:> js:) mo:} zu:}
© 1998-2006 
Impressum, Software: Classic Forum
(CSS)