Hilfe – IE zeigt div nicht in der richtigen Höhe an - HTML und CSS / Stylesheets - HilfDirSelbst.ch

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

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

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:
(2970 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!

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:
(2964 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"> </div>

Ersetze es mal durch:

<br clear="all">

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

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:
(2956 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Sabine, you just made my day!!!

Danke!!! Das klappt! :-))))))

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:
(2936 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   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...)

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:
(2916 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

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:
(2913 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... ;-)

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:
(2905 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?

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:
(2902 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Ich habs fast, ich muss nur noch die Linie positionieren.

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:
(2897 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Ich habs!!! Hurra!
Danke nochmal Sabine, das war trotzdem sehr hilfreich heute!

als Antwort auf: [#447432]

Aktuell

InDesign / Illustrator

axaio MadeToPrint Server unterstützt Adobe InDesign Server 2024

| 27.11.2023

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.

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

Veranstaltungen

14.05.2024

Einsparpotenziale in der Weiterverarbeitung

Online
Dienstag, 14. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Prozessoptimierung ist ein Teamsport! Keine Software und keine Maschine allein kann Ihnen helfen, die Effizienzpotenziale Ihres Betriebes maximal auszuschöpfen. Von der Auftragsannahme über die Vorstufe und den Druck bis hin zur Weiterverarbeitung – alles muss optimal ineinandergreifen. Apropos Weiterverarbeitung – in vielen Druckbetrieben fristet sie in Sachen Prozessoptimierung immer noch ein Schattendasein. Dabei liegen hier mittlerweile die größten Einsparpotenziale! In einem Webinar von Horizon und Impressed erfahren Sie, wie Sie diese Einsparungen realisieren können. Horizon, bekannt für innovative Lösungen in der Druckweiterverarbeitung, bietet mit iCE LiNK eine Workflowlösung für die Weiterverarbeitung. iCE LiNK überwacht, visualisiert und analysiert Produktionsabläufe und unterstützt bei der Wartung – damit immer alles reibungslos läuft. Den gleichen Anspruch hat der von Impressed entwickelte Impressed Workflow Server – er ist die smarte PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt. Im Webinar zeigen Ihnen die Experten von Horizon und Impressed, wie beide Lösungen im Team die Effizienz und Produktivität Ihres Betriebes steigern können. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Organisator: Impressed / Horizon

https://www.impressed.de/schulung.php?c=sDetail&sid=327

Einsparpotenziale in der Weiterverarbeitung

Veranstaltungen

16.05.2024

Und es geht doch: Automatisierung im Großformatdruck!

Online
Donnerstag, 16. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Nein

Organisator: Impressed / Günther Business Solutions

https://www.impressed.de/schulung.php?c=sDetail&sid=326

Und es geht doch: Automatisierung im Großformatdruck!

Weitere Events

Neuste Foreneinträge

"Wendebuch": Wie komplette Datei um 180° drehen?

PDF ausschießen

PDF-Formular: Dateianhang durch User?

Katalog-Gestaltung: Elemente am Bund spiegeln und platzieren mittels Indesign oder -EasyCatalog

PDF | Barrierefrei | Bilder werden nicht erkannt

Problem mit RGB> CMYK in Vektor-Smartobjekt

Adobes Konvertierungsdienst per Script aufrufen

Mit Preflight Registerfarbe ALL nach Grau konvertieren geht nicht

Switch/PitStop: Sprachdatei vom Report ändern

Absatzsetzer in CC24 ME lösen Probleme aus

Weitere Stellenangebote