[HTML] Warum zeigt der IE so nen Mist an?
- Ersteller Maxefix
- Erstellt am
Hallo,
jetzt hab ich weiß Gott wieviele Stunden damit verbracht so ne Seite für nen "Jugendforum" zu schreiben. Auch immer schön brav überprüft ob sich Fehler eingeschliechen haben, aber zum Glück ist die Seite immernoch XHTML 1.0 valide. Also schonmal gefreut das alles so gut aussieht und relativ einfach gelöst ist. Aber dann will ich natürlich überprüfen ob andere Browser die Seite auch so anzeigen wie sie sollen. Firefox stellt sie richtig dar (IMO sogar "richtiger" als Opera), aber der IE versagt natürlich wieder
Ich weiß nicht wie der auf so nen Stuß kommt 
Es geht um folgende Seite: http://www.faemb.de/playground/index.html
So zeigt sie der Firefox an:
http://www.faemb.de/playground/images/firefox.jpg
Und so unser geliebter IE:
http://www.faemb.de/playground/images/ie.jpg
Hier mal die CSS Datei:
Und hier die HTML-Datei:
Es stimmt doch alles?! Also was kann ich machen das der IE die Seite auch richtig anzeigt?
MFG Max
jetzt hab ich weiß Gott wieviele Stunden damit verbracht so ne Seite für nen "Jugendforum" zu schreiben. Auch immer schön brav überprüft ob sich Fehler eingeschliechen haben, aber zum Glück ist die Seite immernoch XHTML 1.0 valide. Also schonmal gefreut das alles so gut aussieht und relativ einfach gelöst ist. Aber dann will ich natürlich überprüfen ob andere Browser die Seite auch so anzeigen wie sie sollen. Firefox stellt sie richtig dar (IMO sogar "richtiger" als Opera), aber der IE versagt natürlich wieder
Ich weiß nicht wie der auf so nen Stuß kommt Es geht um folgende Seite: http://www.faemb.de/playground/index.html
So zeigt sie der Firefox an:
http://www.faemb.de/playground/images/firefox.jpg
Und so unser geliebter IE:
http://www.faemb.de/playground/images/ie.jpg
Hier mal die CSS Datei:
Code:
body
{
background-color:#E6F2FE;
text-align:center;
font-family:Verdana;
font-size:8pt
}
img
{
border-style:none
}
a:link
{
color:#333333;
text-decoration:underline
}
a:visited
{
color:#333333;
text-decoration:underline
}
a:hover
{
color:#FF9900;
text-decoration:none
}
a:active
{
color:#FF0000;
text-decoration:underline
}
table.gesamt
{
width:700px;
margin-bottom:5px
}
tr.darkrow
{
background-color:#41AABD
}
tr.lightrow
{
background-color:#B1D325
}
td
{
vertical-align:top;
font-family:Verdana;
font-size:8pt;
padding:5px
}
td.top
{
height:100px;
background-image:url(images/top.jpg);
border-style:solid;
border-color:#000000;
border-width:1px
}
td.menu
{
height:30px;
background-image:url(images/menu.jpg);
text-align:center;
vertical-align:middle;
border-style:solid;
border-color:#000000;
border-width:1px
}
td.inhalt
{
background-color:#FFFFFF;
padding:10px;
text-align:left;
border-style:solid;
border-color:#000000;
border-width:1px
}
td.fuss
{
background-color:#FFFFFF;
height:25px;
font-size:7pt;
text-align:right;
border-style:solid;
border-color:#000000;
border-width:1px
}
h1
{
font-size:14pt
}
h2
{
font-size:10pt
}
p.wichtig
{
color:red;
border-style:solid;
border-color:red;
border-width:1px
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>FAEMB Jugendforum Biberbach - News</title>
<meta name="content-language" content="de" />
<meta name="description" content="Homepage des Jugendforums Biberbachs" />
<meta name="keywords" content="FAEMB, faemb, Jugendforum, Biberbach" />
<meta name="author" content="Maximilian Walter, Meitingen" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="Icon.ico" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<table align="center" class="gesamt">
<tr>
<td class="top"><img width="1" height="1" src="images/empty.gif" alt="" /></td>
</tr>
<tr>
<td class="menu">
<a href="index.html">News</a> |
<a href="vorstand.html">Vorstandschaft</a> |
<a href="bilder/">Bilder</a> |
<a href="links.html">Links</a> |
<a href="gbs/">Gästebuch</a> |
<a href="impressum.html">Impressum</a>
</td>
</tr>
<tr>
<td class="inhalt"><h1>::: NEWS :::</h1>
<p class="wichtig">Anmerkung: Zur Zeit hat der Internet Explorer von Microsoft noch ein paar Probleme die Seite richtig darzustellen. Am Besten ihr nutzt den <a href="http://www.mozilla.com/firefox/" target="_blank">Mozilla Firefox</a> oder <a href="http://www.opera.com/" target="_blank">Opera</a>, die können immerhin validen Code richtig darstellen...<br /><br />Danke für euer Verständnis :-)<br /><br /><a href="images/ie.jpg" target="_blank">Falsch</a> <-> <a href="images/firefox.jpg" target="_blank">Richtig</a></p>
<h2>Intern: Neues Gästebuch und eine neue Bildergalerie online</h2>
<blockquote>Die komplette Homepage wurde überarbeitet und ein <a href="gbs/">Gästebuch</a> eingebaut. Außerdem gibt's jetzt eine neue <a href="bilder/">Bildergalerie</a>. Viel Spaß beim Fotos gucken :-)</blockquote>
<hr />
<h2>9. Vollversammlung</h2>
<blockquote><table style="width:100%">
<tr>
<td style="border-style:none"><img width="300" height="225" src="images/neuntevv.jpg" alt="Neunte Vollversammlung" /></td>
<td style="border-style:none">Die 9. Vollversammlung war ein sehr gelungener Abschied für alle ausgeschiedenen Vorstandsmitglieder und
gleichzeitig ein perfekter Einstand für die neue Vorstandschaft, die sich wie folgt zusammen setzt:<br /> <br />
<b>1. Vorsitzende:</b> Katja Aschenmeier<br /><b>2. Vorsitzende:</b> Ingrid Kinlinger<br /><b>Kassierer:</b> Stephan Schuster<br />
<b>Schriftführer:</b> Max Treischl<br /><b>Beisitzer:</b> Barbara Merli, Franziska Strobel,<br />Maximilian Kraus und Ulrich Schuster</td>
</tr>
</table></blockquote>
<hr />
<div style="text-align:center"><img width="75" height="20" src="/tinc?key=NVSZccSn" alt="Besucherzaehler" /></div>
<div style="text-align:right">
<a href="http://t.extreme-dm.com/?login=faemb" target="_blank"><img width="41" height="38" src="http://t1.extreme-dm.com/i.gif" name="EXim" border="0" alt="eXTReMe Tracker" /></a>
<script type="text/javascript" language="javascript1.2"><!--
EXs=screen;EXw=EXs.width;navigator.appName!="Netscape"?
EXb=EXs.colorDepth:EXb=EXs.pixelDepth;//-->
</script><script type="text/javascript"><!--
var EXlogin='faemb' // Login
var EXvsrv='s10' // VServer
navigator.javaEnabled()==1?EXjv="y":EXjv="n";
EXd=document;EXw?"":EXw="na";EXb?"":EXb="na";
EXd.write("<img src=http://e1.extreme-dm.com",
"/"+EXvsrv+".g?login="+EXlogin+"&",
"jv="+EXjv+"&j=y&srw="+EXw+"&srb="+EXb+"&",
"l="+escape(EXd.referrer)+" height=1 width=1>");//-->
</script><noscript><img width="1" height="1" src="http://e1.extreme-dm.com/s10.g?login=faemb&j=n&jv=n" alt="" />
</noscript>
</div>
</td>
</tr>
<tr>
<td class="fuss"><a href="version.html">Version 1.1 <b>BETA</b></a></td>
</tr>
</table>
</body>
</html>Es stimmt doch alles?! Also was kann ich machen das der IE die Seite auch richtig anzeigt?
MFG Max
Zuletzt bearbeitet:
tomturbo
Technische Administration, Dinosaurier
Hi,
zu allererst ohne Deinen code auf Richtigkeit zu checken kann ich Dir die
allgemeine Empfehlung geben, dass auf Tables als Stilelement bei xhtml
verzichten solltest.
Verschiedene Browser haben unterschiedliche default Werte für borders paddings margins
usw. da wirst Du verrückt.
Ich persönlich verwende folgendes in meinen css'en um das mal los zu werden:
Das inkludiere ich in meiner main vor allen meinen Definitionen.
Da wird zwar ganz schön was ausgeschaltet aber so sind wenigstens alle Browser
am selben Stand.
lg
__tom
zu allererst ohne Deinen code auf Richtigkeit zu checken kann ich Dir die
allgemeine Empfehlung geben, dass auf Tables als Stilelement bei xhtml
verzichten solltest.
Verschiedene Browser haben unterschiedliche default Werte für borders paddings margins
usw. da wirst Du verrückt.
Ich persönlich verwende folgendes in meinen css'en um das mal los zu werden:
PHP:
/*** undo default browser styles
******************************************************************/
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */
/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }
/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, dl, dt, dd
{ margin:0; padding:0 }
/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }
/* de-italicize address */
address { font-style:normal }
/* more varnish stripping as necessary... */
fieldset {
border: none 0;
}Das inkludiere ich in meiner main vor allen meinen Definitionen.
Da wird zwar ganz schön was ausgeschaltet aber so sind wenigstens alle Browser
am selben Stand.
lg
__tom
feelx
Grand Admiral Special
Meiner Meinung nach haben wir es hier mit dem Box-Model Problem zu tun. Du definierst z.B. td.top mit der height=100px. Zuvor weist du aber td ein 'padding: 5px' zu.
Der IE addiert diesen Wert (jeweils 5px oben und unten sowie rechts und links) - daraus resultiert eine Höhe von 110px und auch eine um 10px grössere "width". Das ist zwar falsch, aber der IE macht's trotzdem![:]](https://www.planet3dnow.de/vbulletin/images/smilies/rolleyes.gif "Augen rollen (sarkastisch) :]")
Probiers mal mit margin: 5px; ...
Was mich jetzt noch irritiert, ist dass auch der IE7 (beta2) die Seite falsch darstellt...bisher war ich der Meinung, dort sei das Problem gelöst...
Aber ich schaue es mir an und melde mich nochmal
_________________________________________________________
*edit*
Jo es stimmt tatsächlich - margin: 5px; hilft schon einiges - allerdings wird der border (jeweils solid 1px black) ebenfalls dazugezählt. Ich würde daher mittels 'conditional comment' ein "iefix.css" hinzufügen - Wichtig ist, dass es _nach_ dem offiziellen css geschieht.
PS: Es empfielt sich vielleicht die o.g. Zeilen via php-include zu machen, dann kannst du bei allfälliger besser Darstellung von IE7 (was bisher nicht der Fall ist...) zentral abändern - sonst musst du in jedem .html Hand anlegen.. z.B. bezeichnet
<!--[if gt IE 6]> nur noch IEs grösser als Version 6 - also version 7 und ff.
im iefix.css kannst du dann die Masse wie folgt "overriden", ohne alle Styles erneut angeben zu müssen :
Der IE addiert diesen Wert (jeweils 5px oben und unten sowie rechts und links) - daraus resultiert eine Höhe von 110px und auch eine um 10px grössere "width". Das ist zwar falsch, aber der IE macht's trotzdem
Probiers mal mit margin: 5px; ...
Was mich jetzt noch irritiert, ist dass auch der IE7 (beta2) die Seite falsch darstellt...bisher war ich der Meinung, dort sei das Problem gelöst...
Aber ich schaue es mir an und melde mich nochmal
_________________________________________________________
*edit*
Jo es stimmt tatsächlich - margin: 5px; hilft schon einiges - allerdings wird der border (jeweils solid 1px black) ebenfalls dazugezählt. Ich würde daher mittels 'conditional comment' ein "iefix.css" hinzufügen - Wichtig ist, dass es _nach_ dem offiziellen css geschieht.
Code:
<!--[if IE]>
<link href="iefix.css" type="text/css" rel="stylesheet" />
<![endif]--><!--[if gt IE 6]> nur noch IEs grösser als Version 6 - also version 7 und ff.
im iefix.css kannst du dann die Masse wie folgt "overriden", ohne alle Styles erneut angeben zu müssen :
Code:
table.gesamt: {
width:688px; /* 700px - 5 - 5 - 1 -1 = 688px */
}
td.top {
height: 88px; /* 100px - 5 - 5 - 1 - 1 = 88 px */
}
td.menu {
height: 18px; /* 30px - 5 - 5 - 1 - 1 = 18px */
}
Zuletzt bearbeitet:
Danke für eure Hilfe
Der Lösungsvorschlag von feelx hat funktioniert
Und danke für den Tipp tomturbo, habs auch gleich übernommen
MFG Max
.
.
Edit:
Hab ganz vergessen auf den ersten Teil von tomturbos Beitrag einzugehn
Und um nochmal auf das Include zurückzukommen. Es wäre ja eigentlich möglich alle Dinge die immer gleich sind auszulagern, also den Kopf, das Menü und die Fußzeile. Aber wie krieg ich das hin das das Menü immer funktioniert?
* Naja, mal bissl experimentieren...
Der Lösungsvorschlag von feelx hat funktioniert
Und danke für den Tipp tomturbo, habs auch gleich übernommen
Hmm...naja, mit PHP hab ich noch nicht allzu viel am Hut, aber ansich kann man ja einfach nen "php-Tag" in <head> einfügen und die Datei in *.php umbennen, dann müsste es ja gehn, oder?
MFG Max
.
.
Edit:
Hab ganz vergessen auf den ersten Teil von tomturbos Beitrag einzugehn
Hmm..stimmt, mit CSS kann man Absätze (<p>) genauso gut formatieren. Ich glaub das änder ich auch mal, noch ist die Seite relativ klein.
Und um nochmal auf das Include zurückzukommen. Es wäre ja eigentlich möglich alle Dinge die immer gleich sind auszulagern, also den Kopf, das Menü und die Fußzeile. Aber wie krieg ich das hin das das Menü immer funktioniert?
* Naja, mal bissl experimentieren...Ähnliche Themen
