zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden vertical-align OK in Firefox, Opera - Probleme im IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.07.2008, 18:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2007
Beiträge: 31
horstenpeter befindet sich auf einem aufstrebenden Ast
Standard vertical-align OK in Firefox, Opera - Probleme im IE

Hallo, hier ist der Code den ich benutze, um in einer Bildergalerie unterhalb des großen Bildes die Bildunterschrift und Pfeile zum durchblättern anzubieten.

Text und Pfeile sollen dabei innerhalb des Caption/ resp. Pfeile -divs vertikal zentriert sein. (Ich mach es nicht mit padding, da es auch mal mehrere Zeilen Text sein könnten)

Das sieht in Opera und Firefox auch genau so wie erwartet aus, der Internet Explorer setzt den Text aber immer noch an den oberen Rand. Könnt ihr mir erklären, warum?

CSS:
Code:
#caption {
	float:right;
	margin-left:30px;
	font-size:0.7em;
	font-weight:bold;
	color:#999999;
	height:85px;
	width:500px;
	display:table;
}

.vertical-cell {
	display:table-cell;
	vertical-align:middle;
}

#pfeile {
	width:70px;
	float:right;
	font-size:0.7em;
	height:85px;
	display:table;
}
HTML:
Code:
<div id='pfeile'>		
<div class='vertical-cell'><img src='bilder/pfeil_l50.png' alt='zur&uuml;ck' style='float:left;'></div>
<div class='vertical-cell'>1 von 13</div>
<div class='vertical-cell'><img src='bilder/pfeil_r50.png' alt='vor'></div>
</div>

<div id='caption'>
<div class='vertical-cell'>Bildunterschrift</div>	
</div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.07.2008, 18:44
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Der IE kann mit "display:table-cell;" (noch) nicht umgehen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.07.2008, 18:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2007
Beiträge: 31
horstenpeter befindet sich auf einem aufstrebenden Ast
Standard

Das hatte ich befürchtet.

Gibts denn ein workaround?
Mit Zitat antworten
  #4 (permalink)  
Alt 17.07.2008, 19:01
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Ich kenne keinen, aber evtl. jmd. anders hier?

Ungetestet, aber evtl. könnte folgende Vorgehensweise funktionieren:

Die beiden Grafiken bzw. Links zum Vor- und Zurückblättern werden im gleichen div platziert, wie die einzelnen Seitenzahlen. Das Rahmen-div bekommt "position: relative", damit man darin dann die Links zum Blättern absolut ausrichten kann.
Der Link bzw. das Bild zum Zurückblättern bekommt dann "position:absolute" und "top:50%", wodurch dieses in der Mitte des div beginnt. Dann bekommt es noch ein negatives "margin-top:-75px", wenn das Bild 150px hoch sein sollte (also die Hälfte), wodurch es eigentlich (hoffentlich) vertikal zentriert sein sollte. Wenn die Grafik ebenfalls 150px breit ist, muss das Rahmen-div mindestens ein "padding-left:150px" erhalten, damit Platz für den Zurück-Link/-Bild geschaffen wird.
Gleiches Vorgehen für das Bild zur rechten Seite.

Gleichzeitig muss dann allerdings dafür gesorgt werden, dass das Rahmen-div eine Mindesthöhe erhält, wenn die Grafiken z.B. 150px hoch sind, dann braucht das Rahmen-div eine "min-height:150px" und per IE-Hack bekommt der IE dann "height:150px".

Das ist jetzt nur eine Idee und ich hab's nicht ausprobiert, aber momentan fällt mir nichts ein, was dagegen sprechen würde.
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
darstellungs probleme im opera max 29 CSS 6 13.03.2009 20:51
mooSlideBox 3 Freja, xml und xsl. Probleme im FireFox und Opera Tomas Clark Javascript & Ajax 0 09.09.2008 09:38
XHTML 1.0 strict: interpretation von alt und title (IMG) vom IE7, Opera und Firefox braindead (X)HTML 5 11.03.2007 17:57
bitte seite testen IE kleiner 6, opera und firefox + code verbessern dexta² Site- und Layoutcheck 3 09.03.2007 09:54
CSS - align="right" nur Im Opera. Firefox und IE nicht frankm123 CSS 8 08.06.2006 15:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:57 Uhr.