nicht angemeldet
Internetexplorer Zerstört Aufbau
HI,
mein Problem ist, dass der Internetexplorer
mein Design komplett zerstört. Lädt die Hintergrund-
header grafik nicht mehr. Rahmen um die Navi-
bilder usw.OPera & Firefox stellen es korrekt da.
Hoffe es kann mir jemand helfen.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<title>START</title>
<style type="text/css">
.footer
{
margin-top: 5px;
background: #003D50;
border: 1px solid black;
padding: 5px 5px 5px 5px;
text-align: center;
}
.footer a:link, .footer a:hover, .footer a:visited, .footer a:active
{
color: #FFF;
}
.content
{
text-align: center;
background: #003d50;
width: 800px;
margin: 0px auto;
}
.inhaltsbox
{
margin-left: 0px;
margin-right: 0px;
margin-bottom: 15px;
float: left;
background: url('/img/text_bg.jpg') repeat-y;
}
.inhalt
{
float: left;
width: 375px;
text-align: justify
;background: #e0f1fb;
margin: 1px 0 0 24px;
padding: 5px;
border: 1px solid #000;"
}
.katbild
{
width: 180px;
background: url('/img/kat_bild_start.jpg') no-repeat;
height: 343px;
margin: 0 0 0 420px;
border: 1px solid #000;
}
.textbild
{
float: left;
width: 100px;
padding-right: 10px;
}
a:link, a:hover,a:active,a:visited
{
color: #000;
text-decoration: underline;
}
body
{
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Tahoma;
font-size: 8pt;
text-align: center;
}
h4
{
margin-top: 0px;
font-size: 14pt;
text-decoration: none;
}
.kontaktform td
{
vertical-align: top;
text-align: right;
}
.navi td a img
{
border: 0px;
}
.navi
{
width: 800px;
height: 291px;
background: url('/img/header.jpg');
}
.navi div
{
width: 740px;
text-align: left;
margin-left: 28px;
margin-top: 150px;
}
.navibild
{
width: 68px;
text-align: center;
}
.navitext, .navitext a:link, .navitext a:hover, .navitext a:active, .navitext a:visited
{
text-decoration: none;
font-size: 8pt;
background: #CBDFE6;
text-align: center;
font-family: Impact;
color: #053D50;
}
.navitext a
{
display: block;
}
.navi2
{
display: block;
float: right;
margin-right: 25px;
margin-top: 0px;
background: url('/img/navi_bg.jpg') #F00;
height:343px; width: 161px;
border: 1px solid #000;
}
.navi2 a:link, .navi2 a:hover, .navi2 a:visited, .navi:active
{
color: #000;
}
.navi2 div
{
margin: 5px 12px 0 0;
}
.navi2bild
{
float: left;
width: 50px;
}
.navi2ueberschrift
{
color: #FFF;
font-size: 10.5pt;
text-align: left;
}
.navi2text
{
font-size: 8pt;
text-align: justify;
padding: 0 5px 0 5px;
margin-top: -10px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="content" style="float: left;" align="center">
<!-- Header mit Navi -->
<div class="navi">
<div>
<table align="center">
<tr>
<td class="navibild"><a href="index2.php?rubrik=start&lang=de"><img alt="bild" src="img/icon_home.png" /></a></td>
<td class="navibild"><a href="index2.php?rubrik=wo&lang=de"><img alt="bild" src="img/icon_schild.png"/></a></td>
<td class="navibild"><a href="index2.php?rubrik=einladung&lang=de"><img alt="bild" src="img/icon_einladung.png"/></a></td>
<td class="navibild"><a href="index2.php?rubrik=tickets&lang=de"><img alt="bild" src="img/icon_ticket.png"/></a></td>
<td class="navibild"><a href="index2.php?rubrik=hotel&lang=de"><img alt="bild" src="img/icon_hotel.png"/></a></td>
<td class="navibild"><a href="index2.php?rubrik=zeitplan&lang=de"><img alt="bild" src="img/icon_zeitplan.png"/></a></td>
<td class="navibild"><a href="index2.php?rubrik=shows&lang=de"><img alt="bild" src="img/icon_shows.png"/></a></td>
<td class="navibild"><a href="index2.php?rubrik=sponsoren&lang=de"><img alt="bild" src="img/icon_sponsor.png"/></a></td>
<td class="navibild"><a href="index2.php?rubrik=presse&lang=de"><img alt="bild" src="img/icon_presse.png"/></a></td>
<td class="navibild"><a href="index2.php?rubrik=gaeste&lang=de"><img alt="bild" src="img/icon_gaeste.png" /></a></td>
</tr>
<tr>
<td class="navitext"><a href="index2.php?rubrik=start&lang=de">Start</a></td>
<td class="navitext"><a href="index2.php?rubrik=wo&lang=de">Wo?</a></td>
<td class="navitext"><a href="index2.php?rubrik=einladung&lang=de">Einladung</a></td>
<td class="navitext"><a href="index2.php?rubrik=tickets&lang=de">Tickets</a></td>
<td class="navitext"><a href="index2.php?rubrik=hotel&lang=de">Hotel</a></td>
<td class="navitext"><a href="index2.php?rubrik=zeitplan&lang=de">Zeitplan</a></td>
<td class="navitext"><a href="index2.php?rubrik=shows&lang=de">Shows</a></td>
<td class="navitext"><a href="index2.php?rubrik=sponsoren&lang=de">Sponsoren</a></td>
<td class="navitext"><a href="index2.php?rubrik=presse&lang=de">Presse</a></td>
<td class="navitext"><a href="index2.php?rubrik=gaeste&lang=de">Gästebuch</a></td>
</tr>
</table>
</div>
</div> <!-- Header ENDE -->
<!--Inhalt Anfang -->
<div class="inhaltsbox">
<div class="inhalt">
<p style='text-align: justify ;'><font style="font-size: 11pt"><b>Liebe Rock´n`Roll Paare, liebe Eltern und Schlachtenbummler, </b></font>
<br/>
Hier steht viel Text!
<br/>
</p> </div>
</div>
<!-- Inhalt ENDE -->
<!-- Navi2 Anfang -->
<div class="navi2">
<div>
<img alt="bild" src="img/kasten.png" class="navi2bild"/><a href="http://www.google.de"><h2 class="navi2ueberschrift">Google</h2></a>
<br /><a href="http://www.google.de"><p class="navi2text">Die tollste Suchmaschiene der Welt</p></a>
<hr />
<img alt="bild" src="img/kasten.png" class="navi2bild"/><a href="http://www.google.de"><h2 class="navi2ueberschrift">Google</h2></a>
<br /><a href="http://www.google.de"><p class="navi2text">Die tollste Suchmaschiene der Welt</p></a>
<hr />
<img alt="bild" src="img/kasten.png" class="navi2bild"/><a href="http://www.google.de"><h2 class="navi2ueberschrift">Google</h2></a>
<br /><a href="http://www.google.de"><p class="navi2text">Die tollste Suchmaschiene der Welt</p></a>
</div>
</div>
<!-- Navi 2 ENDE --> <!-- Navi 2 ENDE -->
<div class="katbild">
<br />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="footer"><a href="index2.php?rubrik=impresseum&lang=de">Impresseum</a> | <a href="index2.php?rubrik=kontakt&lang=de">Kontakt</a></div>
</td>
</tr>
</table>
</body>
</html>
-
mein Problem ist, dass der Internetexplorer mein Design komplett zerstört.
ggf liegts an den html und css-fehlern (vermutung)
Lädt die Hintergrund header grafik nicht mehr.
kann ich in jedem browser reproduzieren - mag aber daran liegen, dass ich deine grafiken schlichtweg nicht zur verfügung habe
OPera & Firefox stellen es korrekt da.
unwahrscheinlich, wenn der code fehlerhaft ist - sie stellen es höchsten wie gewünscht dar, von richtig kann hier keine rede sein
behebe deine html und vor allem deine css fehler - sollte sich das problem damit nicht gelöst haben, poste bitte ein funktionierendes online-bespiel MIT grafiken
-
laut Validierung ist mein CSS
korrekt. Wenn ich die Elemente
mit style anspreche und nicht
class verwende funktioniert es!
Das erstaunt mich dabei am meisten.gruß Tarek
-
laut Validierung ist mein CSS korrekt.
sagt wer? der von mir verwendete validator zeigt zumindest 2 fehler
Wenn ich die Elemente mit style anspreche und nicht class verwende funktioniert es!
http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=spezifität?
Das erstaunt mich dabei am meisten.
magie oder hochtechnologie ist meistens erstaunlich, bis man den "trick" dahinter kennt :)
-
Hi,
laut Validierung ist mein CSS korrekt.
Nein, ist es nicht. Wenn ich den Inhalt des style-Elements aus deinem Posting kopiere und mit dem CSS-Validator per copy&paste validiere, dann weist der auf einen eklatanten Fehler hin.
Und dein HTML enthaelt ebenfalls Fehler, darunter einige grobe Verschachtelungsfehler.
Also beseitige diese bitte.
Und dann melde dich erneut, vorzugsweise mit einem Online-Beispiel [1], wenn das Problem weiterhin bestehen sollte.
[1] Den Hinweis hattest du ja bereits bekommen; gerade was Probleme mit der Anzeige von Grafiken angeht, sind diese fuer uns ja schlecht nachvollziehbar, wenn uns die Grafiken nicht vorliegen.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“
-
-
-
Hallo,
Lädt die Hintergrundheader grafik nicht mehr.
lass die einfachen Anführungszeichen mal weg...
Rahmen um die Navibilder
img { border-width:0; }
usw.
lad das mal irgendwo hoch, da kann man dann mehr sagen, wenn man sieht wie's ausschaut...
vg ichbinich
--
alles wird gut... -
-
Nur mal ein genereller Hinweis, der mir bereits sehr viel Ärger erspart hat... Füge dies am Anfang deiner CSS Datei ein:
* { margin:0px; padding:0px; }Das setzt alle Standardwerte auf null und vermeidet so ungewollte abstände an Stellen an denen du nichts definiert hast... ansonsten: Browserweiche.
<style type="text/css">@import url(screen.css) all;</style> <!--[if IE]> <style type="text/css">@import url(ie.css);</style> <![endif]-->Versuch das mal ;)
Reynardine
-
Das setzt alle Standardwerte auf null und vermeidet so ungewollte abstände an Stellen an denen du nichts definiert hast... ansonsten: Browserweiche.
und was ist mit allen anderen eigenschaften die in den browser defaults oder in den benutzerstylesheets vorliegen?
entweder ganz resetten oder garnicht (imho besser)
-