|
|||
inneres div soll äußeres div nach untern überlagern (Problem im Internet Explorer)
Hallo,
ich hoffe der Titel beschreibt was ich meine (hoffe es ist verständlich). Hier noch mal als ausführliche Erklärung. Ich habe im Moment ein Problem im Internet Explorer. Und zwar habe ich zwei div's: Code:
<div> <div></div> </div> In den anderen Browsern ist das alles kein Problem. Nur im IE kriege ich da keine Lösung hin. Wozu ich das ganze brauche: Es handelt sich um ein Menü welches in einem Div liegen soll und der ausgewählte Menüpunkt nach unten offen sein soll. Das ganze sieht dann (wenn es richtig dargestellt wird) so aus: Im IE so: Ich habe schon alles mögliche mit CSS ausprobiert, kriege aber keine Lösung hin, die der IE annimmt. Der Code sieht in etwa so aus (das war ein Test von mir): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css" media="all"> #containerMain { padding: 10px 0px 0px 0px; width: 770px; margin: 0px auto 0px auto; } #pageHeader { padding: 0px; margin: 0px; width: 100%; height: 120px; border: 1px solid #000; border-bottom: 0px; } #pageBody { padding: 7px; margin: 0px; width: 756px; border: 1px solid #000000; border-bottom: 0px; } </style> </head> <body> <div id="containerMain"> <div id="pageHeader"> <div style="z-index: 1; background-color: #F00; width: 400px; height: 16px; padding: 2px; margin: 100px 0px 0px 0px; border: 1px solid #FFF;">test</div> </div> <div id="pageBody"></div> </div> </body> </html> Ich schaffe es nicht den IE davon zu überzeugen, den inneren Div über den äußeren gehen zu lassen. Der passt die Höhe automatisch an. Egal was ich versuche. Hat jemand ähnliche Erfahrungen gemacht und kann vllt. eine Lösung anbieten? Wäre super. Vielen dank und einen schönen Tag, Jonas |
Sponsored Links |
|
|||
das ist der mit Abstand komplizierteste Lösungsversuch für ein Menu, den ich bisher gesehen hab
Schau mal in meine Sig (Menu-Listen) und wie man ganz einfach solche Karteireiter hinbekommt. Statt DIVs übereinander zu platzieren wird einfach die Border-Eigenschaft angepasst. |
Sponsored Links |
|
|||
Vielen Dank erstmal für die Antwort.
Ich habe mich ein bisschen auf der Seite umgeschaut und das ganze auch gefunden (also mit den Karteireitern). Ich habe auch schon einmal Karteireiter eingesetzt (mit ul und li). Ist mir also nicht unbekannt. Also habe ich jetzt mal ein bisschen rumgespielt und versucht, aber es will im IE immer noch nicht. Bei den anderen kommt es auf genau das gleiche wie mit den Div's raus. Es funktioniert. Finde das jetzt auch nicht mehr oder weniger aufwendig. Eigentlich ist es sogar mehr Aufwand, da der ul tag mehr vorhanden ist, aber davon mal abgesehen. Ich poste hier jetzt mal den (Zusammengeschnittenen-)Quelltext. Ein Beispiel ist leider nicht online. Vllt. kann dann ein konkreter Vorschlag kommen weil ich immer noch nicht weiß wie ich es anders lösen soll. Momentan habe ich es mit dem ul so gemacht, dass im ul ein border-bottom ist. Dieser soll überlagert werden von dem li. Das will aber wie beim div auch nicht im IE. Wie ich es anders machen soll, da habe ich leider keine Idee (Vorstellung). Habe den Code so zusammengeschnitten, dass das ganze zum ausprobieren geeignet ist, sollte das Bedürfniss danach stehen . Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css" media="all"> #containerMain { padding: 10px 0px 0px 0px; width: 770px; margin: 0px auto 0px auto; } #pageHeader { padding: 0px; margin: 0px; width: 100%; height: 120px; border: 1px solid #000; border-bottom: 0px; } #pageBody { padding: 7px; margin: 0px; width: 756px; min-height: 400px; border: 1px solid #000000; border-top: 0px; border-bottom: 0px; } ul#pageHeaderMenuTab { list-style-type: none; padding: 0px; margin: 100px 0px 0px 0px; height: 19px; border-bottom: 1px solid #000; } .menuPunktTab { padding: 2px; margin: 0px 0px 0px 2px; height: 14px; border: 1px solid #000; font-size: 12px; float: left; } .menuPunktTabSelected { padding: 2px; margin: 0px 0px 0px 2px; height: 14px; border: 1px solid #000; border-bottom: 1px solid #FFF; font-size: 12px; float: left; } </style> </head> <body> <div id="containerMain"> <div id="pageHeader"> <ul id="pageHeaderMenuTab"> <li class="menuPunktTabSelected"><a href="index.php?page=start">Start</a></li><li class="menuPunktTab"><a href="index.php?page=webdesign">Seite 1</a></li><li class="menuPunktTab"><a href="index.php?page=webhosting">Webhosting</a></li><li class="menuPunktTab"><a href="index.php?page=module.php">Module</a></li> </ul> </div> <div id="pageBody">Inhalt </div> </div> </body> </html> Vielen Dank. Grüße Jonas |
|
|||
hmm, niemand eine Idee? Oder zu kompliziert und ausführlich gefragt?
Ich habe jetzt noch ein bisschen ausprobiert und den Border in die li-Tags gepackt. Das klappt auch wunderbar. Nur weiß ich nicht wie ich dann den Rest (also das was das Menü einnimmt bis zum Rand auf der rechten Seite) eine Linie ziehen kann. Ich bedanke mich schon jetzt für Lösungsansätze. Und ich vermute, dass es eine einfache Lösung ist, ich nur nicht darauf komme und es vermutlich viel zu kompliziert versuche. Viele Grüße, Jonas |
|
|||
Zu deiner "neuen" Version kann ich nichts sagen.
Zu deinem geposteten Code: der IE < 7 erweitert Elemente mit ihrem Inhalt trotz height-Angabe. Punkt. Entferne zunächst alle deine Höhenangaben (Pixelhöhen funktionieren nicht - Schriftvergrößerung!). Floate auch die ul, damit sie die gefloateten lis einschließt. Die Überlappung des borders beim "selected" bekommst du mit negativem margin (bei den normalen li-items kein unterer border nötig). Für den IE ist vermutlich noch ein position:relative nötig, damit der überlappende border sichtbar wird. |
|
||||
hier wird ganze nur mit Grafiken gemacht, viel Spaß:
Cascading Style Sheets { Tutorial : Horizontal-Navigation mit gleitenden Hintergründen }
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
|||
besten Dank. Durch den Link von BlackHawk habe ich jetzt eine Lösung gefunden.
Ich habe einfach in den Hintergrund ganz unten ein Bild (schwarzer Pixel) gelegt der im Hintergrund den Rahmen vortäuscht. Dadurch kann es im IE keine Probleme geben. Besten Dank für die Lösungshilfe. Der Link ist auch sonst super, kann das Tutorial weiterempfehlen. Behandelt allerdings (wie schon gesagt) Tabs bzw. Karteireiter mit Bildern. Viele Grüße, Jonas
__________________
http://www.wameo.de - Ihr virtuelles Kaufhaus Geändert von Waldgeist (15.01.2010 um 22:54 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
"definition list" Problem mit Internet Explorer | Albert | CSS | 2 | 17.03.2011 21:53 |
Habe ein Problem mit der Darstellung beim alten Internet Explorer | gandi90 | CSS | 5 | 16.11.2010 23:47 |
Internet Explorer Problem | nico1510 | CSS | 6 | 21.07.2008 15:40 |
Problem mit Darstellung von Bild im Internet Explorer | Sp33dy G0nz4l3s | CSS | 4 | 27.05.2006 22:38 |
Rollover Problem im Internet Explorer | Beb | CSS | 9 | 21.06.2005 19:49 |