[tom]

In meiner Newsübersicht habe ich items mit und ohne Bild.

siehe z.B. angehängte Screenshot) Habe lange am css rumgebastelt, und im Firefox sieht es soweit OK aus. Der IE macht aber wenn kein Bild vorhanden ist im Titel 10 Pixel Einrückung.

Hat jemand einen Vorschlag was ich da besser machen könnte ?

Tom

Hier meine Codes:

Template:

<!-- ###NEWS_1### begin Template for a single item --> <div class="newsitem"> <div class="newsteaser"> <div class="newsimage"><!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###--></div> <!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--><br />
	 ###NEWS_SUBHEADER###<br /> <div class="newsmore"><!--###LINK_ITEM###-->###MORE###<!--###LINK_ITEM###--> >></div> </div> </div> <br /> <!-- ###NEWS_1### end-->

css-Auszug:

.newsitem {
	position:relative;
	top:0px; left:0px; 
	width:290px; height:140px; 
}

.newsteaser {
	position:absolute;
	top:0px; left:0px; 
	width:260px; height:auto; 
}

.newsimage {
	float:left;
	top:0px; left:0px; 
        padding-right: 10px;
}

.newsmore {
	position:absolute;
	top:auto; right:0px; 
	width:185px; height:auto;
	text-align:right;
}

Quelltext-Auszug:

<div class="newsitem"> <div class="newsteaser"> <div class="newsimage"><a href="index.php?id=13"></a></div> <a href="index.php?id=13" title="Kooperation mit Beispielheimer">Kooperation mit Beispielheimer</a><br />
	Dieses Jahr hat unser Unternehmen eine Kooperation mit Beispielheimer begonnen.<br /> <div class="newsmore"><a href="index.php?id=13">mehr</a> >></div> </div> </div> <br /> <div class="newsitem"> <div class="newsteaser"> <div class="newsimage"><a href="index.php?id=13"><img src="news4.jpg" width="90" height="110" /></a></div> <a href="index.php?id=13">Neues Prinzip</a><br />
	Die Weltneuheit wird Sie überzeugen.<br /> <div class="newsmore"><a href="index.php?id=13">mehr</a> >></div> </div> </div> <br />

[steffenK]

Der IE macht keinen Unterschied, ob ein Bild da ist oder nicht.

mach aus dem padding-right ein padding-left im .newsreader

oder ohne padding, dafür

.newsimage img {padding-right: 10px;}

[tom]

Vielen Dank für Deinen Hinweis !

habe es mal mit

.newsimage {
	float:left;
	top:0px; 
	left:0px; 
}

.newsimage img {
	padding-right: 15px;
}

gemacht.

Nun zeigt der Firefox die Seite korrekt an. Der IE macht allerdings links (EDIT: soll rechts heissen!) vom Image keine 15 Pixel Abstand.

Da zwischen <newsimage> und <img> noch ein <a> liegt habe ich auch mal

.newsimage a img {
	padding-right: 15px;
}

getestet - aber ohne Erfolg.

Laut meinen Unterlagen erkennt der IE .newsimage>a>img nicht an.
Sobald ich den Textblox rechts mit einem left-padding versehe rutscht der Text immer nach links (auch wenn kein Bild da ist)

Tom

hier nochmals Auszug aus dem Quelltext:

<div id="newsitem1" class="newsitem"> <div class="newsteaser"> <div class="newsimage"><a href="index.php?id=13"><img src="news.jpg" width="90" height="110" /></a></div> <a href="index.php?id=13">Neues Prinzip im Formenbau</a><br />
	    Firma hat ein neues Prinzip im Formenbau entwickelt. Die Weltneuheit wird Sie überzeugen.<br /> <div class="newsmore"><a href="index.php?id=13">mehr</a> >></div> </div> </div>

[steffenK]

Der Ausdruck .newsimage img reicht, da es nach unten weitervererbt wird.

Ich versteh nicht, warum Du jetzt links ein padding willst - dann schliesst Text und Bild nicht linksbündig ab.
aber bitte: .newsimage img {padding: 0 10px;}

Wenn das immer noch nicht Deinen Vorstellungen entspricht, mach doch mal ne Skizze, wie es aussehen soll ;)

[tom]

Zitat von steffenK

Der Ausdruck .newsimage img reicht, da es nach unten weitervererbt wird.

Ich versteh nicht, warum Du jetzt links ein padding willst - dann schliesst Text und Bild nicht linksbündig ab.
aber bitte: .newsimage img {padding: 0 10px;}

Wenn das immer noch nicht Deinen Vorstellungen entspricht, mach doch mal ne Skizze, wie es aussehen soll ;)

ich will gar kein padding-links. Ich will nur, dass es im IE gleich aussieht wie im Firefox.

Der IE akzeptiert das .newsimage img nicht, d.h. ich habe rechts vom Bild keinen Abstand. Im Firefox ist alles OK.

Tom

[tom]

oh sehe gerade, dass ich oben links statt rechts geschrieben habe

Und immer nur sage ich, dass Frauen links und rechts verwechseln ...

Tom

[steffenK]

tja, ich muss Dich enttäuschen - bei mir sieht es absolut gleich aus. Schau selbst im Anhang.
Hier der Source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style>
.newsitem {
	position:relative;
	top:0px; left:0px; 
	width:290px; height:140px; 
	padding:0;margin:0;
}

.newsteaser {
	position:absolute;
	top:0px; left:0px; 
	width:260px; height:auto; 
	
}

.newsimage {
	float:left;
	top:0px; left:0px; 
        
}
.newsimage img {padding-right: 10px;border:none;}
.newsmore {
	position:absolute;
	top:auto; right:0px; 
	width:185px; height:auto;
	text-align:right;
}
</style> <title>Untitled</title> </head> <body> <div class="newsitem"> <div class="newsteaser"> <div class="newsimage"><a href="index.php?id=13"></a></div> <a href="index.php?id=13" title="Kooperation mit Beispielheimer">Kooperation mit Beispielheimer</a><br />
	Dieses Jahr hat unser Unternehmen eine Kooperation mit Beispielheimer begonnen.<br /> <div class="newsmore"><a href="index.php?id=13">mehr</a> >></div> </div> </div> <br /> <div class="newsitem"> <div class="newsteaser"> <div class="newsimage"><a href="index.php?id=13"><img src="aktuell.jpg" width="90" height="110" /></a></div> <a href="index.php?id=13">Neues Prinzip</a><br />
	Die Weltneuheit wird Sie überzeugen.<br /> <div class="newsmore"><a href="index.php?id=13">mehr</a> >></div> </div> </div> <br /> </body> </html>

[humpun]

Ich würde persönlich einen grauen Background bevorzugen bei den News.
Dann sieht man, o News sind und kann man leichter ins Auge fassen. Es kommt drauf an ,wie deine restliche Seite natürlich aussieht ,aber leichter Kontrast muss sein.

mfG

humpun

[tom]

nachdem ich nun ewig Deine Version und meine Version verglichen habe, bin ich zumindest darauf gekommen, warum es bei Dir funktioniert hat und bei mir nicht. HTML + CSS sind identisch.

Das Problem liegt im Header. Ich verwende Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

und du strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Habe nun bei mir auch strict eingetragen und der Abstand ist da. Allerdings ist mein HTML wohl kein Strict - wobei in diesem Fall auf Validierung auch keinen Wert gelegt wird. Anzeige vor allem im IE - aber auch in anderen Browsern steht im Vordergrund ...

Tom

Frage: Kennt jemand einen Weg das Problem zu lösen ohne den DocType zu ändern bzw. welche Auswirkungen hat die Änderung evtl. auf andere Styles ?

[tom]

Zitat von humpun

Ich würde persönlich einen grauen Background bevorzugen bei den News.
Dann sieht man, o News sind und kann man leichter ins Auge fassen. Es kommt drauf an ,wie deine restliche Seite natürlich aussieht ,aber leichter Kontrast muss sein.

Ich mach für die Seite nur die Typo3-Programmierung - das Design wurde von einer Werbeagentur festgelegt. Auf dem Screenshot fehlt aber noch rechts ein Hintergrundbild, das sanft in den Text verläuft ...

Tom