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-Code:

<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-Code:

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.

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-Code:

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

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

haha

hab das Problem eingegrenzt.
CSS:

HTML-Code:

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-Code:

<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

Kannst du dieses Modell (incl. aller Grafiken) als ZIP-Datei hier hochladen?

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

Ich nutze lokal XAMPP

Versuch es mal hiermit:

Code :

1 2 3 4 5 6 7 8 9 10 11

div#text .bubble cite {         position: relative;         margin: 0px;         padding: 7px 0px 0px 15px;         [b]top: 6px !important;         top: 5px;         left: 0 !important;         left: -1px;[/b]         background: transparent url(../images/tip.gif) no-repeat 20px 0;         font-style: normal; }

also bei mir geht es NICHT:P

Geht es etwa bei dir?

Würde ich es ansonsten nicht vorschlagen?

also bei mir wird es im IE immer noch so verkrümmt dargestellt...
Diese Änderung alleine hat bei MIR nichts genutzt.

top: 6px !important;
top: 5px;
left: 0 !important;
left: -1px;


Im Firefox ist es aber immernoch OK. IE nicht....

Füge mal deine Dateien als zip ein

Wozu soll ich das als ZIP-Datei hochladen, wenn es doch nur vier Zeilen im Stylesheet sind, die ich geändert bzw. hinzugefügt habe?

hehe ja aber bei mir funktioniert es trotzdem nicht:P
IE Version? ich hab IE 6.0