nicht angemeldet
CSS - Layer - Problem beim verändern der Fenstergröße
Hi,
ich sitz hier auf der Arbeit und habe ein Problem für das ich im Netz keinen Lösungsansatz finde.
Meine Seite ist mit Layern aufgebaut, dieser werden von einem großem main Layer umschlossen welcher das ganze zentriert darstellt. Nun sieht das alles auch super aus, insbesondere beim Firefox. Doch wenn ich bei allen anderen Browsern nun die Fenstergröße verändere springen meine Layer hin und her. Geht dabei nur um wenige Pixel. Wenn man jetzt im falschen Moment das Fenster los lässt bleibt das ganze auch noch so stehen und sieht total blöd aus.
Leider kann ich euch die Seite nicht zeigen da sie auf unserem Workserver liegt. Anbei jedoch mein CSS (bzw der Abschnitt wo die Layer definiert werden):
#main { text-align: left; width: 870px }
#top { background-image: url("../images/home/top.jpg"); visibility: visible; margin-left: 11px; position: absolute; top: 0; width: 845px; height: 162px }
#flash { visibility: visible; margin-left: 165px; position: absolute; top: 162px; width: 346px; height: 150px }
#rechtsflash { background-image: url("../images/home/rechtsflash.jpg"); visibility: visible; margin-left: 511px; position: absolute; top: 162px; width: 345px; height: 194px }
#unterflash { color: #fff; font-size: 13px; background-image: url("../images/home/unterflash.jpg"); visibility: visible; margin-left: 165px; padding-top: 29px; padding-left: 24px; position: absolute; top: 312px; width: 322px; height: 15px }
#navigation { visibility: visible; margin-left: -17px; position: absolute; top: 189px }
#content { visibility: visible; margin-left: 189px; position: absolute; top: 386px; width: 403px }
#topthema { background-image: url("../images/home/topbg.jpg"); background-repeat: repeat-y visibility: visible; margin-left: 619px; padding-right: 15px; position: absolute; top: 386px; width: 202px }
#footer {position: absolute; margin-bottom: 0px; width: 500px;}
und hier der body Teil der Seite:
<body bgcolor="white" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<div id="main">
<div id="top"></div>
<div id="flash">
<img src="images/home/flash.jpg" alt="" height="151" width="346" border="0"></div>
<div id="rechtsflash"></div>
<div id="unterflash">
Willkommen bei teamtec !</div>
<img src="images/home/leer.gif" alt="" height="5" width="870" border="0">
<div id="navigation"></div>
<div id="content">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<h1>CNC-Drehen in Perfektion!</h1>
<div class="text">
<p>Willkommen bei teamtec, dem Spezialanbieter von CNC-Komplettlösungen für den Maschinenbau! Dies ist ein Blindtext, der keinerlei Aussage hat und später gegen den eigentlichen Text ersetzt wird. Er dient lediglich der Darstellung und Visualisierung der späteren Schriftanmutung.</p>
<p></p>
</div>
</td>
<td class="abstandlinks" align="left" valign="top"><img src="images/home/linedot.jpg" alt="" height="177" width="3" border="0"></td>
<td align="left" valign="top">
<h2>Hausmesse bei teamtec</h2>
<div class="text">
(18.04.05) Vom 01.06. bis 04-06-05 findet in unserem Technologiezentrum in Alzenau die Hausmesse mit dem Schwerpunktthema “Smart-Turn” statt.<img src="images/home/newsseite.gif" alt="" height="11" width="16" border="0"></div>
<h2>Partnerschaft für den Erfolg</h2>
<div class="text">
(14.04.05) Neue AGW-Lösung in Co-Produktion von Öschger und und Oesterle + Partner für Biglia-Drehmaschinen.<img src="images/home/newsseite.gif" alt="" height="11" width="16" border="0"></div>
</td>
<td align="left" valign="top">
</td>
</tr>
</table>
<div id="footer"></div>
</div>
<div id="topthema">
</div>
</div>
</div>
</body>
Wäre toll wenn jemand ne Idee hat.