zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden inneres div soll äußeres div nach untern überlagern (Problem im Internet Explorer)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.02.2007, 15:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.02.2007
Beiträge: 6
Waldgeist befindet sich auf einem aufstrebenden Ast
Standard 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>
Das innere Div soll jetzt höher sein als das äußere, also über das äußere div hinausgehen. Das ganze ist relativ positioniert (und soll es auch bleiben).

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>
Das Problem um es nochmal auf den Punkt zu bringen:
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.02.2007, 15:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.02.2007, 20:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.02.2007
Beiträge: 6
Waldgeist befindet sich auf einem aufstrebenden Ast
Standard

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>
Oder habe ich das falsch verstanden, also was du mit dem border meintest?

Vielen Dank.

Grüße Jonas
Mit Zitat antworten
  #4 (permalink)  
Alt 14.02.2007, 18:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.02.2007
Beiträge: 6
Waldgeist befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 14.02.2007, 18:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 14.02.2007, 18:50
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 14.02.2007, 20:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.02.2007
Beiträge: 6
Waldgeist befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:39 Uhr.