Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: IE7 Hintergrundproblem in DIV Boxen

  1. #1
    Uwe1234
    Gast

    Standard IE7 Hintergrundproblem in DIV Boxen

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    05.03.2006
    Alter
    29
    Beiträge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    quellcode bitte

  3. #3
    Arno112
    Gast

    Standard

    Link bitte...

  4. #4
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du kannst einen conditional comment verwenden, diesen bindest du im head nach den anderen css-angaben ein:
    Code:
    <!&#91;if ie 7&#93;-->
    <style type="text/css" media="screen">
    #Inhalt &#123;
     background&#58;.....
    background-position&#58; HIER NEU POSITIONIEREN;
    etc...
    &#125;
    </style>
    <!&#91;endif&#93;-->
    Diese Style-Angaben werden dann nur vom ie7 benutzt, andere Browser ignorieren sie.

    Gruß,
    Jojo

  5. #5
    Uwe1234
    Gast

    Standard

    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:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtmll-Strict.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="de">
    
    <head>
    
    <title></title>
    
    <style type="text/css">
    <!--
    
    body&#123;
    font-family&#58;Arial;
    font-size&#58;12px;
    background-color&#58;#000;
    text-align&#58;center;
    margin&#58;0px;
    padding&#58;0px;
    &#125;
    
    html&#123;
    scrollbar-arrow-color&#58; #ffffff;
    scrollbar-base-color&#58; #FFFFFF;
    scrollbar-track-color&#58; #FFFFFF;
    scrollbar-face-color&#58; #FF0000;
    scrollbar-highlight-color&#58; #000000;
    scrollbar-3dlight-color&#58; #ffffff;
    scrollbar-darkshadow-color&#58; #000000;
    scrollbar-shadow-color&#58; #FFFFFF;
    &#125;
    
    p&#123;
    margin&#58;0px;
    padding&#58;0px;
    &#125;
    
    td&#123;
    text-align&#58;justify;
    &#125;
    
    a&#58;link &#123;text-decoration&#58; underline; color&#58; black; border&#58; 0px none;&#125;
    a&#58;visited &#123;text-decoration&#58;underline; color&#58; black; border&#58; 0px none;&#125;
    a&#58;hover &#123;text-decoration&#58;none; color&#58; white; border&#58; 0px none;&#125;
    a&#58;active &#123;text-decoration&#58;underlinee; color&#58; black; border&#58; 0px none;&#125;
    a&#58;focus&#123;outline&#58; none;&#125;
    
    #title&#123;
    background-color&#58;#000;
    background-image&#58; url&#40;'../images/background/h_01.gif'&#41;;
    background-repeat&#58; no-repeat;
    width&#58;1000px;
    height&#58;139px;
    padding&#58;0px;
    border&#58;0px solid #000;
    &#125;
    
    #left&#123;
    background-color&#58;#000;
    background-image&#58; url&#40;'../images/background/h_02.gif'&#41;;
    background-repeat&#58; no-repeat;
    width&#58;177px;
    height&#58;661px;
    padding&#58;0px;
    float&#58;left;
    border&#58;0px solid #000;
    &#125;
    
    #content&#123;
    background-color&#58;#000;
    background-image&#58; url&#40;'../images/background/h_03.gif'&#41;;
    background-repeat&#58; no-repeat;
    width&#58; 823px;
    height&#58; 661px;
    float&#58;right;
    padding&#58;0px;
    overflow-x&#58;hidden;
    overflow-y&#58;auto;
    border&#58;0px solid #000;
    &#125;
    
    #content2&#123;
    background-color&#58;#000;
    background-image&#58; url&#40;'../images/background/h_04.gif'&#41;;
    background-repeat&#58; no-repeat;
    width&#58; 823px;
    height&#58; 661px;
    float&#58;right;
    padding&#58;0px;
    overflow-x&#58;hidden;
    overflow-y&#58;auto;
    border&#58;0px solid #000;
    &#125;
    
    #but_ob&#123;
    width&#58;110px;
    height&#58;30px;
    position&#58;relative;
    margin-top&#58;35px;
    margin-left&#58;30px;
    &#125;
    
    #but&#123;
    width&#58;110px;
    height&#58;30px;
    position&#58;relative;
    margin-top&#58;0px;
    margin-left&#58;30px;
    &#125;
    
    #tex1&#123;
    width&#58;110px;
    height&#58;17px;
    position&#58;relative;
    margin-top&#58;10px;
    margin-left&#58;35px;
    font&#58;bold 10px Arial;
    color&#58;#fff;
    &#125;
    
    //-->
    </style>
    
    
    <!--&#91;if lte IE 6&#93;>
    <style type="text/css">
    #content2 &#123;
    	background-attachment&#58; fixed;
    	&#125;
    </style>
    <!&#91;endif&#93;-->
    
    <!--&#91;if IE 7&#93;>
    <style type="text/css">
    #content2 &#123;
    	background-attachment&#58; fixed;
    	&#125;
    </style>
    <!&#91;endif&#93;-->
    
    </head>
    
    <body>
    
    <div style="position&#58;relative; width&#58;1000px; height&#58;800px; margin&#58;0px auto; text-align&#58;left; background-color&#58;#000; border&#58;1px solid #000000; z-index&#58;1">
    
    	<div id="title"></div>
    
    	<div id="left">
    	<script language="javascript">
    		home=new Image&#40;&#41;; 
    		home.src="images/buttons/home.gif"; 
    		home2=new Image&#40;&#41;; 
    		home2.src="images/buttons/home2.gif";
            
    		news=new Image&#40;&#41;; 
    		news.src="images/buttons/news.gif"; 
    		news2=new Image&#40;&#41;; 
    		news2.src="images/buttons/news2.gif";
    
    		termine=new Image&#40;&#41;; 
    		termine.src="images/buttons/termine.gif"; 
    		termine2=new Image&#40;&#41;; 
    		termine2.src="images/buttons/termine2.gif";
    
    		hist=new Image&#40;&#41;; 
    		hist.src="images/buttons/history.gif"; 
    		hist2=new Image&#40;&#41;; 
    		hist2.src="images/buttons/history2.gif";
    
    		bilder=new Image&#40;&#41;; 
    		bilder.src="images/buttons/bilder.gif"; 
    		bilder2=new Image&#40;&#41;; 
    		bilder2.src="images/buttons/bilder2.gif";
    
    		band=new Image&#40;&#41;; 
    		band.src="images/buttons/band.gif"; 
    		band2=new Image&#40;&#41;; 
    		band2.src="images/buttons/band2.gif";
    
    		presse=new Image&#40;&#41;; 
    		presse.src="images/buttons/presse.gif"; 
    		presse2=new Image&#40;&#41;; 
    		presse2.src="images/buttons/presse2.gif";
    
    		music=new Image&#40;&#41;; 
    		music.src="images/buttons/music.gif"; 
    		music2=new Image&#40;&#41;; 
    		music2.src="images/buttons/music2.gif";
    
    		kontakt_fan=new Image&#40;&#41;; 
    		kontakt_fan.src="images/buttons/kontakt_fan.gif"; 
    		kontakt_fan2=new Image&#40;&#41;; 
    		kontakt_fan2.src="images/buttons/kontakt_fan2.gif";
    
    		gaestebuch=new Image&#40;&#41;; 
    		gaestebuch.src="images/buttons/gaestebuch.gif"; 
    		gaestebuch2=new Image&#40;&#41;; 
    		gaestebuch2.src="images/buttons/gaestebuch2.gif";
    
    		impressum=new Image&#40;&#41;; 
    		impressum.src="images/buttons/impressum.gif"; 
    		impressum2=new Image&#40;&#41;; 
    		impressum2.src="images/buttons/impressum2.gif";
    
    		function bildwechsel&#40;Bildnr,Bildobjekt&#41;
    		&#123;
    		window.document.images&#91;Bildnr&#93;.src=Bildobjekt.src;
    		&#125;
    		//-->
    		</script>
    
    		<div id="but_ob"> 
          		[img]images/buttons/home.gif[/img]
          	</div>
          	
          	<div id="but"> 
          		[img]images/buttons/news.gif[/img]
          	</div>
          	
          	<div id="but"> 
          		[img]images/buttons/termine.gif[/img]
          	</div>
          	
          	<div id="but"> 
          		[img]images/buttons/history.gif[/img]
          	</div>
          	
          	<div id="but"> 
          		[img]images/buttons/bilder.gif[/img]
          	</div>
          	
          	<div id="but"> 
          		[img]images/buttons/band.gif[/img]
          	</div>
          	
          	<div id="but"> 
          		[img]images/buttons/presse.gif[/img]
          	</div>
          	
          	<div id="but"> 
          		[img]images/buttons/music.gif[/img]
          	</div>
          	
          	<div id="but"> 
          		[img]images/buttons/kontakt_fan.gif[/img]
          	</div>
          	
          	<div id="but"> 
          		[img]images/buttons/gaestebuch.gif[/img]
          	</div>
          	
     		<div id="but"> 
          		[img]images/buttons/impressum.gif[/img]
          	</div>
    		    	
    	</div>
    	
    	<div id="content2">
    		<div style="text-align&#58;justify; margin-left&#58;10px; margin-bottom&#58;10px; font&#58;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&#58;both;" />
    
    </div>
    	
    </body>
    </html>

  6. #6
    Uwe1234
    Gast

    Standard

    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

  7. #7
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

    Gruß,
    Jojo

  8. #8
    Fortgeschrittene/r
    Registriert seit
    23.02.2008
    Ort
    Graz
    Beiträge
    174
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    würd ich auch gern haben..

  9. #9
    uwe1234
    Gast

    Standard

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

    www.groovinheart.de

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

    Danke und Gruß Uwe1234

  10. #10
    matman
    Gast

    Standard

    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.

Ähnliche Themen

  1. div boxen verschieben
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.09.2007, 00:20
  2. div boxen problem
    Von kappilino im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.09.2007, 23:16
  3. Hintergrundproblem. CSS nicht korrekt?
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 13.06.2007, 13:54
  4. Hintergrundproblem in IE
    Von sermeter im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 31.10.2006, 10:57
  5. Hintergrundproblem
    Von Raistlin im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 10
    Letzter Beitrag: 24.07.2005, 20:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •