#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) + Multi-Zitat Zitieren
#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 ??? + Multi-Zitat Zitieren
#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. + Multi-Zitat Zitieren
#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;} + Multi-Zitat Zitieren
#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! + Multi-Zitat Zitieren
#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 + Multi-Zitat Zitieren
#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. + Multi-Zitat Zitieren
#8 21. Januar 2010 AW: IE7 Border+Float problem kann ich aus eigener erfahrung nicht bestätigen. + Multi-Zitat Zitieren
#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. ;-) + Multi-Zitat Zitieren