HP wird im IE falsch angezeigt

Diskutiere und helfe bei HP wird im IE falsch angezeigt im Bereich Webmaster Support, Scripts, etc im SysProfile Forum bei einer Lösung; 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... Discussion in 'Webmaster Support, Scripts, etc' started by BadGirl, Oct 12, 2008.

  1. BadGirl
    BadGirl Alter Hase
    Joined:
    Jul 18, 2007
    Messages:
    2,258
    Likes Received:
    165
    1. SysProfile:
    36082
    2. SysProfile:
    125718

    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.

    [​IMG]

    Was ist das und warum wird die falsch angezeigt?
     
  2. Schweini
    Schweini Wandelnde HDD
    Joined:
    Dec 26, 2006
    Messages:
    4,271
    Likes Received:
    220

    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.
     
    #2 Schweini, Oct 12, 2008
    Last edited: Oct 12, 2008
  3. BadGirl
    BadGirl Alter Hase
    Threadstarter
    Joined:
    Jul 18, 2007
    Messages:
    2,258
    Likes Received:
    165
    1. SysProfile:
    36082
    2. SysProfile:
    125718
    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>
     
  4. BadGirl
    BadGirl Alter Hase
    Threadstarter
    Joined:
    Jul 18, 2007
    Messages:
    2,258
    Likes Received:
    165
    1. SysProfile:
    36082
    2. SysProfile:
    125718
    und wie sieht's aus?
     
  5. Willforce
    Willforce Profi-Schrauber
    Joined:
    Sep 6, 2007
    Messages:
    301
    Likes Received:
    7
    1. SysProfile:
    4915
    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.
     
    #5 Willforce, Oct 12, 2008
    1 person likes this.
  6. Spacerat
    Spacerat ٩(̾●̮̮̃̾•̃̾)۶ /dev/null
    Joined:
    Dec 25, 2006
    Messages:
    8,597
    Likes Received:
    196
    Name:
    Christian
    1. SysProfile:
    11226
    Steam-ID:
    Spacerat2911
    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.
     
    #6 Spacerat, Oct 13, 2008
  7. BadGirl
    BadGirl Alter Hase
    Threadstarter
    Joined:
    Jul 18, 2007
    Messages:
    2,258
    Likes Received:
    165
    1. SysProfile:
    36082
    2. SysProfile:
    125718
    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
     
    #7 BadGirl, Oct 13, 2008
    Last edited: Oct 13, 2008
  8. Willforce
    Willforce Profi-Schrauber
    Joined:
    Sep 6, 2007
    Messages:
    301
    Likes Received:
    7
    1. SysProfile:
    4915
    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;
            }
    
     

    Attached Files:

    #8 Willforce, Oct 13, 2008
    Last edited: Oct 13, 2008
  9. BadGirl
    BadGirl Alter Hase
    Threadstarter
    Joined:
    Jul 18, 2007
    Messages:
    2,258
    Likes Received:
    165
    1. SysProfile:
    36082
    2. SysProfile:
    125718
    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
     
  10. Willforce
    Willforce Profi-Schrauber
    Joined:
    Sep 6, 2007
    Messages:
    301
    Likes Received:
    7
    1. SysProfile:
    4915
    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.
     
    #10 Willforce, Oct 13, 2008
    Last edited: Oct 13, 2008
  11. BadGirl
    BadGirl Alter Hase
    Threadstarter
    Joined:
    Jul 18, 2007
    Messages:
    2,258
    Likes Received:
    165
    1. SysProfile:
    36082
    2. SysProfile:
    125718
    1. Ja das war aber nicht die Hilfe die ich wollte :D
    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
     
  12. Schweini
    Schweini Wandelnde HDD
    Joined:
    Dec 26, 2006
    Messages:
    4,271
    Likes Received:
    220
    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.
     
  13. Willforce
    Willforce Profi-Schrauber
    Joined:
    Sep 6, 2007
    Messages:
    301
    Likes Received:
    7
    1. SysProfile:
    4915
    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. :)
     
    #13 Willforce, Oct 13, 2008
  14. BadGirl
    BadGirl Alter Hase
    Threadstarter
    Joined:
    Jul 18, 2007
    Messages:
    2,258
    Likes Received:
    165
    1. SysProfile:
    36082
    2. SysProfile:
    125718
    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 ;) ).

    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
     
  15. Willforce
    Willforce Profi-Schrauber
    Joined:
    Sep 6, 2007
    Messages:
    301
    Likes Received:
    7
    1. SysProfile:
    4915

    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.
     
    #15 Willforce, Oct 13, 2008
Thema:

HP wird im IE falsch angezeigt

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice