Suttit och pillat med en sida som fungerar helt perfekt som jag vill ha den i FF och Opera. Har kört den genom validator och .html går igenom. Basic.css går inte helt igenom, men det den klagar över är saker som inte borde spela in. Content.css validerar också bra.

Så varför vill det inte se bra ut i IE? Jag har kollat i 6.0 som är det jag har på datorn. Det är möjligt att den ser bra i ut i 7.0.

(bara den sidan som jag länkat till, inget mer är gjort)

http://www.akademiskridkonst.se/test/index.html

Css kodningen:
http://www.akademiskridkonst.se/test/basic.css
http://www.akademiskridkonst.se/test/content.css

Det är inte lätt att göra saker crossbroser-kompatibelt ibland. I IE 7:an så kommer texterna direkt under bilden till skillnad från ff som har texten lite under. Dock är textrutorna bredare än bilderna också - så det ser lite konstigt ut på båda.

Jag tycker att du skall märka upp dina bilder och rubriker ungefär så här:

<div class="menuitem">
    <p class="image"></p>
    <p class="firstpage">Kurser, Evenemang m.m.</p>
</div>

div.menuitem {
    padding: 0;
    margin: 0;
}

p.image {
    padding: 0;
    margin: 0;
}

p.firstpage {
	padding: 3px;
	color: #fff;
	font-weight: bold;
	text-align: center;    
}

Har du något förslag på hur man skulle kunna gör det på ett annat sätt?

Testade att göra som det är beskrivet under ditt svar (förlat dålig på namn), men jag tror min hjärna snurrade till allt för inget blev som det skulle...

Börja med att nollställa alla värden till default för webbläsarna. Då gör du så här:

html, body, div, span, code, h1, h2, h3, h4, h5, h6, blockquote, ul, li, p, em, font,
dl, dt, dd, ol, ul, li, table, tr, td
{margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;
font-family: inherit;vertical-align: baseline;}

Därefter börjar du bygga med dina egna värden.

mvh/Lillan