HP wird im IE falsch angezeigt

BadGirl · 12. Oktober 2008

Hallo

Bin gerade dabei meine Seite neu auf zu bauen bzw. wieder zu machen, weil nach meinem FP-Crash alle Dateien weg sind. So nun hab ich die Startseite eigentlich so weit fertig, doch im IE wird sie falsch angezeigt.

Was ist das und warum wird die falsch angezeigt?

Schweini · 12. Oktober 2008

Stells doch mal online - aber ich vermute, der IE zeigts falsch an. Da könntest Du recht haben. Ist mir als überzeugter Opera-Nutzer auch schon aufgefallen (könnte mal guggn), bzw Quelltextprofis könnten das mal ansehen.

-> Stells mal online, Melissa

EDIT: Im Opera wirds tatsächlich auch richtig angezeigt.

BadGirl · 12. Oktober 2008

Hab es mal auf den Webspace geladen hier http://www.skinsforicq.de/test/index.html

So und hier der Quelltext

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Skins for ICQ :: Index</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta name="keywords" content="" />
</head>
<body>
<table width="950" align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td class="header" colspan="4" height="95"></td></tr>
<tr><td class="navi01" colspan="4" height="24" align="left">Startseite</td></tr>
<tr><td class="navi02" colspan="4" height="20" align="right">| Skins | Tutorials | Links | LinkUs | Kontakt | Impressum |</td></tr>
<tr>
<td class="mid01" rowspan="4"></td>
<td class="mid02" colspan="2" height="30" align="right"></td>
<td class="mid03" rowspan="4"></td>
</tr>
<tr>
<td class="mid02" colspan="2">
<table width="908" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="box01" width="20" height="32"></td>
<td class="box02" width="864" height="32">Neue ICQ Skins</td>
<td class="box03" width="24" height="32"></td>
</tr>
<tr>
<td class="box04" width="20" height="32"></td>
<td class="box05" width="864" height="32"></td>
<td class="box06" width="24" height="32"></td>
</tr>
<tr>
<td class="box07" width="20" height="16"></td>
<td class="box08" width="864" height="16"></td>
<td class="box09" width="24" height="16"></td>
</tr>
<tr>
<td class="mid02" colspan="3" height="100"></td>
</tr>
<tr>
<td class="box01" width="20" height="32"></td>
<td class="box02" width="864" height="32">News</td>
<td class="box03" width="24" height="32"></td>
</tr>
<tr>
<td class="box04" width="20" height="32"></td>
<td class="box05" width="864" height="32"></td>
<td class="box06" width="24" height="32"></td>
</tr>
<tr>
<td class="box07" width="20" height="16"></td>
<td class="box08" width="864" height="16"></td>
<td class="box09" width="24" height="16"></td>
</tr>
</table>
</td>
</tr>
<tr><td class="mid02" colspan="2" height="20"></td></tr>
<tr>
<td class="mid02" colspan="2" height="40">
<div align="center">
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" /></a>
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS ist valide!" /></a>
</div>
</td>
</tr>
<tr>
<td class="footer" colspan="4" height="42">
<div align="right">Copyright (c) 2006-2008 Melissa &quot;Shona&quot; T. - www.skinsforicq.de - All  rights reserved</div></td>
</tr>
</table>
</body>
</html>

BadGirl · 12. Oktober 2008

und wie sieht's aus?

Willforce · 12. Oktober 2008

Du solltest auf den tabellenmist verzichten ud dir die arbeit machen mit div's arbeiten. Die ganezn größenangaben gehören nicht in den quellcode sondern in eine css datei.
Dann hast Du nämlich die möglichkeit für den IE eine Browserweiche einzubauen, welche die Größenwerte ausgiebt, die für den IE notwendig sind um deine Seite richtig anzeigen zu lassen.

Der scheiß IE macht immer solche Probleme beim Webdesign. Hat mich auch schon viele Nerven gekostet.

Also immer schön mit CSS arbeiten. Als Hilfe empfehle ich dir CSS4YOU.

Spacerat · 13. Oktober 2008

Ausserden gehört zu Größenwerten eine Größenangabe/Maßeinheit: px.
Sonst rechnet der Browser z.B. in pt, was dann ein anderes Ergebnis bringt.

BadGirl · 13. Oktober 2008

Zitat von Willforce: ↑

Du solltest auf den tabellenmist verzichten ud dir die arbeit machen mit div's arbeiten. Die ganezn größenangaben gehören nicht in den quellcode sondern in eine css datei.
Dann hast Du nämlich die möglichkeit für den IE eine Browserweiche einzubauen, welche die Größenwerte ausgiebt, die für den IE notwendig sind um deine Seite richtig anzeigen zu lassen.

Der scheiß IE macht immer solche Probleme beim Webdesign. Hat mich auch schon viele Nerven gekostet.

Also immer schön mit CSS arbeiten. Als Hilfe empfehle ich dir CSS4YOU.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Ich arbeite doch mit CSS, sieht man doch auch im Quelltext da ist eine "stylesheet.css" eingebunden. Ich kann auch CSS das ist nicht das Problem, das Problem war das die Angaben darin ignoriert wurden, beim ersten Versuch, und ich sie dann wieder in den HTML-Code reingeschrieben habe.

@Spacerat
Ich arbeite so schon seit Jahren und habe es auch nicht anders gelernt. Damals als ich anfing musste man nichts dahinter schreiben und es war dann Pixel, erst wenn es eine andere Einheit sein sollte musste man die angeben.

Edit:
So habe nun alle Größenangaben in die CSS geschrieben, doch der IE ignoriert folgende.
HTML:
td.mid01 {
	background:url(images/mitte_links.png);
	width: 8px;
}

td.mid03{
    background:url(images/mitte_rechts.png);
    width: 9px;
}
Das ist der Linke und der rechte Rand und da wird die Breite einfach ignoriert. Würden die nicht ignoriert werden, dann würde eigentlich alles stimmen, aber der IE setzt die Breite so wie er will.

MFG
BadGirl

Willforce · 13. Oktober 2008

Ich habe dein Code mal etwas überarbeitet und alles in divs gesezt. Du musst lediglich deine Container noch in den Contend einsetzen.

EDIT: Habe die erste Inhaltsbox noch angefertigt und den footer noch geändert. Die Inhaltsbox, kannst du ja kopieren oder in eine Schleife setzen.

HTML Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />

<link rel="stylesheet" type="text/css" href="styles/stylesheet.css" />

<title>Skins for ICQ :: Index</title>
</head>
<body>

<!--##### Head #####-->
<div id="head"></div>
<div id="nav1">Startseite</div>
<div id="nav2">| Skins | Tutorials | Links | LinkUs | Kontakt | Impressum |</div>

<!--##### Contend #####-->
<div id="contend">
    <table cellpadding="0" cellspacing="0" border="0" align="center" class="cont_out">
      <!--### top ###-->
    <tr>
    <td class="cont_tl"></td>
    <td class="cont_tm">Neue ICQ Skins</td>
    <td class="cont_tr"></td>
    </tr>
    <!--### middle ###-->
    <tr>
    <td class="cont_ml"></td>
    <td class="cont_mm">
        Inhalt
    </td>
    <td class="cont_mr"></td>
    </tr>
    <!--### bottom ###-->
    <tr>
    <td class="cont_bl"></td>
    <td class="cont_bm"></td>
    <td class="cont_br"></td>
    </tr>
  </table>
</div>

<!--##### Footer #####-->
<div id="footer">Copyright (c) 2006-2008 Melissa "Shona" T. - www.skinsforicq.de - All rights reserved</div>

</body>
</html>

CSS Datei:

Code:

body    {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:11ep;
        background-image:url(../images/bg.gif);
        }

.out    {
        width:100%;
        height:100%;
        }

/*#### HEAD ####*/        
#head    {
        display:block;
        margin:auto;
        width:950px;
        height:95px;
        background-image:url(../images/header.png);
        }

/*#### NAVIGATION ####*/    
#nav1    {
        display:block;
        margin:auto;
        width:930px;
        height:21px;
        background-image:url(../images/navigation_01.png);
        font-size:10pt;
        color:#666;
        padding-left:20px;
        padding-top:3px;
        }

#nav2    {
        display:block;
        margin:auto;
        width:930px;
        height:18px;
        background-image:url(../images/navigation_02.png);
        font-size:9pt;
        color:#666;
        text-align:right;
        padding-right:20px;
        padding-top:2px;
        }

/*#### CONTEND ####*/            
#contend    {
        display:block;
        margin:auto;
        width:948px;
        min-height:500px;
        background-image:url(../images/mitte.png);
        }

/*#### CONTAINER ####*/    
.cont_out    {
        margin-top:20px;
        }
        
/*#### TOP ####*/    
.cont_tl    {
        width:20px;
        height:32px;
        background-image:url(../images/box_corner_oben_links.png);
        }
        
.cont_tm    {
        width:760px;
        height:32px;
        background-image:url(../images/box_oben_mitte.png);
        color:#fff;
        font-size:7pt;
        }
        
.cont_tr    {
        width:20px;
        height:32px;
        background-image:url(../images/box_corner_oben_rechts.png);
        }

/*#### MIDDLE ####*/    
.cont_ml    {
        width:20px;
        background-image:url(../images/box_mitte_links.png);
        }

.cont_mm    {
        width:760px;
        max-height:200px;
        background-image:url(../images/box_mitte.png);
        color:#000;
        font-size:10pt;
        }
        
.cont_mr    {
        width:20px;
        background-image:url(../images/box_mitte_rechts.png);
        }

/*#### BOTTOM ####*/            
.cont_bl    {
        width:20px;
        height:16px;
        background-image:url(../images/box_corner_unten_links.png);
        }
        
.cont_bm    {
        width:760px;
        height:16px;
        background-image:url(../images/box_mitte_unten.png);
        }
        
.cont_br    {
        width:20px;
        height:16px;
        background-image:url(../images/box_corner_unten_rechts.png);
        }

/*#### FOOTER ####*/    
#footer    {
        display:block;
        margin:auto;
        width:930px;
        height:28px;
        background-image:url(../images/footer.png);
        color:#fff;
        font-size:7pt;
        text-align:right;
        padding-right:20px;
        padding-top:14px;
        }

BadGirl · 13. Oktober 2008

Sag mir doch einfach warum meine Breite der beiden Ränder im CSS ignoriert werden, dann funktioniert das einwandfrei (mit Tabellen).

Zu deinen Änderungen:

Wenn ich nur den Quelltext reinstelle, dann bitte ich auch darum das nur dieser verwendet wird!! Habe ich irgendwas davon geschrieben das ich mit Div-Containern arbeiten will oder das du meine komplette HP umgestalten sollst?

MFG
BadGirl

Willforce · 13. Oktober 2008

1. Wollte ich dir damit nur helfen. Entschuldigung!
2. Hast du deinen Quelltext sebst reingestellt! Der geänderte ist ja meiner.
3. Kann man sich deinen Quelltext auch so aus dem Net ziehen. Der ist da nicht sicher!
4. Wenn Du mit CSS keine Probleme hast, solltest Du auch selbst darauf kommen, wo das Problem liegt

Und so überwältigend ist dein Quelltext nicht, dass man den schützen muss.

BadGirl · 13. Oktober 2008

Zitat von Willforce: ↑

1. Wollte ich dir damit nur helfen. Entschuldigung!
2. Hast du deinen Quelltext sebst reingestellt! Der geänderte ist ja meiner.
3. Kann man sich deinen Quelltext auch so aus dem Net ziehen. Der ist da nicht sicher!
4. Wenn Du mit CSS keine Probleme hast, solltest Du auch selbst darauf kommen, wo das Problem liegt
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

1. Ja das war aber nicht die Hilfe die ich wollte
2. Das weiß ich auch, mehr hab ich aber hier nicht reingestellt
3. siehe 2
4. Wer lesen kann ist klar im Vorteil!!!

Ich habe gefragt wo das Problem da liegt, also habe ich wohl ein
Problem mit diesem CSS-Teil sonst hätte ich ja nicht gefragt, oder???

mfg
badgirl

Schweini · 13. Oktober 2008

Bei allem Respekt:

Willforce will helfen. Leider bist Du stur an Deinem Quelltext fixiert und wenn der falsch ist oder falsch gelöst, brauchste hier nicht in diesem Ton zu antworten.

Probier ihn doch einfach mal aus, vielleicht gefällt Dir das besser.

Ich kenn mich da nicht so aus, aber von anderen kann man was lernen. Lernbereitschaft sehe ich bei Dir aber nicht.

Willforce · 13. Oktober 2008

Hab ich dass halt zu geau genommen.
Auf jeden Fall liegt das Problem an bei den Größenangaben, die du in deinen Tabellen vergeben hast.
Und um auf solche Probleme zu verzcihten, nimmt man lieber div's.
Wenn Du irgendwann 20 Tabellen verschachtelt hast verlierts Du den Überblick im Quellcode.
Tabellen sind wie Frames. Nervig!
Lieber 2km CSS schreiben.

Ist auf jeden Fall von Vorteil, wenn Du versuchst mit dem Code von mir weiterzuarbeiten.
Hab extra alles mit Comments versehen.

BadGirl · 13. Oktober 2008

Zitat von Schweini: ↑

Bei allem Respekt:

Willforce will helfen. Leider bist Du stur an Deinem Quelltext fixiert und wenn der falsch ist oder falsch gelöst, brauchste hier nicht in diesem Ton zu antworten.

Probier ihn doch einfach mal aus, vielleicht gefällt Dir das besser.

Ich kenn mich da nicht so aus, aber von anderen kann man was lernen. Lernbereitschaft sehe ich bei Dir aber nicht.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Du sagst du kennst dich damit nicht aus und behauptest das mein Quelltext falsch ist bzw. falsch gelöst?
Er ist weder das eine noch das andere, es gibt einfach mehrere Möglichkeiten eine Homepage in HTML zu erstellen.

Die voherige HP (die bei einem FP-Crash verloren ging) war im gleichen Stil geschrieben (war eigentlich die gleiche) und machte keine Probleme. Warum soll ich nun auf diesen Stil verzichten nur weil ich ein kleines CSS Problem habe.

Des Weiteren habe ich ganz normal geantwortet, wenn es falsch verstanden wird dann lerne lesen (Smilies beachten das hilft manchmal einen text richtig zu verstehen ).

Zitat von Willforce: ↑

Hab ich dass halt zu geau genommen.
Auf jeden Fall liegt das Problem an bei den Größenangaben, die du in deinen Tabellen vergeben hast.
Und um auf solche Probleme zu verzcihten, nimmt man lieber div's.
Wenn Du irgendwann 20 Tabellen verschachtelt hast verlierts Du den Überblick im Quellcode.
Tabellen sind wie Frames. Nervig!
Lieber 2km CSS schreiben.

Ist auf jeden Fall von Vorteil, wenn Du versuchst mit dem Code von mir weiterzuarbeiten.
Hab extra alles mit Comments versehen.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Habe schon mehr als 20 Tabellen verschachtelt (nur nicht über CSS) und nie dieses Probleme gehabt, das ist das erste Mal. Außerdem sind das gerade mal 2 Tabellen wie kann das so ein Problem machen?

Meine Großenangaben beziehen sich auf die Bilder der HP (außer die in der Mitte, weil ich die ja in der breite größer brauche) somit dürfte das ja eigentlich kein Problem darstellen.

Bei deinem Code ist es so das ich mit den div-Container keinen Rand links und rechts machen kann, weil ich den in deinem Code nicht finden kann und recht/links der Schwarze Strich fehlt. Oder sehe ich das falsch?

MFG
BadGirl

Willforce · 13. Oktober 2008

Der Rand sollte ja nun dss kleinste Problem sein. Füge dem entsprechenden div einfach noch "border-left:solid 1px #000;" und "border-left:solid 1px #000;" hinzu. Dann sollte der Rand, den Du meinst, vorhanden sein.

Zu den Tabellen.
Das mag schon sein, dass Du mehrere tabellen verschachtelt hast. Das Problem liegt meistens darin, dass man sich nach langer Zeit erst wieder mühsam einlesen muss, um hier und da noch etwas zu ändern.
Das geht mit den divs wesentlich einfacher.

Ich war auch mal ein Tabellen-Fan und habe jede Menge verschachtelt usw..
Heute bin ich froh, dass ich den Mist nicht mehr mache.

HP wird im IE falsch angezeigt

Anhänge:

skinzforicq.zip

HP wird im IE falsch angezeigt

SysProfile Windows Foren

Hardware Foren