IE7 Hintergrundproblem in DIV Boxen

Uwe1234

Hallo zusammen,
ich habe jetzt sehr lange hier im Forum und auch im Netz nach eine Lösung gesucht. Ich habe ein Layout mit drei DIV Boxen(Titel, Navigation und Inhalt). Diese drei DIV Boxen sind in einer großen DIV Box die zentriert dargestellt wird. Jede der drei DIV Boxen hat ein Hintergrundbild, dass Fix an seinem Platz steht und nur der Inhalt scrollt. Klappt im FF und IE6, bei IE7 wird das Hintergrundbild der DIV Box "Inhalt" nach links und nach oben an den Rand der Eltern DIV Box geschoben. Das Hintergrundbild habe ich mit Background-Attachment: fixed platziert. Im Internet habe ich gelesen das beim IE7 der Viewpoint sich verschiebt oder so in der Art. Wie kann ich das Hintergrund beim IE7 platzieren?
Danke.

Gruß Uwe1234

FaFoo

quellcode bitte

Arno112

Link bitte...

jojo87

Du kannst einen conditional comment verwenden, diesen bindest du im head nach den anderen css-angaben ein:

Code

<![if ie 7]-->
<style type="text/css" media="screen">
#Inhalt {
 background:.....
background-position: HIER NEU POSITIONIEREN;
etc...
}
</style>
<![endif]-->

Diese Style-Angaben werden dann nur vom ie7 benutzt, andere Browser ignorieren sie.

Gruß,
Jojo

Uwe1234

Hallo jojo87,

ich habe das probiert, aber dann fixiert der Hintergrund komplett,also auch wenn man das Fenster kleiner macht.

@Arno112 und FaFoo
anbei der Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtmll-Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">


<head>


<title></title>


<style type="text/css">
<!--


body{
font-family:Arial;
font-size:12px;
background-color:#000;
text-align:center;
margin:0px;
padding:0px;
}


html{
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FF0000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #FFFFFF;
}


p{
margin:0px;
padding:0px;
}


td{
text-align:justify;
}


a:link {text-decoration: underline; color: black; border: 0px none;}
a:visited {text-decoration:underline; color: black; border: 0px none;}
a:hover {text-decoration:none; color: white; border: 0px none;}
a:active {text-decoration:underlinee; color: black; border: 0px none;}
a:focus{outline: none;}


#title{
background-color:#000;
background-image: url('../images/background/h_01.gif');
background-repeat: no-repeat;
width:1000px;
height:139px;
padding:0px;
border:0px solid #000;
}


#left{
background-color:#000;
background-image: url('../images/background/h_02.gif');
background-repeat: no-repeat;
width:177px;
height:661px;
padding:0px;
float:left;
border:0px solid #000;
}


#content{
background-color:#000;
background-image: url('../images/background/h_03.gif');
background-repeat: no-repeat;
width: 823px;
height: 661px;
float:right;
padding:0px;
overflow-x:hidden;
overflow-y:auto;
border:0px solid #000;
}


#content2{
background-color:#000;
background-image: url('../images/background/h_04.gif');
background-repeat: no-repeat;
width: 823px;
height: 661px;
float:right;
padding:0px;
overflow-x:hidden;
overflow-y:auto;
border:0px solid #000;
}


#but_ob{
width:110px;
height:30px;
position:relative;
margin-top:35px;
margin-left:30px;
}


#but{
width:110px;
height:30px;
position:relative;
margin-top:0px;
margin-left:30px;
}


#tex1{
width:110px;
height:17px;
position:relative;
margin-top:10px;
margin-left:35px;
font:bold 10px Arial;
color:#fff;
}


//-->
</style>




<!--[if lte IE 6]>
<style type="text/css">
#content2 {
	background-attachment: fixed;
	}
</style>
<![endif]-->


<!--[if IE 7]>
<style type="text/css">
#content2 {
	background-attachment: fixed;
	}
</style>
<![endif]-->


</head>


<body>


<div style="position:relative; width:1000px; height:800px; margin:0px auto; text-align:left; background-color:#000; border:1px solid #000000; z-index:1">


	<div id="title"></div>


	<div id="left">
	<script language="javascript">
		home=new Image(); 
		home.src="images/buttons/home.gif"; 
		home2=new Image(); 
		home2.src="images/buttons/home2.gif";

		news=new Image(); 
		news.src="images/buttons/news.gif"; 
		news2=new Image(); 
		news2.src="images/buttons/news2.gif";


		termine=new Image(); 
		termine.src="images/buttons/termine.gif"; 
		termine2=new Image(); 
		termine2.src="images/buttons/termine2.gif";


		hist=new Image(); 
		hist.src="images/buttons/history.gif"; 
		hist2=new Image(); 
		hist2.src="images/buttons/history2.gif";


		bilder=new Image(); 
		bilder.src="images/buttons/bilder.gif"; 
		bilder2=new Image(); 
		bilder2.src="images/buttons/bilder2.gif";


		band=new Image(); 
		band.src="images/buttons/band.gif"; 
		band2=new Image(); 
		band2.src="images/buttons/band2.gif";


		presse=new Image(); 
		presse.src="images/buttons/presse.gif"; 
		presse2=new Image(); 
		presse2.src="images/buttons/presse2.gif";


		music=new Image(); 
		music.src="images/buttons/music.gif"; 
		music2=new Image(); 
		music2.src="images/buttons/music2.gif";


		kontakt_fan=new Image(); 
		kontakt_fan.src="images/buttons/kontakt_fan.gif"; 
		kontakt_fan2=new Image(); 
		kontakt_fan2.src="images/buttons/kontakt_fan2.gif";


		gaestebuch=new Image(); 
		gaestebuch.src="images/buttons/gaestebuch.gif"; 
		gaestebuch2=new Image(); 
		gaestebuch2.src="images/buttons/gaestebuch2.gif";


		impressum=new Image(); 
		impressum.src="images/buttons/impressum.gif"; 
		impressum2=new Image(); 
		impressum2.src="images/buttons/impressum2.gif";


		function bildwechsel(Bildnr,Bildobjekt)
		{
		window.document.images[Bildnr].src=Bildobjekt.src;
		}
		//-->
		</script>


		<div id="but_ob"> 
      		[url='index.php'][img]images/buttons/home.gif[/img][/url]
      	</div>

      	<div id="but"> 
      		[url='news.php'][img]images/buttons/news.gif[/img][/url]
      	</div>

      	<div id="but"> 
      		[url='#'][img]images/buttons/termine.gif[/img][/url]
      	</div>

      	<div id="but"> 
      		[url='#'][img]images/buttons/history.gif[/img][/url]
      	</div>

      	<div id="but"> 
      		[url='#'][img]images/buttons/bilder.gif[/img][/url]
      	</div>

      	<div id="but"> 
      		[url='#'][img]images/buttons/band.gif[/img][/url]
      	</div>

      	<div id="but"> 
      		[url='#'][img]images/buttons/presse.gif[/img][/url]
      	</div>

      	<div id="but"> 
      		[url='#'][img]images/buttons/music.gif[/img][/url]
      	</div>

      	<div id="but"> 
      		[url='#'][img]images/buttons/kontakt_fan.gif[/img][/url]
      	</div>

      	<div id="but"> 
      		[url='#'][img]images/buttons/gaestebuch.gif[/img][/url]
      	</div>

 		<div id="but"> 
      		[url='#'][img]images/buttons/impressum.gif[/img][/url]
      	</div>

	</div>

	<div id="content2">
		<div style="text-align:justify; margin-left:10px; margin-bottom:10px; font:bold 24pt Arial;">News</div>
  		a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a


  		a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a


  		a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a


	</div>


	<br style="clear:both;" />


</div>

</body>
</html>

Alles anzeigen

Uwe1234

Hallo zusammen,

ich habe jetzt alles mögliche versucht, leider habe ich das Problem immer noch nicht in den Griff bekommen. Hat nicht doch jemand eine Idee wie ich das Problem lösen kann. Über jeden Tipp wäre ich echt dankbar.
Gruß Uwe1234

jojo87

gib mir bitte mal einen Link zu deiner Seite.
Ich glaube, du hast nicht verstanden, was ich meinte.

Gruß,
Jojo

Sport-Tipps

würd ich auch gern haben..

uwe1234

Hallo und Sorry für die späte Antwort.

http://www.groovinheart.de

und zwar wenn die Seite scrollt, z.B. News.

Danke und Gruß Uwe1234

matman

hallo uwe1234,

habe zur Zeit ein ähnliches Problem (siehe mein Posting von heute mit Titel "Browserweiche für IE7 ......"). Habe mal kurz deinen Source Code überflogen. Da sehe ich z.B. innerhalb einer Box sowohl width/height als auch margin/padding. Das sollte man vermeiden da das im IE zu Problemen führen kann. Vielleicht hilft das ja schon etwas weiter. Die Angaben zu margin/padding könnte man z.B. nur im ersten Eltern-Element machen, also für <body>.

Ansonsten gibt es verschiedene Lösungsansätze. Als erstes sollte man feste Pixelangaben tunlichst vermeiden. Wenn das nicht geht, oder trotzdem Probleme auftauchen, dann hilft eigentlich nur noch eine Browserweiche. Bezogen auf deinen Fall müsstest Du dann vermutlich nur die Höhenangabe der Box, die im IE7 Probleme macht anpassen. Wäre in deinem Fall glaube ich eine kleinere Höhe. Ist bei mir jedenfalls auch so in der Art: Hintergrundbild wird bei mir im IE7 zu hoch positioniert, wenn ich die Box verkleinere passt es.

uwe1234

Hallo matman,
das werde ich mal versuchen, die Tipps umzusetzen. Als Anmerkung muss ich nur sagen, dass ich eine Pixelgenaue größe benötige, da ich Grafiken als Hintergrund benutze.

Im übrigen habe ich mit folgenden conditional comments versucht das Problem etwas "schöner" aussehen zu lassen:

Code

<!--[if IE 7]>
<style type="text/css">


#content {
	background-repeat:repeat-y;
	}
</style>


<![endif]-->

Alles anzeigen

Gruß Uwe1234

Tags