[GastForen Web allgemein HTML und CSS / Stylesheets Hilfe – IE zeigt div nicht in der richtigen Höhe an

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Hilfe – IE zeigt div nicht in der richtigen Höhe an

whitelady
Beiträge gesamt: 338

23. Jul 2010, 12:04
Beitrag # 1 von 9
Bewertung:
(2812 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo, liebes Forum.

Ich bin gerade am Verzweifeln an einem kniffligen CSS-Problem. Ich habe eine Webseite mit CSS aufgesetzt, die eigentlich auch noch in php umgesetzt werden soll (daher reines CSS und kein Tabellenlayout, was sicher einfacher gewesen wäre...).

Die Webseite in Question ist diese hier: http://www.nicoleshaarstudio.de

Das Problem ist die Contentbox. Hier wird im IE 7 die innerste Box nicht in der vollen Höhe der umschließenden Contentbox aufgespannt.

Der CSS-Code für die Contentbox sieht folgendermaßen aus:

Code
#textbox { 
position: relative;
overflow: visible;
width: 538px;
top: 0;
text-align: left;
float: left;
}

#zeile1 {
position: relative;
width: 538px;
height: 21px;
top: 0;
left: 0;
float: left;
}

#obenlinks {
position: relative;
background: url(images/oli.png) no-repeat;
width: 21px;
height: 21px;
top: 0;
left: 0;
float: left;
}

#obenmitte {
position: relative;
background: url(images/o.png) repeat-x;
width: 496px;
height: 21px;
top: 0;
float: left;
}

#obenrechts {
position: relative;
background: url(images/ore.png) no-repeat;
width: 21px;
height: 21px;
top: 0;
float: left;
}

#zeile2 {
position: relative;
width: 538 px;
top: 0;
left: 0;
float: left;
}

#mittelinks {
position: relative;
width: 21px;
top: 0;
left: 0;
float: left;
}

#mittemitte {
position: relative;
overflow: visible;
background: url(images/verlauf.png) repeat-x #ebecec;
width: 496px;
min-height: 320px;
top: 0;
float: left;
}

#mittetext {
position: relative;
width: 58%;
left: 0px;
top: 6px;
padding-left: 10px;
float: left;
}

#trennlinie {
position: relative;
width: 5px;
height: 305px;
top: 10px;
left: 310px;
background: url(images/trennlinie.png) repeat-y;
}

#mitteadresse {
position: absolute;
width: 35%;
top: 6px;
right: 0;
}

#mitterechts {
position: relative;
width: 21px;
top: 0;
float: left;
}

#spalte1 {
margin: 0;
padding: 0;
background: url(images/li-bg.png) repeat-y left;
width: 100%;
}

#spalte2{
margin: 0;
padding: 0;
background: url(images/re-bg.png) repeat-y right;
width: 100%;
}

.clear {
clear: both;
display: block;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
}

#zeile3 {
position: relative;
width: 538px;
height: 21px;
top: 0;
left: 0;
float: left;
}

#untenlinks {
position: relative;
background: url(images/uli.png) no-repeat;
width: 21px;
height: 21px;
top: 0;
left: 0;
float: left;
}

#untenmitte {
position: relative;
background: url(images/u.png) repeat-x;
width: 496px;
height: 21px;
top: 0;
float: left;
}

#untenrechts {
position: relative;
background: url(images/ure.png) no-repeat;
width: 21px;
height: 21px;
top: 0;
float: left;
}


Ich weiß, das sind ziemlich viele verschachtelte divs. Aber ich musste eine CSS-Lösung machen, weil ich die Webseite noch in ein CMS transportieren will.

Kann mich bitte jemand in die richtige Richtung schubsen oder mir sagen, wo der Fehler liegt? Denn ich weiß nicht, an welchen Schräubchen ich noch drehen soll…
Das wäre echt klasse. Tausend Dank schonmal!
Viele Grüße
Nadine
X

Hilfe – IE zeigt div nicht in der richtigen Höhe an

SabineP
Beiträge gesamt: 7586

23. Jul 2010, 12:37
Beitrag # 2 von 9
Beitrag ID: #447382
Bewertung:
(2806 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo whitelady,

das ist ja ein komisches CMS, da es Dir den HTML-Quellcode Deiner Seiten vorschreibt.
Nun egal.

Ich denke, daß dieses DIV im IE sichtbar wird.
<div class="clear">&nbsp;</div>

Ersetze es mal durch:

<br clear="all">

Das müßte klappen, habe es aber nicht getestet im IE 7.
Gruß Sabine


als Antwort auf: [#447375]

Hilfe – IE zeigt div nicht in der richtigen Höhe an

whitelady
Beiträge gesamt: 338

23. Jul 2010, 12:50
Beitrag # 3 von 9
Beitrag ID: #447383
Bewertung:
(2798 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Sabine, you just made my day!!!

Danke!!! Das klappt! :-))))))
Viele Grüße
Nadine


als Antwort auf: [#447382]

Hilfe – IE zeigt div nicht in der richtigen Höhe an

whitelady
Beiträge gesamt: 338

23. Jul 2010, 15:11
Beitrag # 4 von 9
Beitrag ID: #447408
Bewertung:
(2778 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
*haarerauf*

Da ergibt sich nur leider ein neues div-Höhen-Problem, an dem ich jetzt seit anderthalb Stunden sitze und versuche, irgendwelche Lösungswege zu finden...

Das äußere div (id="zeile2") wird im IE auch wieder nicht mit der richtigen Höhe angezeigt. Der Sternbutton im verschachtelten div id="mitteadresse" erscheint hinter div id="zeile3".

Was ich bis jetzt probiert habe ist:
z-index, aber das ist anscheinend beim IE ja auch wieder so ein Problem, kein Erfolg
das img-Tag in einen Paragraph setzen, sogar noch einen zusätzlichen Paragraph mit &nbsp; drinne darunter setzen - juckt den IE überhaupt nicht
die min-height von zeile2 auf 340 statt 320px setzen - ebenfalls keine Auswirkung.
Nun hab ich noch sowohl die min-height von zeile2 UND dem div "mittemitte" auf 320px gesetzt, aber der IE ist völlig unbeeindruckt davon.
:-((((

Das Blöde ist, ich kanns auch immer nur mit browsershots.org testen, denn ich hab hier nirgends einen Windowsrechner zur Verfügung... und browsershots macht manchmal Mist.
(Mir kommt gerade der Gedanke - was ist wenn bei browsershots.org der Cache nicht geleert wird? Dann ändere ich hier rum, und kriege das Falsche angezeigt... oh mann oh mann...)
Viele Grüße
Nadine


als Antwort auf: [#447383]
(Dieser Beitrag wurde von whitelady am 23. Jul 2010, 15:29 geändert)

Hilfe – IE zeigt div nicht in der richtigen Höhe an

SabineP
Beiträge gesamt: 7586

23. Jul 2010, 17:33
Beitrag # 5 von 9
Beitrag ID: #447416
Bewertung:
(2758 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Im CSS-Code für #zeile2 stimmt etwas nicht:

width: 538 px;

richtig wäre
width: 538px;

Der HTML-Validator bringt auch noch ein paar Fehler, weil da einige XHTML-Tags im Code enthalten sind.

Testen kann ich auch nur mit Bildschirmfotos, hier gehts schneller:
http://meineipadresse.de/netrenderer/index.php
Gruß Sabine


als Antwort auf: [#447408]

Hilfe – IE zeigt div nicht in der richtigen Höhe an

whitelady
Beiträge gesamt: 338

23. Jul 2010, 17:43
Beitrag # 6 von 9
Beitrag ID: #447419
Bewertung:
(2755 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Tausend Dank nochmal!!! Das Leerzeichen wär mir im Leben nicht aufgefallen. Betriebsblind.

Ich hab jetzt den overflow bei zeile2 auf hidden gestellt. Habe bei Selfhtml eine gute Erläuterung über CSS-"Tabellenimitation" gefunden, vielleicht nützts ja jemandem mal was, wenn er mit der Suchfunktion hier in den Thread kommt:
http://aktuell.de.selfhtml.org/...og/css-spaltenlayout

Jepp, ich hab die Seite gerade mal in den Validator geschmissen, die xhtml-Sachen kommen noch raus, danke!

Und danke für den Link - browsershots ist tatsächlich sehr langsam... ;-)
Viele Grüße
Nadine


als Antwort auf: [#447416]

Hilfe – IE zeigt div nicht in der richtigen Höhe an

whitelady
Beiträge gesamt: 338

23. Jul 2010, 18:18
Beitrag # 7 von 9
Beitrag ID: #447428
Bewertung:
(2747 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ich weiß jetzt, woran es liegt, aber ich weiß nicht, wie ich das Problem gelöst kriege:

Es liegt daran, dass "mitteadresse" absolut positioniert ist. Das ist deswegen, weil ich es trotz identischem div-Aufbau wie "mittetext" nicht hinbekommen habe, dass "mittetext" und "mitteadresse" beide in "mittemitte" oben angeordnet sind. Obwohl ich "mitteadresse" sage "top: 0; right: 0;", wird "mitteadresse" nach unten geschoben, unter "mittetext".
Siehe hier: http://www.nadinebuntenbeck.de/..._webseite/index.html

Die Frage ist also: Warum werden "mittetext" und "mitteadresse" bei relativer Positionierung nicht beide oben angeordnet, obwohl sie beide links floaten?
Viele Grüße
Nadine


als Antwort auf: [#447419]

Hilfe – IE zeigt div nicht in der richtigen Höhe an

whitelady
Beiträge gesamt: 338

23. Jul 2010, 18:37
Beitrag # 8 von 9
Beitrag ID: #447432
Bewertung:
(2744 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ich habs fast, ich muss nur noch die Linie positionieren.
Viele Grüße
Nadine


als Antwort auf: [#447428]

Hilfe – IE zeigt div nicht in der richtigen Höhe an

whitelady
Beiträge gesamt: 338

23. Jul 2010, 18:54
Beitrag # 9 von 9
Beitrag ID: #447433
Bewertung:
(2739 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ich habs!!! Hurra!
Danke nochmal Sabine, das war trotzdem sehr hilfreich heute!
Viele Grüße
Nadine


als Antwort auf: [#447432]
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
21.01.2021 - 22.01.2021

Digicomp Academy AG, Bern oder Basel
Donnerstag, 21. Jan. 2021, 08.30 Uhr - Freitag, 22. Jan. 2021, 17.00 Uhr

Kurs

Dieser Basic-Kurs ist der perfekte Einstieg in die Welt von InDesign, dem vielseitigen Layout-Programm. Sie lernen, wie InDesign aufgebaut ist, wie saubere Dokumente erstellt werden und wie man korrekt mit gelieferten InDesign-Projekten umgeht.

Dauer: 2 Tage
Preis: CHF 1'400.–

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/INDEM1

Veranstaltungen
21.01.2021

Illustrator - das unbekannte Wesen

Online
Donnerstag, 21. Jan. 2021, 19.00 Uhr

Vortrag

Millionen Funktionen, und immer kommen neue dazu! Monika Gause ist jeden Januar aufs Neue ein gern gesehener Gast bei der IDUG Stuttgart. - Sie bringt alle Neuerungen mit, die 2020 dazukamen und jede Menge Tipps und Tricks. - Zudem wird sie uns informieren, was wir in Illustrator beachten müssen, wenn wir Daten fürs Web erstellen bzw. aufbereiten. - Wichtig zu wissen: "Dos and Don'ts" in Illustrator. Welche Fehler sollte man dringend vermeiden und was muss man unbedingt tun, damit es Spaß macht mit Illustrator zu arbeiten. - Dieses Jahr hast Du zusätzlich die Möglichkeit Monika im Voraus Fragen zu stellen. Fülle dieses Formular mit deinen Fragen; auch Beispieldateien sind anfügbar: https://forms.gle/fJmF8C6MjbDoEhED8

Nein

Organisator: InDesign Usergroup Stuttgart

Kontaktinformation: Christoph Steffens, E-Mailidug AT satzkiste DOT de

https://idugs67.eventbrite.de/

IDUGS #67 Illustrator mit Monika Gause

Neuste Foreneinträge


Umstieg auf Linux ...

Scannen mit Affinity Photo (V 1.8.3.641) in Win 10

Sommerurlaub ist nicht weit?

Anwendungsrahmen ausschalten auf Windows-PC?

[GREP] beliebige Zeichen finden und durch selbe Anzahl an Leerzeichen oder Anzahl Zeichen "x" ersetzen

ICC Profil für Papier Munken Print crema FSC 90 g/m² mit 1,5 Vol.

PSD CS6 (!) Mac: Dialog "Dateiinformationen" Fenster leer und Sackgasse

weitere peinliche Fragen zu Selbstverständlichkeiten

Hilfe

Bilder High> Low
medienjobs