✔ Background repeat in FF & IE anders?

noise · 25. Januar 2006

Hallo Leute!

Folgende Situation:

Code:

#main_content {
		background-image: url('./images/main_content.jpg');
		background-repeat: repeat-y;
		padding: 0 20px 0 20px;
		width: 780px; 
		min-height: 429px;
		float: left;
		overflow: hidden;
	}

Das ist mein content-div (wie nicht zu übersehen

).
Jetzt soll der Hintergrund in y wiederholt werden wenn mehr Inhalt im div steht.. soweit so gut. Funktioniert ja ohne Probleme.
Das einzige was mir noch "Sorgen" macht ist der FF der per "drag and zieh"

den Inhalt nach links schieben lässt.
Keine Ahnung was ich meine!? --> siehe picture.

Der Internetexplorer macht diesen schmorrn nicht..
Und wenn ich's padding weg nehm gehts auch im FF (also der Inhalt kann nicht mehr verschoben werden..)

Nur ich kann nicht auf padding verzichten..

Jemand eine Idee?

danke

Quaese · 25. Januar 2006

Hi,

hört sich für mich nach dem Box-Modell-Fehler des IE an. Eigentlich sollten padding- und margin-Werte
zur Breite bzw. Höhe eines Elements hinzuaddiert werden. So wird es vom FF auch richtig berechnet.
Der IE im Quirksmode hingegen rechnet dagegen fälschlicher Weise die Aussen- und Innenabstände
in Grössenangaben ein.

In deinem Fall musst du unterschiedliche Breitenangaben zum Element machen.

Code:

#main_content {
		background-image: url('./images/main_content.jpg');
		background-repeat: repeat-y;
		padding: 0 20px 0 20px;
		width: 740px !important; 
		width: 780px; 
		min-height: 429px;
		float: left;
		overflow: hidden;
	}

Die Zeile mit !important wird nur von Nicht-IEs interpretiert. Hier wurden die 40 Pixel der
padding-Angabe subtrahiert. Die nächste Zeile liefert die Breitenangabe für IEs.

Vielleicht hilft dir das weiter.

Quaese

noise · 25. Januar 2006

Hallo,

danke erstmal für die promte Antwort!
Es hat insofern geholfen das sich der div-Inhalt jetzt nicht mehr schieben lässt.
Aber mir scheint es so als würde er jetzt vom rechten Rand den doppelten padding wert nehmen.. aber am besten --> pic

Maik · 25. Januar 2006

Schon mal versucht, für das Dokument einen Doctype zu deklarieren, der den IE nicht in den Quirksmodus versetzt, wie z.B.:

HTML:

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

Somit interpretiert der IE das Boxmodell richtig und addiert die padding-Angaben zur Elementbreite hinzu.

Weshalb sich der DIV-Inhalt im Firefox verschieben lässt, entzieht sich meiner Kenntnis, da ich dieses kuriose Phänomen noch nie gesehen / erlebt habe

Es wäre eventuell hilfreich und aufschlussreicher, wenn du den vollständigen HTML- und CSS-Code der Seite posten würdest, denn anhand der angehängten Grafiken ist eine Fehlerdiagnose nur schwer durchzuführen.

noise · 25. Januar 2006

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>VITOParkett :: 5Star quality</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body style="text-align:center;">
<div id="container" style="margin: 0px auto; text-align:left;">
	<div id="head">
		<div id="top_logo_vito">
		&nbsp;
		</div> <!-- top_logo_vito -->
		<div id="top_right">
			<div id="top_logo_austria">
			&nbsp;
			</div> <!-- top_logo_austria -->
			<div id="top_navi">
			&nbsp;
			</div> <!-- top_navi -->		
		</div> <!-- top_right -->
	</div> <!-- head -->
	
	<div id="main">
	&nbsp;
		<div id="main_top">
		&nbsp;
		</div><!-- main_top -->		
    	
   		<div id="main_content"> 
		&nbsp;		
		</div><!-- main_content -->
				
	</div><!-- main -->
	
	<div id="main_bottom">
	&nbsp;	
	</div><!-- main_bottom -->

</div><!-- container -->

</body>
</html>

CSS

Code:

body {
	font-family: Verdana;
	font-size: 13px;
	color: black;
}

#container {
	/*background-color: blue;*/
	border: 1px solid #000000;
	text-align: left;
	width: 760px; 
	overflow: hidden;
}

#head {
	/*background-color: green;*/
	width: 760px; 
	height: 205px;
	overflow: hidden;
}

	#top_logo_vito {
		background-image: url('./images/top_logo_vito.jpg');
		background-repeat: no-repeat;
		/*background-color: red;*/
		width: 190px; 
		height: 205px;
		float: left;
		overflow: hidden;
	}
	
	#top_right {
		/*background-color: purple;*/
		width: 570px; 
		height: 205px;
		float: right;
		overflow: hidden;
	}
	
		#top_logo_austria {
			background-image: url('./images/top_logo_austria.jpg');
			background-repeat: no-repeat;
			/*background-color: magenta;*/
			width: 570px; 
			height: 106px;
			float: right;
			overflow: hidden;
		}
		
		#top_navi {
			background-image: url('./images/top_navi.jpg');
			background-repeat: no-repeat;
			/*background-color: black;*/
			width: 570px; 
			height: 99px;
			float: right;
			overflow: hidden;
		}

#main {
	/*background-color: purple;*/
	width: 760px; 
	max-height: 1200px;
	overflow: hidden;
}

	#main_top {
		background-image: url('./images/main_top.jpg');
		background-repeat: no-repeat;
		/*background-color: blue;*/
		width: 760px; 
		height: 51px;
		overflow: hidden;
	}
	
	#main_content {
		background-image: url('./images/main_content.jpg');
		background-repeat: repeat-y;
		/*background-color: black;*/
		padding: 0 20px 0 20px;
		/*width: 720px !important;*/
		width: 760px; 		
		/*height: 429px;*/
		min-height: 418px;
		float: left;
		overflow: hidden;
	}

	#main_bottom {
		background-image: url('./images/main_bottom.jpg');
		background-repeat: no-repeat;
		/*background-color: green;*/
		width: 760px; 
		height: 86px;
		overflow: hidden;
	}

Ich sag gleich mal dazu.. css nappl am Werk

Von da her bitte nicht schimpfen wenn was unschön is

Maik · 25. Januar 2006

Doctype aus meinem letzten Posting für die Seite verwenden, damit IE nicht im Quirksmodus läuft.
Korrigiertes Stylesheet:

Code:

#main_content {
background-image: url('./images/main_content.jpg');
background-repeat: repeat-y;
padding: 0 20px 0 20px;
width: 720px; /* = 760px - 2*20px */
min-height: 418px;
float: left;
overflow: hidden;
}

noise · 25. Januar 2006

Danke dir

Das einzige was du mir jetz erklären muss.. wieso bitte width: 720px; ?!
Es hat was mit dem padding zu tun - ja.. nur wieso genau...

Achja.. ich hab noch was angehängt:

Code:

* html #main_content /* Für IE */
{
	height: 418px;
}

Damit wollt ich eigentlich bezwecken das mir der IE bei leerem content-div nicht auf minimum-höhe zusammen "schrumpft".
Schön und gut - das funktioniert auch.. nur haett ich doch recht gerne das der content div sich vergrößert wenn mehr inhalt drin steht! Nur der IE schneidet jetzt herzloserweise alles was über die 418px raus steht ab

*EDIT*
Ha - Erleuchtung

Code:

* html #main_content /* Für IE */
{
	height: 418px;
        overflow: visible
}

Maik · 25. Januar 2006

Ich hab es doch in dem CSS-Kommentar rechnerisch erläutert: die "tatsächliche" Breite des übergeordneten DIVs soll 760 Pixel betragen, also werden der linke und rechte Innenabstand von je 20 Pixel abgezogen.

Zur Verdeutlichung empfehle ich dir CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell.

Zu deiner neuen Frage:

noise hat gesagt.:
*EDIT*
Ha - Erleuchtung

Code:

* html #main_content /* Für IE */ { height: 418px; overflow: visible; }

Wenn du das Problem gelöst hast und alles funktioniert, markiere den Thread bitte auch als erledigt, vielen Dank

noise · 25. Januar 2006

Danke für die Hilfe!

✔ Background repeat in FF & IE anders?

noise

Mitglied

Anhänge

Quaese

Moderator

noise

Mitglied

Anhänge

Maik

noise

Mitglied

Maik

noise

Mitglied

Maik

noise

Mitglied

Neue Beiträge