App installieren
How to install the app on iOS
Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature may not be available in some browsers.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder ein alternativer Browser verwenden.
Du solltest ein Upgrade durchführen oder ein alternativer Browser verwenden.
[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
- Mitglied seit
- 30.11.2005
- Beiträge
- 9.455
- Renomée
- 665
- Standort
- Österreich
- Aktuelle Projekte
- Universe@HOME, Asteroids@HOME
- Lieblingsprojekt
- SETI@HOME
- Meine Systeme
- Xeon E3-1245V6; Raspberry Pi 4; Ryzen 1700X; EPIC 7351
- BOINC-Statistiken
- Mein Laptop
- Microsoft Surface Pro 4
- Prozessor
- R7 5800X
- Mainboard
- Asus ROG STRIX B550-A GAMING
- Kühlung
- Alpenfön Ben Nevis Rev B
- Speicher
- 2x32GB Mushkin, D464GB 3200-22 Essentials
- Grafikprozessor
- Sapphire Radeon RX 460 2GB
- Display
- BenQ PD3220U, 31.5" 4K
- SSD
- 1x HP SSD EX950 1TB, 1x SAMSUNG SSD 830 Series 256 GB, 1x Crucial_CT256MX100SSD1
- HDD
- Toshiba X300 5TB
- Optisches Laufwerk
- Samsung Brenner
- Soundkarte
- onboard
- Gehäuse
- Fractal Design Define R4
- Netzteil
- XFX 550W
- Tastatur
- Trust ASTA mechanical
- Maus
- irgend eine silent Maus
- Betriebssystem
- Arch Linux, Windows VM
- Webbrowser
- Firefox + Chromium + Konqueror
- Internetanbindung
-
▼300
▲50
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
- Mitglied seit
- 11.11.2001
- Beiträge
- 4.870
- Renomée
- 74
- Standort
- near Zurich
- Mein Laptop
- Macbook Pro 15.4" 2.26 GHz
- Prozessor
- Intel Core i7-920
- Mainboard
- Asus Rampage II Extreme
- Kühlung
- Noctua NH-U12P
- Speicher
- 6 x 2GB Corsair 1333
- Grafikprozessor
- Zotac Geforce 260 (200b)
- Display
- 26", NEC 2690 WUXI, 1920x1200
- HDD
- 1 TB - WD1002 FBYS
- Optisches Laufwerk
- Lite-on - lautes ding :)
- Soundkarte
- X-FI Supreme
- Gehäuse
- LianLi PC A17, 2x NB Multiframe S-Series MF12-S1
- Netzteil
- Enermax 82+Modu - 625W
- Betriebssystem
- Vista 64bit / Ubuntu 64bit
- Verschiedenes
- Beim DVD-Brenner musste es schnell gehen (Lieferbar und günstig sein.) , Suche aber was leiseres
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
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?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..
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.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.
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
- Antworten
- 0
- Aufrufe
- 496
- Antworten
- 0
- Aufrufe
- 1K
- Antworten
- 0
- Aufrufe
- 1K
- Antworten
- 0
- Aufrufe
- 2K
- Antworten
- 0
- Aufrufe
- 1K