✔ Zentrierung mit Firefox

Status
Nicht offen für weitere Antworten.
B

bleifresser

Mitglied
Tach,

ich habe ein Problem bei der Zentrierung einer Website auf dem Bildschirm. Ich mache das momentan mit Tabellen, in der Form:

HTML: 
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td valign="middle" align="center">
       <table><!--Inhalt--></table>
</td>
<tr>
</table>

Bei dieser Seite handelt es sich um ein Template für Typo3. Solange ich das Template offline öffne, wird alles richtig angezeigt (im Firefox und im IE).
Online jedoch, zentriert Firefox die Seite nicht mehr vertikal. Durch Typo3 enstehen viele Tabellen mit neuen valign Ausrichtungen und auch divs werden in diese Haupttabelle eingefügt.
Im IE wird es so angezeigt wie ich es möchte, aber im Firefox halt nicht. (Leider kann ich die Seite nicht verlinken, da sie nur auf unserem Firmenserver liegt)
Ich hab keine Idee mehr, wo der Fehler steckt. Ich bin für jeden Denkanstoss dankbar und offen, evtl kennt jemand ein ähnliches Problem mit Firefox.
Meine eigene Vermutung geht dahin, dass es zu viele weiter valign - Angaben in der Tabelle gibt, also die Tabellentiefe zu groß ist - ist aber nur eien Vermutung.
 
bleifresser hat gesagt.:
Leider kann ich die Seite nicht verlinken, da sie nur auf unserem Firmenserver liegt)
Zum Vergrößern anklicken....

bleifresser hat gesagt.:
Ich bin für jeden Denkanstoss dankbar und offen,.
Zum Vergrößern anklicken....

Ohne Link ist das mit den Denkanstößen echt so eine Sache.

Prinzipiell ist es so dass der Firefox (fast) alles richtig macht und der IE nicht, das heißt du solltest deinen code mal auf validität prüfen. Mehr kann ich dir ohne Code nicht sagen.
 
So,

ich hab jetzt nochmal das Template umgeschrieben und auf CSS und div's umgestellt.
Da man aus dem Netz nicht an die Datei heran kommt, poste ich hier mal den Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
text-align:center;
}
#contentsection{
	text-align:left;
	width:786px;
	height:536px;
	background-color:#E2EAF6;
	margin: 0 auto;
		
	padding:0;
	margin : 0px auto;
}
#header{
background:url(pics/media2005/hintergrund.jpg);
width:786px;
height:86px;
padding:0;
margin : 0px auto;
}
#mediamain{
background:url(pics/mediamenue_hg.gif);
height:422px;
width:187px;
padding:0;
margin : 0px auto;
float:left;
}
#content{
width:599px;
height:422px;
margin: 0px auto;
float:right;
}
#footer{
background:url(pics/media2005/footer.jpg);
clear:both;
width:786px;
height:28px;
margin: 0px auto;
}
#pic{
width:300px;
height:225px;
text-align:center;
float:left;
background-color:red;}
#colNormal{
width:299px;
height:422px;
background-color:blue;
float:right;
padding:0px;
margin:0 auto;
}
#prevnext{
width:300px;
height:50px;
background-color:black;
float:left;
}
#colLeft{
height:255px;
width:300px;
}

</style>
</head>

<body>
<div id="contentsection">
	<div id="header">&nbsp;</div>
	<div id="mediamain">&nbsp;</div>
	<div id="content">
		<div id="pic">
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td valign="middle" id="colLeft"><img src="../dummi_300x200.gif" width="300" height="200" /></td>
				</tr>
			</table>
		</div>
	<div id="colNormal">	
	Nein, meine Texte les ich nicht, so nicht, st&ouml;hnte Oxmox. Er war mit 
    Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak 
    Hotel) zugange. Sie warteten auf die fette Gill, um bei der Bank of Helvetica 
    die Kapit&auml;lchen in Kapital umzuwandeln. Oxmox liess nicht locker. Ich 
    fleh euch an, rettet meine Copy, gebt meinem Body nochn Durchschuss! Kein 
    Problem, erbarmte sich Old Face Baskerville, streichelte seinen Hund, zog 
    seine einspaltige Poppl, legte an und traf!</div>
	<div id="prevnext">
	&nbsp;
	</div>
	</div>
	<div id="footer">&nbsp;</div>
</div>

</body>
</html>

Nun liegt das Problem darin, dass das Bild (dummie_300x200.gif) nicht in der Tabelle (mit mit id "colLeft") vertikal zentriert wird, was aber zwingend notwendig ist. In dieser Tabelle sollen Bilder mit maximal 300px Breite und 225px Höhe eingefügt werden. Bilder, die dieser Größe nicht entsprechen, sind entweder 300px breit und dafür in der Höhe kleiner, oder sie sind 225px hoch, aber dafür in der Breite kleiner. (Ich hoffe das man versteht was ich meine. Die Tabelle ist im Grunde nur ein Platzhalter im 4:3 Format)
In den schwarzen div Bereich kommt ein kleines Menü, mit dem man zwischen mehreren Bildern wechseln kann, in der Form " < 1/3 > " (Pfeile zum navigieren und Zahlen für die Anzeige der aktuellen Seite).
Im IE wird das dummy-Bild horizontal zentriert, aber im FireFox funktioniert das nicht.
Findet jemand den Fehler ? Ich bin echt verzweifelt, evtl. hab ich nur ein Denkfehler.
 
Verwende anstelle des HTML-Attributs valign die CSS-Eigenschaft vertical-align.

Code: 
#colLeft{
height:255px;
width:300px;
vertical-align:middle;
}
HTML: 
<td id="colLeft"><img src="../dummi_300x200.gif" width="300" height="200" /></td>
Das Thema wird ins CSS-Forum verschoben.
 
Danke für den Tipp, hab ich getan, hat aber nix gebracht :( .
Komischer Weise funktionierts mit vertical-align:top, dass interpretiert FireFox so wie er soll (halt das Bild nach oben ausgerichtet).
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück