Avstånd mellan textstycken

2 svar · 419 visningar · startad av Bjuufaren 10 sep. 2004

BjuufarenMedlem sedan okt. 2003108 inlägg

Frågan10 sep. 2004 09:51#1

Hej,

Jag vore tacksam om någon av CSS-experterna här kunde hjälpa mig med följande problem:

Jag har en vanlig HTML-sida som ser ut som följer:

<h1>Rubrik</h1>
<p>Text..</p>
<h2>Underrubrik</h2>
<p>Mer Text..</p>

Med hjälp av en CSS-fil ändrar jag typsnitt, padding, etc. Tyvärr blir resultatet ordentligt olika i olika webbläsare. Ta gärna en titt här så förstår ni vad jag menar:

http://w1.351.telia.com/~u35100476/css-suck.png

Som ni ser är avståndet mellan den övre linjen och den första rubriken olika (liknande, men mindre markant, skillnad finns mellan övriga rubriker och stycken.)

Det går naturligtvis att ändra med padding-top/bottom, men när det ser acceptabelt ut i IE5 är det groteskt i Opera, till exempel.

Någon som kan komma med några kloka tips på hur jag ska göra för att de ska se bra ut?

jarvkloMedlem sedan juli 20013 378 inlägg

10 sep. 2004 16:59#2

Hmm...

Har du bara jobbat med padding?
Vilken <!DOCTYPE kör du med i dokumentet (har du någon alls) ?

Ett angreppssätt är naturligtvis att börja med att sätta både padding och margin till 0 på alla inblandade taggar... Då *bör* det se lika illa ut i alla tre webbläsarna iaf ;)

Släng sedan in en <!DOCTYPE äverst som ger dig "quirks mode" (se http://www.hut.fi/u/hsivonen/doctype.html ) - Altenativt kan du helt enkelt ta bort den ev. <!DOCTYPE du har - det ger samma effekt (orsak: MSIE5 har *bara* "quirks mode", och eftersom du har med den som grundkrav blir det då den som måste få "sätta ribban" för all CSS tyvärr :( )
Nu bör det (fortfarande) se lika ut i alla webbläsarna.

Jobba sedan omväxlande med margin-top, padding-top, margin-bottom och padding-bottom för att få fram de avstånd du vill ha i alla tre webbläsarna (du kanske ev. behöver meka med line-height: också förresten)

Jag har lite problem med min PC-miljö just nu, så jag kan inte testa om det öht går att få till det du vill, men där har du mina funderingar om hur jag skulle försöka angripa problemet iaf ;)

Lycka till!

PS - Du kanske också kan ha nytta av denna länk: http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php (eller någon av länkarna i artikeln) :bire

BjuufarenMedlem sedan okt. 2003108 inlägg

13 sep. 2004 18:38#3

Det gick att lösa med margin-top. Det blev inte helt perfekt, men tillräckligt bra.

Tack för hjälpen.