[CSS] IE7 Border+Float problem

Dieses Thema im Forum "Webdesign" wurde erstellt von Terrorbeat, 20. Januar 2010 .

Schlagworte:
  1. 20. Januar 2010
    IE7 Border+Float problem

    HI

    IE ist , besonders wens ums Floaten geht. Ich bin jetzt seit ca. 2 Wochen am forschen warum das Floten nicht funktionierte, jede Antwort die ich auf diese Fragen fand war keine Lösung aber heute entdecke ich das es in verbindung zu einem 1px border steht.

    Ich habe die Quelletexte nicht zensiert, da es wichtig ist, das euch alle Informationen zur verfügung stehen allerdings macht es das ganze natürlich unübersichtlicher. Ich möchte auch keine Screenshout anfertigen da ich nicht will das die Endkunden etwas hineininterpretieren, sobald die Seite fertig ist. Ihr versteht schon, Qualität ist relativ


    index.html
    HTML:
    <html>
    <head>
    <title>My CMS</title>
    <link rel="stylesheet" type="text/css" href="inc/style.css">
    <link type="text/css" href="../js/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $(".item").click(function(a) {
     a.preventDefault();
     var linkto = $(this).attr('href');
     $.get("tab.php", { mode: "Ajax", linkto: linkto }, function(data){
     $("#tabline").fadeOut('fast',function(){
     $("#tabline").html(data).fadeIn('normal');
     });
     });
     });
    });
    </script>
    </head>
    <body>
    <div id="main">
     <div id="top"></div>
     <div id="topbottom"></div>
     <div id="tabline">
     <div class="tabopen"><img src="img/tableftopen.jpg" alt="" border="0" />sssss<img src="img/tabrightopen.jpg" alt="" border="0" /></div>
     <div class="tabclose"><img src="img/tableftclose.jpg" alt="" border="0" />sssss<img src="img/tabrightclose.jpg" alt="" border="0" /></div>
     <div class="tabclose"><img src="img/tableftclose.jpg" alt="" border="0" />ssss<img src="img/tabrightclose.jpg" alt="" border="0" /></div>
     <div class="tabclose"><img src="img/tableftclose.jpg" alt="" border="0" />sss<img src="img/tabrightclose.jpg" alt="" border="0" /></div>
     <div class="tabclose"><img src="img/tableftclose.jpg" alt="" border="0" />saaaa<img src="img/tabrightclose.jpg" alt="" border="0" /></div>
     <div style="clear:left;"></div>
     </div>
     <div id="content">
     <div id="contentmain">
    ...<br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
     <div id="sidebar">
     <img src="img/sidebartop.jpg" alt="" border="0" />
     <div class="group" style="background-image:url(img/sidebargroupblue.jpg);color:#b7e7ff;">Group 1</div>
     <a href="nix.php" class="item">Link 1</a>
     <a href="#" class="item">Link 2</a>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     <div class="group" style="background-image:url(img/sidebargroupblue.jpg);color:#b7e7ff;">Group 2</div>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     <div class="group" style="background-image:url(img/sidebargroupblue.jpg);color:#b7e7ff;">Group 3</div>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     <a href="#" class="item">aaaaa</a>
     </div>
     <div style="clear:left;margin:0px;padding:0px;"></div>
     </div>
    </div>
    </body>
    </html>
    inc/style.css
    Code:
    body{
     margin:0px;
    }
    #main {
     width: 1000px;
     border-right:1px black solid;
     border-bottom:0px black solid;
    }
    
    
    
    
    #top {
     width:100%;
     height:114px;
     background-color:#111111;
     background-image: url(../img/topleft.jpg);
     background-repeat:no-repeat;
    }
    #topbottom {
     width:100%;
     height:25px;
     background-image: url(../img/topbottombg.jpg);
     background-repeat:repeat-x;
    }
    #tabline {
     width:100%;
     height:24px;
     background-image: url(../img/tabbg.jpg);
     background-repeat:repeat-x;
    }
    .tabopen {
     height:24px;
     background-image: url(../img/tabopenbg.jpg);
     background-repeat:repeat-x;
     margin-left:5px;
     float:left;
    
     font-family:verdana;
     font-size:8pt;
     font-weight:bold;
     color:black;
    }
    .tabclose {
     background-image: url(../img/tabclosebg.jpg);
     background-repeat:repeat-x;
     margin-left:5px;
     height:24px;
     float:left;
     
     font-family:verdana;
     font-size:8pt;
     font-weight:bold;
     color:black;
    }
    
    
    
    
    
    #content {
     background-image: url(../img/contentbg.jpg);
     background-repeat:repeat-y;
    }
    #contentmain {
     width:780px;
     float:left;
     margin:0px;
     padding:0px;
    }
    #sidebar {
     width:220px;
     float:left;
     margin:0px;
     padding:0px;
    }
    
    .group {
     padding-left:20px;
     height:21px;
     background-repeat:no-repeat;
     
     font-family:verdana;
     font-size:8pt;
     font-weight:bold;
     line-height:21px;
    }
    .item {
     display:block;
     background-image:url(../img/sidebaritem.jpg);
     background-repeat:no-repeat;
    
     height:18px;
    
     padding-left:35px;
    
     font-family:verdana;
     font-size:10pt;
     color:black;
     text-decoration:none;
     line-height:18px;
    }
    Nun zur Beschreibung:
    #content und #sidebar sollten nebeneinander stehen, Firefox und Opera führen dies auch problemlos aus. IE7 halt nicht, dort steht es untereinander. Entferne ich bei #main (ganz oben der style.css datei) den border-right so erstrahlt selbst der IE in neuem Licht, allerdings muss der Border hin sonst sieht das Design nichts aus. Als würde der border nicht zusätzlich zu den 1000px berechnet werden sondern sich nach innen setzen, also das für den content nur noch 999px zu verfügung steht was halt zu wenig ist.

    Lösung?

    Im IE habe ich zusätzlich noch das Problem das die hintergrundgrafik der #content einfach fehlt (vielleicht auch verschoben ist)
     
  2. 20. Januar 2010
    AW: IE7 Border+Float problem

    In der css ein eintrag was in IE7 ein bruch erzeugt.
    Code:
    #main {
     width: 1000px;
     border-right:1px black solid;
     border-bottom:0px black solid;
    }
    ...
    #contentmain {
     width:779px;
     float:left;
     margin:0px;
     padding:0px;
    }
    
    #sidebar {
     width:220px;
     float:left;
     margin:0px;
     padding:0px;
    }
    
    Entweder machst du wie oben width: 779px oder du machst in #main width: 1001px;
    Bereite 1000px davon soll 1px Border sein, also 1000px-1px = 999px zu verfügung.
    So kenne ich das. Dein Problem ist das IE versuch 780+220 in eine 999 Feld zu schreiben.
    Was ich nicht verstehe was hat dein Body aus der css mit border im #main zu tun ???
     
  3. 20. Januar 2010
    AW: IE7 Border+Float problem

    oh, hast recht meinte #main nicht body.

    Ich dachte immer, ein border wird zusätzlich zu den 1000px Breite zugerechnet und nicht davon abgezogen. Wen es so sein sollte wie du sagst, dann ist es ja nur logisch, wundert mich aber dennoch, das es dann vom Firefox und opera falsch interpretiert wurde.
     
  4. 20. Januar 2010
    AW: IE7 Border+Float problem

    Code:
    #sidebar {
     width:219px;
     float:left;
     margin:0px;
     padding:0 1px 0 0;
    }
    Das sollte dein Problem lösen


    Nebenbei, würde das oben noch einfügen:

    Code:
    * {
     margin: 0;
     padding: 0;
     outline: 0;
    }
    
    a:active, a:focus { outline: 0;}
     
  5. 20. Januar 2010
    AW: IE7 Border+Float problem

    Firefox und IE machen das unterschiedlich. Der eine rechnet den border drauf, der andere zieht ihn ab.
    Du solltest also die Breite ein wenig verkleinern, dann sollte es klappen.
    ein float:left; hat mir auch schon oft geholfen!
     
  6. 21. Januar 2010
    AW: IE7 Border+Float problem

    Code:
    // alle
    #id {
    width: 100px;
    }
    // ie 6
    * html #id{
    width: 90px;
    }
    // ie 7 -> du solltest für den ie 8 noch sagen das er als ie 7 laufen soll
    // <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
    * + html {
    width: 98px;
    }
    
    CSS Filter Browserweiche per CSS
     
  7. 21. Januar 2010
    AW: IE7 Border+Float problem

    Ist leider so, Problematisch wird es erst wenn bei Firefox und IE läuft aber beim Opera nicht und bei Safari auch nicht.
    HTML:
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
    
    sollte in Neuen Projekte schon immer rein, spart arbeit in wenigen fehlen.

    Am Besten ist man schreibt sein Valid code, dann geht man an die CSS und macht es für FF und IE fehlerfrei.
    Dabei achtet man auf die bereiche. Dabei kannst du dich immer an FF halten dann IE halten.
    Jetzt weiter ausgeholt, in Debian Firefox wird das wieder anders dargestellt als in Firefox von ubuntu. Und safari auf Mac ist anders als Safari auf Windows.
    Das sind sachen, wie soll ich sagen wie Erfahrungen, krigst mit versuchst daraus zu lernen.

    Die darstellung der Seiten hängt auch von w3c valid code hür (x)html und css ab.
    Ich habe mal gelsen das man zum Beispiel in css die border so machenn sollte:
    Code:
    border: solid 0px #000000;
    border-top: solid 1px #000000;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
    
    Weil einige Browser etwas genauer haben wollten.
     
  8. 21. Januar 2010
    AW: IE7 Border+Float problem

    kann ich aus eigener erfahrung nicht bestätigen.
     
  9. 23. Januar 2010
    AW: IE7 Border+Float problem

    Das ist Schön, das du damit nicht solche Probleme hattest.
    Das hätte ich auch gern.
    ;-)
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.