- 19.02.2008 12:43 #1Neuer Benutzer
- Registriert seit
- 08.07.2007
- Beiträge
- 9
- Renommee-Modifikator
- 0
Problem mit 3 div-Containern / IE Hi Zusammen!
Ich habe ein kleines Problem mit 3 div-Containern und dem Internet Explorer:
Ich habe auf einer Seite 3 div-Container nebeneinander; Links "#avmenu", in der Mitte "#content" und Rechts "#extras" (siehe css-Code).
Wenn ich nun in "#avmenu" oder "#extras" Text einfüge, oder auch einfach nur leere Zeilenumbrüche mache verschiebt sich der inhalt von "#content" um die Anzahl der in "#avmenu" bzw. "#extras" gemachten Zeilenumbrüche nach unten. Es entsteht praktisch eine große Lücke in "#content". Dieses Phänomen tritt allerdings nur im IE auf, Firefox zeigt die Seite korrekt an.
Kann mir jemand sagen, woran das liegt?
mfg!
HTML-Code:body { margin: 0 auto; padding: 0; font: 76% Verdana,Tahoma,Arial,sans-serif; background: #211d1e url(images/body_deg.gif) repeat-x } #wrap { background: #000000; color: #ffffff; border: none; margin: 0 auto; width: 790px; } #header { clear: both; margin: 0px 0em 0px 0em; padding: 0; height: 75px; background-color: #000000;} #header h3 { width: 350px; margin: 0px 0px 0px 15px; float: left; } #header p { width: 500px; float: right; text-align: center; color: #a0a0a0; margin: 0px 0px 0px 0px; font-size: 0.8em; line-height: 1.2em; height: 35px;} #avmenu { clear: left; float: left; width: 150px; margin: 0 0 10px 0; padding: 0; font-size: 0.9em; } #avmenu ul { list-style: none; width: 150px; margin: 0 0 20px 0; padding: 0; font-size: 1.1em; } #avmenu li { margin-bottom: 4px; } #avmenu li a { font-weight: bold; height: 20px; text-decoration: none; color: #fffff1; display: block; padding: 6px 0 0 10px; background: #67522c; border-left: 1px #846837 solid; } #avmenu li a:hover { background: #67522c; color: #fffff1; border-left: 4px #47381e solid; } .announce { margin: 10px 0 10px 0; padding: 10px; width: 130px; color: #a8a8a8; background-color: #000000; line-height: 1.3em; } #extras { float: right; width: 150px; margin: 0 0 10px 0; font-size: 0.9em; line-height: 1.5em; } #extras p { margin: 0 0 1.5em 0; } #content { margin: 0em 160px 20px 160px; padding: 0 10px 0 10px; line-height: 1.6em; text-align: left; } #content h2 { font-size: 1.5em; margin: 0 0 0.5em 0; } #content img { padding: 0px; display:inline; } h3 { font-size: 1.3em; margin: 0 0 10px 0; } a { text-decoration: none; color: #b6952a; } a:hover { text-decoration: underline; color: #b6952a; } #footer { clear: both; margin: 0 auto; padding: 0px 0em 0px 0em; width: 790px; text-align: center; color: #808080; font-size: 0.9em; height: 244px; background: #211d1e url(images/pom_bas.jpg) no-repeat right; border: none;} #footer a { color: #808080; text-decoration: none; } #footer a:hover { text-decoration: underline; } .left { margin: 0px 7px 0px 5px; float: left; } .right { margin: 0px 7px 0px 5px; float: right; } .textright { text-align: right; } .center { text-align: center; } .small { font-size: 0.8em; } .bold { font-weight: bold; } .hide { display: none; }
- 19.02.2008 14:25 #2
Hi,
ohne den Quelltext dazu ist das schlecht zu sagen.
Kann also nur sagen was mir an der CSS auffiel:
clear vor float, das kapiere ich nicht.Code:#avmenu { clear:left; float:left; }
line-height immer ohne Masseinheit angeben, sonst kann es Vererbungsprobleme geben: nicht line-height:1.2em; sondern line-height:1.2;
Dann ist es einfach ein Faktor, völlig ausreichend.
Ich würde eher allen drei Containern eine feste Breite geben und alle drei links floaten lassen.
In deinem Fall hat z.B. #content kein Layout für den IE, das kann zu Problemen bei der Darstellung im IE führen.
Layout bekommst du z.B. durch die Angabe einer Breite oder einer Höhe (reicht bei Höhe schon height:1%
), allerdings nicht durch width/height:auto; da muss schon ein Wert genannt werden..
- 19.02.2008 17:14 #3Neuer Benutzer
- Registriert seit
- 08.07.2007
- Beiträge
- 9
- Renommee-Modifikator
- 0
Vielen Dank!
An dem fehlenden Layout von #content hat es gelegen!
Jetzt klappt alles!
Aktive Benutzer
Aktive Benutzer
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Ähnliche Themen
-
nicht definierbares problem
Von spastikind91 im Forum PHPAntworten: 5Letzter Beitrag: 16.01.2008, 15:39 -
Problem mit eigenem Template System
Von Frank im Forum PHPAntworten: 10Letzter Beitrag: 26.04.2007, 19:54 -
Problem bei Realisierung eines Zurück-Buttons in HTML
Von Grammi im Forum HTML und XHTMLAntworten: 3Letzter Beitrag: 23.05.2006, 18:29 -
Problem mit gestreckter Tabelle [Feste Höhe einer Tabelle]
Von Blood im Forum HTML und XHTMLAntworten: 3Letzter Beitrag: 21.09.2005, 17:27 -
Frame/Rahmen - Problem
Von Mr_Bild im Forum HTML und XHTMLAntworten: 2Letzter Beitrag: 06.07.2005, 16:20



LinkBack URL
About LinkBacks


Lesezeichen