✔ IE: Bild wird nicht richtig dargestellt....

Status
Nicht offen für weitere Antworten.
M

Malaxo

Erfahrenes Mitglied
Hey Leute

Bin dabei eine neue Page zu designen. Bis jetzt lief alles gut, nun wollte ich etwas einbinden für die News auf der Startseite. Es läuft wunder bar auf einer leeren Seite sowohl im IE als auch im FF. Nur in mein Design passt es wohl nicht so ganz hinein, den nun habe ich Fehler im IE (siehe Bild).

Hier der HTML Code:
HTML: 
<div id="middle">
	<div id="banner1">
		<div id="home_m">
			<?php 
				require ('menu.php');
			?>
		</div>
	</div>
	<div id="des">
		<div id="des2">
			<div id="text">
				Willkommen<br />
				<div class="bubble">
					<blockquote>
						<p>Titel News</p>
						<p>News news News news News news News news News news News news News news News </p>
					</blockquote>
					<cite><strong>Verfasser</strong>Datum</cite></div>
				<div class="bubble">
					<blockquote>
						<p>Titel News</p>
						<p>News news News news News news News news News news News news News news News </p>
					</blockquote>
					<cite><strong>Verfasser</strong> Datum</cite>
				</div>
				<p>Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text </p>
				<p>Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text Text text </p>
				<br />
			</div>
		</div>
	</div>
</div>

Das CSS:
HTML: 
body {
	font-size: 7px;
	font-family: "Verdana", "Helvetica", sans-serif;
	background-image: url(../images/bg.jpg);
}

div#container{
	position: relative;
	margin: 0 auto 0 auto;
	width: 793px;
}

div#top{
	height: 8px;
	width: 770px;
	background-image: url(../images/top.jpg);
	background-repeat: no-repeat;
	border: 0px solid black;
}

div#middle{
	width: 770px;
	background-image: url(../images/middle.jpg);
	background-repeat: repeat-y;
}

div#des{
	margin-left: 5px;
	background-image: url(../images/test.jpg);
	background-repeat: no-repeat;
}
div#text{
	padding: 15px;
	font-size: 12px;
	font-family: "Verdana", "Helvetica", sans-serif;
}

div#banner1{
	height: 127px;
	width: 770px;
	background-image: url(../images/banner/banner1.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
}

div#foo{
	width: 770px;
	background-image: url(../images/bottom.jpg);
	background-repeat: no-repeat;
}

/* Normal Bubble */
div.bubble {
	width: auto;
	font-size: 12px;
	font-family: "Verdana", "Helvetica", sans-serif;
	margin-bottom: 24px;
}

div.bubble blockquote {
	margin: 0px;
	padding: 0px;
	border: 1px solid #c9c2c1;
	background: transparent url(../images/tr.gif);
}

div.bubble blockquote p {
	margin: 10px;
	padding: 0px;
}

div.bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 15px;
	top: 6px;
	background: transparent url(../images/tip.gif) no-repeat 20px 0;
	font-style: normal;
}

Es liegt wohl an der Position: relative; brings aber nicht weg.

Das Coden sieht vielleicht nicht super aus:P aber sonst läuft alles so wie ich es will, bis jetzt.
 

Anhänge

  • ie.jpg
    ie.jpg
    8,6 KB · Aufrufe: 40
  • ff.jpg
    ff.jpg
    10,4 KB · Aufrufe: 25
Hi,

hast du mal einen Link zur Seite, denn ohne die Hintergrundbilder macht es wenig Sinn, sich den Quellcode näher anzuschauen.
 
nein leider nicht...

Aber es ist das 3-Eck das komisch angezeigt wird im IE (siehe Anhang IE & FF)
Das 3-Eck und Verfasser / Datum wird hier designt.

HTML: 
div.bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 15px;
	top: 6px;
	background: transparent url(../images/tip.gif) no-repeat 20px 0;
	font-style: normal;
}

Das Bild ist also tip.gif Im Anhang (IE) wird das 3-Eck wie verzogen dargestellt im FF aber so wie es sein sollte. Wird die Position auf absolute gesetzt, ist das 3-Eck nicht mehr verzogen jedoch am falschen platz:P wiso wird das 3-Eck den so komisch angezeigt......
 
Warum das Hintergrundbild im IE "gestaucht" wird, kann ich dir auf Anhieb auch nicht sagen, aber wenn eine absolute Positionierung da weiterhilft, dann setz es doch auf diese Weise um, und korrigiere den Positionswert entsprechend.
 
Durch absolute wird es aus dem Textfluss geworfen da es eine Classe ist und mehr mals vorkommt bringt es mir nichts wenn ich es aus dem Textfluss nehme. Es ist ein Newsfeed der generiert wird.

Komisch ist ja das ich das ganze Script in einem anderen Design klappt, also muss es an meinem Design liegen. Siehe Anhang
 

Anhänge

Vielleicht solltest du hier besser die nicht-funktionierende Version, anstelle des funktionierenden Beispiels anhängen.
 
haha;)

hab das Problem eingegrenzt.
CSS:
HTML: 
div#des{
	/*margin-left: 5px; */
	background-image: url(../images/test.jpg);
	background-repeat: no-repeat;
}

div#text{
	/*padding: 15px;*/
	font-size: 12px;
	font-family: "Verdana", "Helvetica", sans-serif;
}
.........

/* Normal Bubble */
div.bubble {
	width: auto;
	font-size: 12px;
	font-family: "Verdana", "Helvetica", sans-serif;
	margin-bottom: 24px;
}

div.bubble blockquote {
	margin: 0px;
	padding: 0px;
	border: 1px solid #c9c2c1;
	background: transparent url(../images/tr.gif);
}

div.bubble blockquote p {
	margin: 10px;
	padding: 0px;
}

div.bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 15px;
	top: 6px;
	background: transparent url(../images/tip.gif) no-repeat 20px 0;
	font-style: normal;
}

Wenn das Padding und Margin-Left im Des und im Text deaktiviert ist funktioniert es. Jedoch brauche ich die Angaben.

HTML Aufbau:
HTML: 
<div id="des">
	<div id="text">
		Willkommen<br />
		<div class="bubble">
			<blockquote>
				<p></p>
			</blockquote>
			<cite><strong>Verfasser</strong>Datum</cite></div>
		</div>
         </div>
</div>

Irgend wie sind die Angaben ins nächste Div übertragbar im Hintergrund:P anders kann ich es nicht erklären
 
So... Alle Bilder wurden kurzerhand ersetzt.

Aber das wichtigste sieht man ja;)

viel glück und danke falls ich was herausgefunden habe gebe ich Bescheid.


PS: hoffe du hast Apache oder IIS oder so was;) für PHP
 

Anhänge

Ich nutze lokal XAMPP ;)

Versuch es mal hiermit:

Code: 
div#text .bubble cite {
        position: relative;
        margin: 0px;
        padding: 7px 0px 0px 15px;
        top: 6px !important;
        top: 5px;
        left: 0 !important;
        left: -1px;
        background: transparent url(../images/tip.gif) no-repeat 20px 0;
        font-style: normal;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück