nicht angemeldet
Hallo, Mike,
Mein Problem: Eine Seite, die ein simples Layout aus <DIV>-Elementen und CSS enthält, wird im IE korrekt angezeigt und in den anderen Browsern verschiebt sich alles. Wenn ich es nun auf die anderen Browser ausrichte, ist es im IE verschoben... dabei sind das eigentlich ganz simple Sachen... exakte Ausrichtung mehrer DIV-Elemente ... mehr nicht.
Nein, simpel ist das keinesfalls, du hast das Layout sehr kompliziert mit CSS nachgebaut, dabei ging es eigentlich viel einfacher. Dein vielen div-Bereiche brauchst du gar nicht, die Ränder kannst du mit margin, padding und Hintergrundfarben erreichen und das Übrige kannst du viel einfacher lösen.
Hier einmal eine abgespeckte Version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<title>Jugendflirtchat Administration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" title="Autorenstylesheet">
html {margin:0; padding:0 0 0 20px; color:#336699; background-color:#666666; height:100%}
body {margin:0; padding:0; height:100%; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; color:#336699; background-color:#dcdcdc;}
#links {background-color:#cccccc; width:100%;}
#links th, #links td {width:33%; font-family:verdana,arial,helvetica,sans-serif; font-size:12px;text-align:center;}
#links th {padding:10px 0 5px 0;}
#links td {padding:0 0 10px 0;}
h1 {margin:0; padding:5px 0; font-size:16px; color:#cccccc; background-color:#666666; font-weight:bold;}
h2 {font-size:12px; font-weight:bold;}
#text {margin:0; padding:40px 0; color:inherit; background-color:#dcdcdc; text-align:center;}
a:link {font-weight:bold; color:#336699; background-color:transparent; text-decoration:none;}
a:visited {font-weight:bold; color:#336699; background-color:transparent; text-decoration:none;}
a:hover {font-weight:bold; color:#336699; background-color:transparent; text-decoration:underline overline;}
</style>
</head>
<body>
<h1>Jugendflirtchat Administration</h1>
<table border="0" cellspacing="0" cellpadding="0" id="links">
<tr>
<th><a href="asd">» Teammail «</a></th>
<th><a href="asd">» Hostdaten einsehen «</a></th>
<th><a href="asd">» Hostdaten administrieren «</a></th>
</tr>
<tr>
<td>Sendet eine E-Mail an alle Mitglieder<br>des Jugendflirtchat-Teams!</td>
<td>Erlaubt die vollstände Ansicht aller<br>Daten eines Team-Mitglieds!</td>
<td>Daten der Team-Mitglieder ändern,<br>aktualisieren oder löschen!</td>
</tr>
</table>
<div id="text">
<p><img src="http://www.jugendflirtchat.de/admin/adminlogo.jpg" width="287" height="249" alt="Logo mit drei Zahnrädern"></p>
<h2>Willkommen im Administrationsbereich von www.jugendflirtchat.de</h2>
</div>
</body>
</html>
Diese Version dürfte dieselbe Funktionalität haben (Opera/IE 6/Mozilla), die Anzeigefeinheiten kannst du natürlich noch anpassen. Im Übrigen haben ich die <div align="center"> herausgeworfen und konsequent mit CSS gearbeitet, das Markup wurde geschmälert und alle "Effekte" über CSS realisiert (leere div-Container haben ja keine Semantik).
Wenn ich etwas erläutern soll, frage nur.
Grüße,
Mathias
(Mal wieder keine Hilfe zur Selbsthilfe, ich gelobe Besserung, naja, ich hoffe auf Imitationslernen.)