Problembehebung bei meinem css Seitenlayout ohne Tabellen

Dieses Thema im Forum "Webdesign" wurde erstellt von MoRuK_68, 14. Mai 2008 .

  1. 14. Mai 2008
    Hallo,
    Hab mich den ganzen gestrigen Tag durch css geackert und das design fertiggestellt.
    In Firefox sieht es genau so aus wie ich es wollte und das layout passt sich auch der seitenlänge an.

    Doch dann der große schock: Ich öffne das ganze im Internet Explorer und steh wieder ganz am Anfang. Das Design wird dort total falsch angezeigt. Header viel zu weit unten und über den Rand hinaus. Navigationsleiste auf einmal 2 zeilig.

    Wie kann das sein und was kann ich tun?
    Bin grad total frustriert von dem ganzen SCH***
    Kann mir jemand helfen? Vllt über icq?
    Wäre sehr dankbar!

    Hier is mal der Quellcode und ein bild des designs (firefox und ie) vllt sticht euch ja irgent ein fehler ins auge:

    Internet Explorer:

    {bild-down: http://img.7pics.info/ie_e5c_thumb.png}


    Firefox:

    {bild-down: http://img.7pics.info/firefox_6a8_thumb.png}


    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" />
    <meta name="author" content="philipp l.">
    <meta name="description" content="Dies ist die offizielle Homepage von Y_TITTY">
    <meta name="copyright" content="philipp l.">
    <meta name="keywords" content="y-*****, y_titty, y *****, kurzfilme, philipp, tizi, high school musical verarsche, freund oder nicht freund, stift in der nase,">
    <title>Y_TITTY</title>
    <style type="text/css">
    
    
    body
    {
    background-image:url(grafiken/hintergrund.jpg);
    background-repeat:repeat-x;
    background-color:#3C2C53;
    margin:0px; padding:0px;
    }
    
    img
    {
    border:none;
    }
    
    #container
    {
    margin: auto;
    width: 807px;
    text-align: left;
    background-image:url(grafiken/containerhintergrund.gif);
    background-repeat:repeat-y
    
    }
    
    #borderleft
    {
    float:left;
    width:26px;
    }
    
    #mainnav
    {
    margin: auto;
    height: 41px;
    }
    
    #header
    {
    margin: auto;
    height: 215px;
    }
    
    #borderright
    {
    float:right;
    width:27px
    }
    
    #contents
    {
    margin-right: 47px;
    margin-left: 46px;
    background-color: #EBEBEB;
    }
    
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="borderleft">
    <img src="grafiken/linkerrand.gif" width="26" height="799" alt="" />
    </div>
    <div id="borderright">
    <img src="grafiken/rechterrand.gif" width="27" height="799" alt="" />
    </div>
    <div id="mainnav">
    <a href="home.html"> <img src="grafiken/home.gif" width="147" height="41" alt="Home" /></a><a href="videos.html"><img src="grafiken/videos.gif" width="151" height="41" alt="Videos" /></a><a href="forum.html"><img src="grafiken/forum.gif" width="158" height="41" alt="Forum" /></a><a href="extras.html"><img src="grafiken/extras.gif" width="151" height="41" alt="Extras" /></a><a href="shop.html"><img src="grafiken/shop.gif" width="147" height="41" alt="Shop" /></a> </div>
    <div id="header">
    <img src="grafiken/header.gif" width="754" height="215" alt="Y_TITTY Header" />
    </div>
    <div id="contents">
    <p>Lately I've observed didactic comments in other forums that say margins and paddings should be given with em instead of px. It seems counterintuitive to me and if someone has an explanation I'd like to hear it.
    Let's assume that you have a page designed using paragaph font size set to 1 em. Both margin and padding use em.
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <p>laber</p>
    
    </div>
    </div>
    </body>
    </html>
     
  2. 14. Mai 2008
    AW: Problembehebung bei meinem css Seitenlayout ohne Tabellen

    Ich hab leider nur ein IE 7 da unt der Zeigt es auch richtig an, änder mal dein doctype von "transitional" auf "strict". Das könnte Helfen, meine ich mal gelesen zu haben.

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

    So laut Murdoc funkt das leider nicht aber ich hab gefunden woher ich das hab ^^
    DOCTYPE-Switch: Box-Model-Bug
     
  3. 14. Mai 2008
    AW: Problembehebung bei meinem css Seitenlayout ohne Tabellen

    sry, aber der doctype wäre dann:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    weil xhtml, wird aber nix ändern.

    was mir scho öfter aufgefallen is, das bilder im IE plotzlich ein margin bekommen (auch bei margin: 0
    da hilft nur ein margin im minus-bereich (margin: -20px)

    IE strinkt.
     
  4. 15. Mai 2008
    AW: Problembehebung bei meinem css Seitenlayout ohne Tabellen

    mach dir nix draus moruk...

    ie is kagge und der 7er zeigt es meistens richtig an.
    nur der6er und frühere versionen spacken da rum.

    wer ie benutzt, darf die seiten nicht richtig sehn!! Also,
    is die fehlerhafte anzeige voll in ordnung!!

    gruß
    gl
     
  5. 15. Mai 2008
    AW: Problembehebung bei meinem css Seitenlayout ohne Tabellen

    Leider isse nicht in Ordnung, weil den IE6 immernoch viel zu viele benutzen.
    Es muss doch nen weg geben das in griff zu bekommen?

    strict bringt leider nichts . . .
    negativer margin ändert auch nichts . . .
     
  6. 16. Mai 2008
    AW: Problembehebung bei meinem css Seitenlayout ohne Tabellen

    natürlich kannst du verschiedene css-datein für die verschiedenen browser versionen verwenden!

    da, die navi nur aus bildern und normalem text besteht, würd ich die buttons so slicen ohne text!!
    Dann ne class "navi" machen mit dem button als hintergrundbild und dann den text drauf schreiben mit weiß und auch in css formatiert.
    Außerdem was bringt denn margin:auto; die ganze zeit!?
    Das ändert doch nix, oder?
    Bei der navi dann noch ne feste breite und höhe einstellen ( ggf. min-height und max-height) und overlfow:hidden; rein. Dann sollte der zeilenumbruch weg sein.




    gruß
    gl
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.