XHTML: margin och IE

Tråden skapades och har fått 5 svar. Det senaste inlägget skrevs .
1

Ny XHTML-fråga. Följande markup och CSS funkar utmärkt i Safari och Mozilla/Firefox:

HTML:

<div id="text">
	<h3 class="rebuild">Vi håller på att bygga en ny webplats...</h3>
		Lite text här...</div>

CSS:

#text {
	position: fixed;
	top: 260px;
	left: 200px;
	width: 500px;
	color: #000000;
	font: 10px verdana, arial, helvetica, sans-serif;
	}

h3 {
	font: bold italic 20px/10px georgia; 
	color: #CC0000;
	}
	
h3.rebuild {
	margin-top: 20px;
	margin-bottom: 12px;
	}

Blir hur bra som helst i vettiga browsers, men IE5/Mac tycks ignorera margin och det blir alltså inget vitt utrymme mellan texterna. Jag har prövat med att specificera height istället för margin, men det blev inte bättre. Någon som vet hur jag kommer runt problemet?

hmm, hur blir det om du lägger "Lite text här.." texten i en paragraf tag? (som den bör vara i)

  • Medlem
  • Karlstad
  • 2004-06-23 10:38

Jag tror IE får spader. Först säger du att <div> ska ha Verdana, osv. Sen säger du att det ska vara Georgia, och till sist "ändrar" du dej igen och lägger till ytterligare en stil.
Kan du inte förenkla; ta bort fontdefinitionerna i #text. Låt den stilen bara ha dimensioner på <div> elementet. Kanske måste du göra det ännu enklare genom att ha t.ex. en h2 istället för en extra h3-klass...
Förresten, 20px fontstorlek med 10px radmellanrum verkar lite skumt....

  • Medlem
  • 2004-06-23 10:38

Testa att använda en paragraf-tag(<p>) för den efterföljande texten. Det är nästan alltid en fördel att innesluta innehåll(text) med taggar som förklarar vad det är för typ av innehåll . På så sätt kan du definiera i stilmallen marginalen du vill ha mellan rubriken och paragrafen.

Testa det här:

HTML:

<div id="text">
	<h3 class="rebuild">Vi håller på att bygga en ny webplats...</h3>
	<p>Lite text här...</p>
</div>

CSS:

#text {
	position: fixed;
	top: 260px;
	left: 200px;
	width: 500px;
	color: #000000;
	font: 10px verdana, arial, helvetica, sans-serif;
	}

#text h3 {
	font: bold italic 20px/10px georgia; 
	color: #CC0000;
	margin-top: 20px;
	margin-bottom: 12px;
	}

#text p {
	margin-top: 12px;	
	}

OK, jag tar det lite mer utförligt. Så här ser det ut nu:

HTML:

<div id="intro">
		<p>En del text här...</p>
           </div>

          <div id="text">
	 <h3 class="rebuild">Vi håller på att bygga en ny webplats...</h3>
		<p>Mer text...</p>
          </div>

CSS:

p {
	color: #000000;
	font: 10px verdana, arial, helvetica, sans-serif;
	}

#text {
	position: fixed;
	top: 260px;
	left: 200px;
	width: 500px;
	margin-bottom: 5px;
	}

#text h3 {
	font: bold italic 20px georgia, serif; 
	color: #CC0000;
	margin-bottom: 10px;
	}
	
#intro {
	position: fixed;
	top: 160px;
	left: 200px;
	width: 400px;
	height: 600px;
	}

#intro p {
	color: #000000;
	font: italic 11px/13px georgia, serif;
	}

Ser perfekt ut i Safari/Firefox, men i IE5 får jag ingen whitespace efter <div id="intro"></div>, men whitespace efter <h3></h3>. Som sagt, margin har ingen effekt på IE tydligen.

Senast redigerat 2004-06-23 11:53

Efter lite tömmande av cachen i IE har det blivit bättre, men det är fortfarande inte samma precision som i de andra läsarna. Det får man väl räkna med ( ), men är det så att IE5 ignorerar margin-attribut?

1
Bevaka tråden