CSS Ie 7 / ie 8 / ff 3.0.11 - css probleme

Istanblueee

Cadet 3rd Year
Registriert
März 2009
Beiträge
38
Hi Leute, ich hab n großes Problem,

und zwar habe ich das folgende Problem:

Code:
			<div class="productPreview">
			   <div class="tshirtPreview"         id="tshirtview"><img src="{$THUMBNAIL_URL1}" style="position:relative;left:-90px;top:125px;width:110px;" /></div>
			   <div class="apronPreview"          id="apronview"><img src="{$THUMBNAIL_URL1}" style="position:relative;left:-50px;top:145px;width:50px;height:50px;" /></div>  
			   <div class="beermugPreview"        id="beermugview"><img src="{$THUMBNAIL_URL1}" style="position:relative;left:78px;top:-20px;width:150px;" /></div>
			   
			   <div class="productPreviewButtons">
			      <a href="javascript:void(0);" onclick="productPreview('left')"><img src="./images/buttabs/round_black_arrow_left.gif" class="switchLeftButton" id="leftButton" /></a>
			      <span class="switchProductPreviewText" id="Productname"><strong>T-shirt</strong></span>
			      <a href="javascript:void(0);" onclick="productPreview('right')"><img src="./images/buttabs/round_black_arrow_right.gif" class="switchRightButton" id="rightButton" /></a>
			   </div>
			</div>


hier ist der zugehörige CSS Code

Code:
.productPreview {
   position: relative;
   background-repeat: no-repeat;
   top:220px;
   left:0px;
   width: 315px;
   height: 345px;
   /*border: 1px thin red;*/
}
.productPreview .tshirtPreview {
	display: block;
	background: url() no-repeat;
   background-repeat: no-repeat;
   width: 315px;
   height: 344px;
}
.productPreview .apronPreview {display: none;
   background: url() no-repeat;
   background-repeat: no-repeat;
   width: 315px;
   height: 344px;
   
}
.productPreview .beermugPreview {
   display: none;
   background: url() no-repeat;
   background-repeat: no-repeat;
   width: 315px;
   height: 344px;
}
.productPreview .productPreviewButtons {
   position: relative;
   background-repeat: no-repeat;
   top:0px;
   left:0px;
   /*border: 1px thin red;*/
}
.switchLeftButton {
   position: absolute;
   background-repeat: repeat-x;
   left:50px;
   width: 17px;
   height: 17px;
}
.switchProductPreviewText {
   position:absolute;
   width: 100%;
   height:20px;
   left: 120px;
}
.switchRightButton {
   position:absolute;
   /*background-image: url('');*/
	background-repeat: repeat-x;
	left: 230px;
   width: 17px;
   height: 17px;
}

Im ie 7 verschiebt sich meine classe .productPreview nach links genauso wie die .productPreview .tshirtPreview | .productPreview .apronPreview | .productPreview .beermugPreview ist ja verständlich weil die alle zusammen an der gleichen Klasse hängen.

Ich glaube das Problem ist, dass IE 8, FF einige Befehle anders inträpetiert als die IE 7. Aber welche???

Die oberen Befehle passen im IE 8, FF, Opera 9.0, Safari 4.0 GoogleChrome perfekt nur im IE 7 nicht!

Sobald ich etwas an der CSS Datei änder, damit es im IE 7 passt, kracht es in den anderen Browsern!

Ich bin am verzweifeln, sitzt grad seit 2 Studen an diesem Problem.

Vielen Dank schon im Vorraus!

Mfg Istanblueee
 
Zuletzt bearbeitet:
Die einfachste Lösung: Fertige eine separate CSS-Datei nur für den IE 7 an und binde sie mit einer If-Abfrage folgendermaßen ein:

Code:
<!--[if lt IE 8]>
<link type="text/css" rel="stylesheet" href="warum-gibt-es-nur-diesen-schrecklichen-ie.css" />
<![endif]-->

Damit bekommen alle IEs unter der Versionsnummer 8 ihre CSS-Datei. Soll nur der IE 7 gefüttert werden, reicht ein
Code:
<!--[if IE 7]>

P. S.: Solche If-Abfragen kennen nur die Browser aus Redmond. Die anderen bemühen sich hingegen darum, von den Webmastern nicht immer eine Extra-Wurst zu bekommen :)
 
Gott sei Dank gibts die Conditional Comments, sonst wär man ja mega aufgeschmissen. Jeder der IE nutzt hats verdient sein Datenvolumen zu verbrauchen!

Btw. "alt"-Attribute in den <img />-Tags nicht vergessen.
Und was bitte macht background: url() no-repeat;?
 
t R I A S schrieb:
Und was bitte macht background: url() no-repeat;?

Wahrscheinlich ein Hintergrundbild laden, das Istanblueee aber aus datenschutzrechtlichen Gründen nicht angeben wollte ^^

Wäre ja z. B. doof, wenn der Chef mitbekommen würde, dass "seine" Grafiken über fremde Seiten aufgerufen würden ...
 
Kausalat schrieb:
Die einfachste Lösung: Fertige eine separate CSS-Datei nur für den IE 7 an und binde sie mit einer If-Abfrage folgendermaßen ein:

Code:
<!--[if lt IE 8]>
<link type="text/css" rel="stylesheet" href="warum-gibt-es-nur-diesen-schrecklichen-ie.css" />
<![endif]-->

Damit bekommen alle IEs unter der Versionsnummer 8 ihre CSS-Datei. Soll nur der IE 7 gefüttert werden, reicht ein
Code:
<!--[if IE 7]>

P. S.: Solche If-Abfragen kennen nur die Browser aus Redmond. Die anderen bemühen sich hingegen darum, von den Webmastern nicht immer eine Extra-Wurst zu bekommen :)


So Kausalat thx für deine Hilfe, aber ich hatte es genauso wie du es beschrieben hattest geschrieben.Ich habe auch geschaut ob meine seite in die ie7.css Datei reingeht! Ja, er geht rein! Sobald ich da was änder tut sich da nix, verflucht!

@tRIAS jo alt Tag habe ich noch zusätzlich eingefügt. Und was dieses background-image: url(); angeht.Ich habe die Felder aus Datenschutzgründen leergelassen, wie es der Kaussalat beschrieben hatte
 
Istanblueee schrieb:
Sobald ich da was änder tut sich da nix, verflucht!

Versuche es mal mit "Important"-Suffixen bei den CSS-Angaben für den lieben IE 7.

Beispiel:
Code:
.blubb {
padding: 0 3px 0 5px [COLOR="Red"]! Important[/COLOR];
}
 
könnte sein dasd im elternelement von .productPreview position: relative setzen musst, wenn das nich funzt post mal mehr code (zumindest die container elemente bis body und dazugehöriges css).
 
es gibt keinen Übercontainer!

iCh habe das Problem endlich lösen können,meine Standart css Datei wurde trotz des Browser Condition´s angezogen die natürlich für alle Browser gilt!

<!--[if IE 6]>

und ein Kommentarfeld

<!-- [if IE 6 ]-->

sehen sich natürlich ähnlich,

und wenn man diese Ähnlichkeit übersieht, kriegt man natürlich die KRise!!!!

vielen Dank für die Beiträge

haut rein!

PS: ICH HASSE Internet Explorer!
 
Allerdings :)
Meine Signatur überschneidet sich thematisch mit etwa der Hälfte der gesamten Themen hier ^^
 
Zurück
Oben