Mal wieder Tabelle zentrieren - Problem beim FF

Status
Nicht offen für weitere Antworten.

drathy

Mitglied
Hallo!

(Hab diesen Post schon in einem anderen Thread gemacht, der aber, wie mir eben aufgefallen ist, als erledigt markiert war - daher mache ich nun mal nen neuen Thread zu altem Thema auf. :eek: )

Ich habe ein Problem mit der zentrierten Positionierung einer Tabelle. Folgender Code in einer externen css-Datei wird für die Positionierung der Tabelle verwendet:

Code:
.blockMain           {
width:1004px;
border-style:none;
height:642px;
position:absolute; 
top:50%; 
left:50%;
margin-top:-321px;
margin-left:-502px;}

Nun Folgendes: Im IE und Safari wird die Tabelle, sprich mein eigentliches Layout bei höheren Auflösungen korrekt zentriert angezeigt, nur der Firefox hat irgendwie Probleme damit...folglich erscheint das Layout oben links in der Ecke...

Kann mir jemand sagen, wo das Problem liegt bzw. liegen könnte
Ich habe bereits einige verschiedene Lösungsansätze getestet, die ich über die Suche gefunden habe, aber leider hat nichts geklappt...

Hier noch der Code der Tabelle, falls der benötigt wird:

Code:
<table border="0" cellpadding="0" cellspacing="0" class="blockMain"  id="tabelle">
  <tr>
    <td colspan="3" class="blockTop" id="wBlockTop">
      <?PHP include_once($_SERVER["DOCUMENT_ROOT"]."/wDeutsch/wLayout/structure/top_home.php");?>
	  </td>
  </tr>
  <tr>
    <td valign="top">
      <div style="padding:2px;padding-left:8px"><?PHP wShowEditbutton("", "");?></div>

     Hier der Content...

    </td>
    </tr>
  <tr>
    <td colspan="3" class="blockBottom" id="wBlockBottom">
      <?PHP include_once($_SERVER["DOCUMENT_ROOT"]."/wDeutsch/wLayout/structure/bottom.php");?>
    </td>
  </tr>
</table>

Ich hoffe jemand hat ne Idee - ich sitze nun schon über einen Tag an dem Problem und bekomme es einfach nicht hin bzw. finde den Fehler einfach nicht... :(
 
Bei mir zentriert der FireFox (1.0.2) die Tabelle im Browserfenster korrekt :confused:

Da die Dimensionen der Tabelle (sehr) groß gewählt sind, verschieben sich (bei verkleinertem Browserfenster) die Elementgrenzen in den unsichtbaren Bereich des Browserfensters.

Hier mal ein Test-Beispiel mit kleineren Dimensionen, daß FF alles korrekt darstellt:

Code:
table.blockMain
{
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
top: 50%;
height: 400px;
margin-top: -200px;
border: 1px solid #000;
}
 
Zuletzt bearbeitet von einem Moderator:
Danke für Deine Antwort!
Das ist ja ein Ding! Komisch...Ich hab hier den Firefox 1.0.7 - ob es damit zusammenhängen kann

Ich hatte nun testweise mal eine Div-Container um die Tabelle gebastelt und damit hat das zentrieren dann auch geklappt. Problem daran war allerdings, dass bei geringeren Auflösungen (z.B. 800x600) ein Teil meines Layoutes auf allen Seiten abgeschnitten wurde...
Wie ist ein solches Problem am besten zu lösen - via JavaScript
 
drathy hat gesagt.:
Ich hatte nun testweise mal eine Div-Container um die Tabelle gebastelt und damit hat das zentrieren dann auch geklappt. Problem daran war allerdings, dass bei geringeren Auflösungen (z.B. 800x600) ein Teil meines Layoutes auf allen Seiten abgeschnitten wurde...
Wie ist ein solches Problem am besten zu lösen - via JavaScript
Indem du vielleicht über ein Seitenlayout nachdenkst, das die kleineren Auflösungen berücksichtigt ;-]
 
Also, ich habe es nun zwar mittels <div>-Container hinbekommen, dass mein Layout auch im FF zentriert wird, aber es hat sich gleich ein neues Problem aufgetan:

Ist das Anzeigefeld nun kleiner (als bei einer Auflösung von 1024x768), dann wird mein Layout durch die zentrierte Darstellung an allen Seiten beschnitten.

Ich habe bereits versucht, das Problem mittels JavaScript zu lösen, aber irgendwie haut das nicht 100%ig hin. Kann mir jemand sagen, ob am Code vielleicht was falsch ist


Code:
window.onresize = function() {
 var o = document.getElementById('tabelle'); var x, y;

 if (self.innerHeight) { y = self.innerHeight; x = self.innerWidth; }
 else if (document.documentElement && document.documentElement.clientHeight) { y = document.documentElement.clientHeight; x = document.documentElement.clientWidth; }
 else if (document.body) { y = document.body.clientHeight; x = document.body.clientWidth; }

 o.style.marginTop = (y < o.offsetHeight) ? 0 : Math.round(o.offsetHeight/2)*-1+'px';
 o.style.top = (y < o.offsetHeight) ? 0 : '50%';
 o.style.marginLeft = (x < o.offsetWidth) ? 0 : Math.round(o.offsetWidth/2)*-1+'px';
 o.style.left = (x < o.offsetWidth) ? 0 : '50%';}

Wäre super, wenn jemand ne Idee dazu hätte...
Oder hat sogar jemand schonmal ein solches Script erstellt

Oder besteht die Möglichkeit, mittels Script die Auflösung des Users abzufragen und dementsprechende auf eine Zentrierung zu verzichten

Jaja, Fragen über Fragen...danke schonmal im Voraus!
 
michaelsinterface hat gesagt.:
Indem du vielleicht über ein Seitenlayout nachdenkst, das die kleineren Auflösungen berücksichtigt ;-]

Leuchtet ein - Problem ist nur, dass ich ein CMS verwende und das eben jenes die Struktur vorgibt...und dazu kommt dann noch, dass ich auf dem Gebiet des Webdesigns (noch) nicht so erfahren bin und daher auch nicht so wirklich wüsste, wie ich an sowas rangehen muss...
Du sprichst doch sicherlich von einer dynamischen Seite, oder?
 
Erstmal danke für den Hinweis!
hela hat gesagt.:
Mir ist nur unklar, wozu man bei einer so großen Elementbreite überhaupt noch eine Zentrierung braucht. Da ist es m.E. wirklich wichtiger, dass die Scrollfunktion nicht gestört wird.

Ich brauche es, da die Seite für eine Auflösung von 1024x768px konzipiert ist (auch wenn man sowas normalerweise nicht machen sollte...). Wenn nun aber jemand die Page mit ner 1600x1200er Auflösung anguckt, ist alles häßlich oben links angeordnet...daher die Zentrierung...
 
drathy hat gesagt.:
Du sprichst doch sicherlich von einer dynamischen Seite, oder?
Nein, ich dachte an ein schmäleres Layout, das in den kleineren Bildschirmauflösungen bzw. verkleinerten Browserfenster 'user-friendly' angezeit wird ;-]

Aber wenn dir dein CMS (Content Management System) das Seitenlayout mit grosser Breite vorgibt .....
 
Status
Nicht offen für weitere Antworten.
Zurück