|
|||
Unterschiedliche Breite IE6 / IE7
Hallo miteinander
Mit dem IE6 und IE7 habe ich in folgendem Beispiel meine Mühe. Beschreibung/Code: Ich habe einen Gesamtrahmen: #gesamtrahmen { width: 1500px; height: 820px; float: left; } und in diesem Rahmen zwei weitere DIVS, nebeneiner: #navi { width: 164px; height: 820px; background-color: #000000; background-image: url(navi.jpg); background-repeat: no-repeat; float: left; } #spalte_gross { width: 730px; height: 820px; background-color: #FFFFFF; background-image: url(spalte_gross.jpg); background-repeat: no-repeat; float: left; } Das Bild spalte_gross.jpg ist tatsächlich 170px breit, der rest ist weisser Hintergrund. Im DIV spalte_gross ist wiederum ein div, in diesem kommt ein textinhalt: #spalte_gross_inhalt { width: 500px; margin: 30px 30px 0px 200px; float: left; } Problem: Der weisse Hintergrund im IE7 ist so wie ich ihn möchte: 560px breit, im IE6 jedoch 790px. Wie kommt er auf diesen Unterschied? Oder die bessere Frage, was muss ich tun, damit der weisse Hintergrund wirklich nur 560px ist?? Wäre super, wenn ihr wüsstet woran das liegt! Merci viemal + liebe Grüsse Matthias |
Sponsored Links |
|
|||
Zitat:
Zitat:
Grundsätzlich: poste immer vollständigen Code, nicht nur CSS-Schnipsel. Siehe auch: http://xhtmlforum.de/40080-fuer-frag...twortende.html Und nutze bitte die Code-Tags des Editors (#-Symbol). Danke. |
Sponsored Links |
|
|||
hi fricca .... merci vielmal für deine antwort. das css war (fast) komplett, drum habe ich einfacherheitshalber etwas abgekürzt.
wenn ich den leftmargin lösche, dann verschiebt sich aber auch der inhaltstext nach links, d.h. er käme dann über das bild. in der spalte_gross kommt zuerst ein 170px bild und dann der weisse hintergrund ... und weil ich noch einen abstand von 30px möchte, habe ich den margin 200px ... wenn ich den nun lösche, kommt der text ganz links, also über das bild. soll ich etwas mehr posten oder weisst du was ich meine? |
|
|||
Vollständiges CSS
Code:
body, html { margin: 0px; margin-left: auto; margin-right: auto; background: #f4f4f4; font-family: Arial, Tahoma, MS Sans Serif; font-size: 12px; color: #111111; } * { padding: 0; margin: 0; } hr { margin: 0; padding: 0; height: 1; border-style: none; border-top: 1px dashed #111111; } #gesamtrahmen { width: 1500px; height: 820px; float: left; } #spalte_navi { width: 164px; height: 820px; background-color: #000000; background-image: url(spalte_navi.jpg); background-repeat: no-repeat; float: left; } #spalte_navi ul { list-style-type: none; } #navi_lang { padding: 130px 0px 0px 25px; width: 145px; color: #808080; float: left; } #spalte_navi a:link, #spalte_navi a:active, #spalte_navi a:visited { font-size: 12px; color: #808080; text-decoration: none; } #spalte_navi a:hover { font-size: 12px; color: #1894c3; text_decoration: none; } #spalte_navi a.linkb:link, #spalte_navi a.linkb:active, #spalte_navi a.linkb:visited { font-size: 12px; color: #1894c3; font-weight: bold; text-decoration: none; } #spalte_navi a.linkb:hover { font-size: 12px; color: #808080; font-weight: bold; text_decoration: none; } .navi_lang_abstand1 { margin: 0px 0px 5px 0px; } .navi_lang_abstand1_sub { margin: 0px 0px 5px 10px; } .navi_lang_abstand2 { margin: 0px 0px 25px 0px; } .navi_lang_abstand3 { margin: 25px 0px 5px 0px; } #warenkorb { margin: 25px 0px 0px 15px; width: 130px; height: 72px; border: 1px solid; color: #808080; float: left; } #warenkorb_inhalt { margin: 10px 0px 0px 10px; width: 100px; float: left; } #warenkorb a:link, #warenkorb a:active, #warenkorb a:visited { font-size: 10px; color: #808080; text-decoration: none; } #warenkorb a:hover { font-size: 10px; color: #1894c3; text_decoration: none; } #navi_kurz { padding: 0px 0px 0px 25px; width: 125px; float: left;} #spalte_deko_und_produkt { width: 730px; height: 820px; background-color: #FFFFFF; background-image: url(spalte_deko_links.jpg); background-repeat: no-repeat; float: left; } #spalte_gross_inhalt { width: 500px; margin: 30px 30px 0px 200px; float: left; } #spalte_deko_rechts { width: 193px; height: 820px; background-image: url(spalte_deko_rechts.jpg); background-repeat: no-repeat; float: left; } /* ################################################################################################# */ .suchefeld { width: 80px; background: #000000; font-family: Arial, Tahoma, MS Sans Serif; font-size: 12px; border: 1px solid; color: #808080; } .textfeld { width: 150px; height: 20px; background: #FFFFFF; font-family: Arial, Tahoma, MS Sans Serif; font-size: 12px; border: 1px solid; color: #808080; } .textfeldgross { width: 150px; height: 100px; background: #FFFFFF; font-family: Arial, Tahoma, MS Sans Serif; font-size: 12px; border: 1px solid; color: #808080; } .textfeld_lang { width: 200px; height: 20px; background: #FFFFFF; font-family: Arial, Tahoma, MS Sans Serif; font-size: 12px; border: 1px solid; color: #808080; } .textfeldgross_lang { width: 200px; height: 100px; background: #FFFFFF; font-family: Arial, Tahoma, MS Sans Serif; font-size: 12px; border: 1px solid; color: #808080; } .auswahlfeld { width: 150px; height: 20px; background: #FFFFFF; font-family: Arial, Tahoma, MS Sans Serif; font-size: 12px; border: 1px solid; color: #808080; } .button { width: 50px; height: 20px; background: #FFFFFF; font-family: Arial, Tahoma, MS Sans Serif; font-size: 12px; border: 1px solid; color: #808080; } #agb { font-family: Arial, Tahoma, MS Sans Serif; font-size: 10px; color: #111111; } /* ################################################################################################# */ #text_links { margin: 0px 0px 5px 0px; width: 200px; float: left; } #text_rechts { padding: 0px 0px 5px 30px; float: left; } /* ################################################################################################# */ h1 { font-size: 20px; color: #111111; } h2 { padding: 3px 3px 3px 3px; margin: 0px 0px 5px 0px; background-color: #383838; font-size: 13px; color: #FFFFFF; } Vollständige HTML Code:
<!-----------------------------------------------------------------------------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <link type="text/css" href="design.css" rel="stylesheet" /> </head> <body> <!-----------------------------------------------------------------------------> <div id="gesamtrahmen"> <div id="spalte_navi"> <!-----------------------------------------------------------------------------> <!--start spalte navi--> <!-----------------------------------------------------------------------------> <div id="navi_lang"> <br /><br /><br /> Links einfügen </div><!--ENDE navi_lang--> <!-----------------------------------------------------------------------------> <div id="warenkorb"> <div id="warenkorb_inhalt"> <ul> <li class="navi_lang_abstand1"><a href="index.php?seite=warenkorb" class="linkb">+ Ihr Warenkorb</a></li> <li class="navi_lang_abstand1"> <a href="index.php?seite=warenkorb"> noch kein Artikel<br /> hinzugefügt</a></li> </ul> </div><!--ENDE warenkorb_inhalt--> </div><!--ENDE warenkorb--> <!-----------------------------------------------------------------------------> <div id="navi_kurz"> <ul> <li class="navi_lang_abstand3"><a href="index.php?seite=agb" >+ AGB</a></li> <li class="navi_lang_abstand3"><a href="index.php?seite=kontakt" class="linkb">+ Kontakt<a/a></li> </ul> <br /><br /> </div><!--ENDE navi_kurz--> <!-----------------------------------------------------------------------------> <!--ende spalte navi--> <!-----------------------------------------------------------------------------> </div><!--ENDE spalte_navi--> <div id="spalte_deko_und_produkt"> <div id="spalte_deko_und_produkt_inhalt"> <h1>Kontakt</h1> <p> <hr> <img src="design/kontakt.gif" border="0" /> <br /> <!-----------------------------------------------------------------------------> text text text text text text text text text text text text text text text text text text text text </div><!--ENDE spalte_deko_und_produkt_inhalt--> </div><!--ENDE spalte_deko_und_produkt--> <!-----------------------------------------------------------------------------> <div id="spalte_deko_rechts"> </div> <!-----------------------------------------------------------------------------> </div><!--ENDE gesamtrahmen--> </body> </html> Der Teil der falsch angezeigt wird ist "text text text text" |
|
|||
Was hat dieser Code mit den oben geposteten Schnipseln zu tun? Ein Element mit der ID #spalte_gross_inhalt existiert nicht.
Das ist auch alles andere, als auf das Problem reduziert. Und valide auch nicht. Lies den Link. Nochmal und aufmerksam. Probleme mit Bildern sind ohne Bilder nicht nachvollziehbar. Dein Rumgeschreie ist außerdem gänzlich überflüssig, überaus nervig und ärgerlich. Die Lösung deines Problems findest du vermutlich hier. |
|
|||
Es ist ja mega toll wenn einem geholfen wird, aber man macht ja alles falsch Und der grosse Text war für mich kein Rumgeschreie, sondern ein Hilfsmittel zur Übersichtlichkeit.
Sorry für die Störung und guten Wochenstart! |
|
|||
Ja, du machst viel falsch. Wie es richtig geht, kannst du nach wie vor unter dem genannten Link nachlesen.
Damit du sinnvoll und richtig posten kannst und dir überhaupt jemand helfen kann, hat Ingo sich einst die große Mühe gemacht, diese Hinweise zu verfassen. Zitat:
Entschuldige bitte, dass ich versuchte dir zu helfen. Es wird nicht wieder vorkommen. |
|
||||
Das Problem für den IE6 ist deine erste Zeile:
Code:
<!-----------------------------------------------------------------------------> Raus damit ...
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
IE6 und IE7: Miniabstand bei zentrierten Div und Listelement mit zu großer Breite | shredder01 | CSS | 4 | 14.03.2010 18:08 |
Diverse Probleme in IE6 und IE7 | shredder01 | CSS | 6 | 13.03.2010 13:56 |
Fehlendes(?) oder falsch positioniertes Hintergrundbild in IE6 und IE7 | shredder01 | CSS | 4 | 28.11.2009 21:38 |
Mausposition (IE6, IE7, FF) | Blacksoul | Javascript & Ajax | 1 | 24.11.2007 04:47 |
Unterschiedliche Abstände IE7 und Firefox | killray | CSS | 6 | 24.09.2007 17:38 |