100%, Bild, IE 7 geht nicht

Status
Nicht offen für weitere Antworten.
W

WolfBauer

Erfahrenes Mitglied
Hi,
ich habe folgendes Konstrukt:

Code: 
<td id="j_id252:j_id257td1" class="icePnlTbSetCnt">
  <div id="j_id252:j_id257:0:j_id258">
    <div id="j_id252:j_id257:0:j_id259" class="icePnlGrp game_container">
      <img src="/FourElementsProj/images/Default/Maps/WorldMap/Background.jpg"  id="j_id252:j_id257:0:game_mapSrc" class="iceGphImg" alt=""/>
    </div>
  </div>
</td>

Links neben dem ganzen ist eine Navigation. D. h. Es fehlen also ca. 200px der Gesamten Breite des Bildschirms. Folgendes css

.game_container {
width: 100%;
height: 600px;
overflow: auto;
}

Im Firefox wird alles so angzeigt wie ich es möchte. Der game_container wird bezieht seine 100% auf die übergeordneten Elemente und man kann über dessen Scollbalken bei dem Bill scrollen.

Im IE 7 sieht das ganze allerdins anders aus. Hier wird fast das ganze Bild in der breite gezeichnte und der game_container paßt sich in der breite an.

gibt es einen Trick dem IE das Firefox verhalten beizubringen?

EDIT:
Also width: 100%; kann ich schon mal weglassen overflow: scroll bringt auch keinen unterschied. Der IE will immer das ganze Bild malen und ignoriert overflow: scroll außer in der Höhe.

EDIT2:
Es muss an dem Bild liegene. Ich habe jetzt einfach mal das Bild durch viel Text ersetzt und siehe da. Selbst der IE7 macht die richtigen Scrollbalken und Breite. Wie kann ich ihm jetzt beibringen, dass er das Bild auch in das div Packt?

Gruß
 
Zuletzt bearbeitet:
Hi,

hast du mal einen Link zu der Seite, damit sich das direkt in den genannten Browsern anschauen kann?

mfg Maik
 
Das ist aber äußerst ungünstig, denn mit deinem präsentierten Code-Schnipsel kann ich das beschriebene Verhalten im IE7 überhaupt nicht reproduzieren.

Wie lauten denn der übrige HTML-Code der Tabelle, sowie die Stylesheets der involvierten Klassen icePnlTbSetCnt, icePnlTbSetCnt und iceGphImg?

Und in welchem Darstellungsmodus laufen die Browser, sprich welcher Dokumenttyp wurde für das Dokument deklariert?

mfg Maik
 
Hi,
hier noch ein paar Infos:
<!-- <?xml version="1.0" encoding="UTF-8"?> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Und die Styles (gehören zu icefaces, habe ich also bisher nicht geändert und sind auch nicht sonderlich interessant):

.icePnlTbSetCnt {
/*newly added class*/
background: #FFF url( './css-images/contentContainer_bg.gif' ) repeat-x top left;
border-bottom: 1px solid #d9d9d9;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
padding: 10px;
}

.iceGphImg {
}

.icePnlGrp {
}

Wenn ich eine feste Breite angeben, dann funtioniert das ganze in allen Browsern. Nur bei 100% macht der IE7 keine Scrollbalken.

Gruß
 
Hi,

falls es dich beruhigt: der IE6 steht da seinem Nachfolger in nichts nach.

Und selbst diese Regelerweiterungen zu Testzwecken

Code: 
table {
    width:500px;
}

.game_container {
    width: 100%;
    height: 600px;
    overflow: auto;
    overflow-x:hidden;
    overflow-y:auto;
}
beeindrucken die beiden Brüder in keinster Weise.

mfg Maik
 
Das beuetet also, dass ich eine feste Breite benutzen muss. Nicht sehr schön aber wohl notwendig.

Falls jemand eine Lösung kennt würde sie mich trotzdem interessieren.

Viel Dank und Gruß
 
Ich werde aus der Problemstellung ehrlich gesagt nicht schlau, denn gerade eben haben plötzlich die IEs den horizontalen Scrollbalken angezeigt, dafür FF (2.0.0.14) das DIV in der Breite auseinandergezogen und dementsprechend das Bild in seiner vollen Breite angezeigt. :suspekt:

mfg Maik
 
Hi nochmal.
Ich musste es nochmal probieren. :D
Ich habe jetzt ein ganz einfaches Beispiel:

Code: 
<!-- <?xml version="1.0" encoding="UTF-8"?> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ice="http://www.icesoft.com/icefaces/component" 
      xmlns:jsp="http://java.sun.com/JSP/Page" >
	  <head>
	<title>Zentrale Formate</title>
		<style type="text/css">
		.test {
			backcolor: #ff0000;
		    width:500px;
		}

		.game_container {
		    width: 100%;
		    height: 600px;
		    overflow: auto;
		    overflow-x:hidden;
		    overflow-y:auto;
		}
		</style>
	</head>
    <body>
		<div class="test">
			<div class="game_container">
				<img src="Background.jpg" />
			</div>
		</div>
    </body>
</html>

Und siehe da. So funtioniert es im IE und im Firefox. :confused: Ich muss mal schau´n was die ICEFACES komponeten anstellen, dass es im IE nicht geht.

Ich melde mich dann nochmal.

EDIT: Ich vermute es liegt an dem gesamten Layput der Seite. Oben Head, links Navi mit 200 px Breite und rechts 100% Breite. (wie hier http://www.strictlycss.com/examples/three-column-layout-7.asp)
Ich denke, da rechts nie eine wirkliche Breite angeben wird, verwirrt dass den IE. Obwohl ich eigentlich dachte, dass er sich an der tatsächlichen Breite des übergeordneten Objektes orientiert.
 
Zuletzt bearbeitet:
Soweit war ich zwischenzeitlich auch schon, dass es ohne die Tabelle einwandfrei funktioniert, nur wusste ich ja nicht, ob du auf sie verzichten kannst. ;-)

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück