<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta http-equiv="content-language" content="de"/>
</head>
<body>
<div style="border:3px #000000 solid;margin-top:65pt">
	<span style="float:left;padding:3px">27.01.2004 um 12:00</span>
	<span style="float:right;text-align:right;padding:3px">Webmaster</span>
	<div style="clear:both;background-color:#100FA9;color:#FFFFFF;border-top:3px #000000 solid;padding:3px;margin-top:0">Text</div>
</div>
</body>
</html>

Ich möchte geene die die darstellung wie sie in opera und in Mozilla ist auch im IE haben hat jemand eine Idee? (der abstand zwischen "Text" und dem schwazen strich da drüber soll genauso groß sein wie der abstand zu den schwarzen strichen auf den anderen seiten)

MC-Olivenoel

hi

musst du zwingend div nehen

ich würde bei diesem beispiel eher ne popligen tabelle benutzen

aggro

Hi,

schliess mich an Tabellen sind immer gut.

mfg
aggro

Mr.StH

das wollte ich eigentlich nicht so gerne (Barierefreiheit:Sccrenreader)
also nur wenn keine andere Möglichkeit besteht will ich zu Tabellen greifen.

Dexter

Das Problem scheint mir mal wieder das box-model-Problem zu sein.
Du müsstest also nur das border-top von "Text" anders lösen/auslagern, dann muss das eigentlich hinhauen.
Finger weg von Tabellen!

Edit: Weil Du's bist ('ne andere Lösung - Hack):

PHP-Code:


		
			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Test</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>

<meta http-equiv="content-language" content="de"/>

<style type="text/css">

div div {

    font: 1em Georgia, "Times New Roman", Times, serif;

    clear:both;

    background-color:#100FA9;

    color:#FFFFFF;

    border-top:3px #000000 solid;

    padding:0px 3px 3px;

    margin-top:0

}

div>div {

    padding:3px 3px 3px;

}

</style>

</head>

<body>

<div style="border:3px #000000 solid;margin-top:65pt">

    <span style="float:left;padding:3px">27.01.2004 um 12:00</span>

    <span style="float:right;text-align:right;padding:3px">Webmaster</span>

    <div>Text</div>

</div>

</body>

</html>

Mr.StH

eigentlich glaube ich nicht das es das box-model-Problem ist da das Problem eigtlich doch nur im IE 5.x auf treten sollte ich habe das Problem aber im IE 6.

Aber deine Lösung klappt trotzdem. Danke

Mr.StH

Mittlerweile glaube ich schon das es sich um Reste des box-model-Problems handelt, aber nur wenn eine div mit float ein div folgt und auch nur dort bei der border-top. ich habs jetzt mit

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta http-equiv="content-language" content="de"/>
</head>
<body>
<div style="border:3px #000000 solid;margin-top:65pt">
<div style="float:left;padding:3px">27.01.2004 um 12:00</div>
<div style="padding:3px;text-align:right">Webmaster</div>
<div style="clear:both;background-color:#100FA9;color:#FFFFFF;padding:3px;border-top:3px #000000 solid">Text</div>
</div>
</body>
</html>

gelöst.

Dexter

Zitat:

eigentlich glaube ich nicht das es das box-model-Problem ist da das Problem eigtlich doch nur im IE 5.x auf treten sollte ich habe das Problem aber im IE 6.

Jein. IE6 machts auch im Quirksmode nicht richtig. Das ist aber hier aber scheinbar nicht Dein Problem

Wäre lieb wenn sich noch jemand damit genauer befassen tät, ich würd gern wissen, wie das Problem mit dem Float:right zustande kommt. Bzw. warum das so ist.

Anzeige

Anmelden

Weitere Tipps