zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Unterschiedliche Breite IE6 / IE7

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.07.2007, 11:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.05.2006
Beiträge: 24
pacific befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.07.2007, 11:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von pacific Beitrag anzeigen
Der weisse Hintergrund im IE7 ist so wie ich ihn möchte: 560px breit, im IE6 jedoch 790px. Wie kommt er auf diesen Unterschied?
IE < 7 kann mit Breiten nicht richtig umgehen. Er dehnt die Box in der Breite aus, wenn die Inhalte mehr Platz brauchen.

Zitat:
Oder die bessere Frage, was muss ich tun, damit der weisse Hintergrund wirklich nur 560px ist??
Mangels Anschauungsmaterial geschätzt: Entferne den linken margin von #spalte_gross_inhalt.


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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.07.2007, 11:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.05.2006
Beiträge: 24
pacific befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 02.07.2007, 11:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von pacific Beitrag anzeigen
weisst du was ich meine?
Nein.
Ich habe weder Zeit noch Lust auf Rätselraten.

Lies den Link, den ich gepostet habe.
Mit Zitat antworten
  #5 (permalink)  
Alt 02.07.2007, 11:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.05.2006
Beiträge: 24
pacific befindet sich auf einem aufstrebenden Ast
Standard

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">&nbsp;&nbsp;&nbsp;noch kein Artikel<br />&nbsp;&nbsp;&nbsp;hinzugef&uuml;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"
Mit Zitat antworten
  #6 (permalink)  
Alt 02.07.2007, 11:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 02.07.2007, 11:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.05.2006
Beiträge: 24
pacific befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #8 (permalink)  
Alt 02.07.2007, 12:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von pacific Beitrag anzeigen
aber man macht ja alles falsch
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:
Und der grosse Text war für mich kein Rumgeschreie, sondern ein Hilfsmittel zur Übersichtlichkeit.
Dann weißt es ja jetzt besser.

Entschuldige bitte, dass ich versuchte dir zu helfen. Es wird nicht wieder vorkommen.
Mit Zitat antworten
  #9 (permalink)  
Alt 02.07.2007, 12:03
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Das Problem für den IE6 ist deine erste Zeile:

Code:
<!----------------------------------------------------------------------------->
Die muss Weg, vor dem DOCTYPE darf nichts stehen - sonst landet der IE6 im sogenannten Quirksmodus und interpretiert das CSS Boxmodell halt falsch.

Raus damit ...
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.07.2007, 12:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.05.2006
Beiträge: 24
pacific befindet sich auf einem aufstrebenden Ast
Standard

Herzlichen Dank für eure Hilfe! Es hat geklappt.

Ich erkundige mich für das nächste Posting besser und hoffe, keine Fehler mehr zu machen.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:31 Uhr.