marginaltrixande

Hej!

Jag håller på med en sida som ska ha en "blommig" bakgrund. Det ska finnas en tabell med rundade hörn. Se: http://ahlbergs.net/test

Problemet är att det inte ser likadant ut i Opera/IE/Firefox. Om jag ändrar på marginalen i min css:

BODY {
	MARGIN-TOP: 10px;
	FONT-SIZE: 12px;
	MARGIN-LEFT: 10px;
	COLOR: #3C3364;
	FONT-FAMILY: Trebuchet MS, Verdana, Geneva, Arial;
	background-image: url(images/img_138.gif);
}

MARGIN-TOP, så flyttas toppmarginalen i Opera men inte i de andra. Om jag ska kunna fixa hörnorna i tabellen, så måste ju tabellen ligga still! :e

Några förslag på hur jag ska lösa det?

/Håkan

I stället för att använda 'margin-top' testa

margin: 10px 0 0 0;

Vet inte om det har någon betydelse...

De andra webbläsarna kanske lyssnar till attributet padding istället?

Du kan ju prova att sätta "padding: 0;" på body också för att vara säker. Eller göra tvärtom. Sätta:

body {
margin: 0;
padding-top: 10px;
}

Eller så kan du sätta både margin och padding till 0 på body och låta tabellen ha en topmargin på 10px istället.

Förresten. Jag antar att du skulle vilja att de rundade hörnens blombakgrund passade med body-bakgrunden. Det kan verka svårt när tabellen är centrerad men en metod att göra det (förutsatt att tabellen har en fast bredd) är att också låta bakgrunden vara centrerad:

body {
background: url(images/img_138.gif) center top;
}

Sedan återstår bara att beräkna (företrädesvis med hjälp av ett bildbehandlingsprogram) var de rundade kanterna kommer att hamna utifrån mitten. Här kommer alltså bakgrundsbildens horisontella centrum att hamna på sidans horisontella centrum och bakgrundsbildens överkant i sidans överkant och därifrån upprepa sig utåt.

Hej!

Tack för alla svar. Har inte hunnit kolla på dem ännu, men jag återkommer :)

/Håkan