Varför funkar inte min site i IE?

float är ett ganska knepigt kapitel att bemästra. I vilket fall är inte värdet 'center' möjligt i css 2.1. float kan bara ha left, right (eller none). De metoder som finns för att centrera innehåll är text-align:center; och margin:auto; (div-align:center; funkar för all del ofta, men 'align' är "depreceated" och validerar inte i XHTML 1.0 Strict)

Referens: http://www.w3.org/TR/CSS21/visuren.html#float-position

margins och paddings tolkas lite olika i IE kontra övriga webbläsare - fast i det här fallet räcker det med att använda fixa världen, px istället för %. Eftersom du ändå har definierat en fix storlek med tabeller så kan du ju lika gärna hålla på det och köra det även i css:en.

Du kan börja med att fixa felen som rapporteras i
http://validator.w3.org/
(OBS! Du behöver reparera (eller tillfälligt ta bort) CDATA taggen så du får fram de riktiga felen. Som det är nu får du bara parsing errors)

Fast jag skulle föreslå att du kodar i XHTML1.0 Strict. Det är lättare att uppnå bred kompabilitet då. Klart, när jag tittar på felen du får kan det kanske bli för mycket jobb att ordna upp det - i så fall föreslår jag att du jobbar på att validera i HTML 4.01 Transitional.

Byter du ut din css mot detta (ändrat till fixa värden) så funkar det:

.cols {
width:628px;
float:center;
}
.cols p {
font-family:verdana;
font-size:14px;
text-align:justify;
margin:40px;
}
.cols2 p {
font-family:verdana;
font-size:8px;
text-align:right;
margin:40px;
}
.style2 {
font-size: 5px;
color: #FFFFFF;
}
.style3 {color: #FFFFFF}
.style5 {font-size: 18px}
.style9 {font-size: 12px}

Personligen tycker jag din kod är lite kaka på kaka. Om du kör tabeller så behöver du inte sätta storlekar/marginaler/positioner med css och divar. Det borde räcka med den ena eller det andra.

Ps - jag tycker, rent subjektivt, att hemsidan sprider ut sig väl mycket på höjden.

Ha det gott och fråga gärna igen om det är något!

så här gör du en bakgrundsbild i css som inte repeterar:
#rutan{background:url(bilder/bilden.jpg) no-repeat;}
och om du vill kunna placera den någon annanstans än top-left:
#rutan{background:url(bilder/bilden.jpg) 100px 200px no-repeat;}
eller t ex
#rutan{background:url(bilder/bilden.jpg) 10% 40% no-repeat;}
eller t ex
#rutan{background:url(bilder/bilden.jpg) bottom right no-repeat;}
eller om du vill att den ska repetera på ena hållet:
#rutan{background:url(bilder/bilden.jpg) repeat-x;}
eller det andra:
#rutan{background:url(bilder/bilden.jpg) repeat-y;}

allt det där kan du läsa om på:
http://www.w3.org/TR/CSS21/
(detta är standards-siten, här hittar du hur du gör saker och ting korrekt)
och tycker du den siten är jobbig så funkar den här också ganska bra:
http://w3schools.com/
(här finns bra referenser och kurser för de flesta teknologier)
när inget funkar så kan den här vara bra:
http://www.quirksmode.com/

Jo just det, när det gäller placeringen av headern så lär marginaler ha med det att göra:

margin:40px; är egentligen samma sak som margin:40px 40px 40px 40px; vilket betyder att du får 40px på alla håll: upp, höger, ner, vänster (i den ordningen).

margin:0 40px; är samma som margin: 0 40px 0 40 px; vilket betyder att dina marginaler uppe och nere blir 0 men höger och vänster blir 40px.

Så ligger det till:)

en liten kommentar - de raka höger- och vänstermarginalerna
Ska man ha sådan måste man avstava för att inte få för stora mellanrum mellan orden (spärrad text på ordnivå som gör att man tror att det finns någon mening med att det är långt mellanrum - något man vill understryka)

Problemet med avstavning ar att olika webbläsare och personliga inställningar gör att man aldrig kan veta exakt var raderna bryts

Nejnejnej.. avstava/radbryt aldrig manuellt i text som ska visas på webben! Det finns många scenarior när detta blir riktig kaka..

Det bästa man kan göra är att jobba med storlekar på text och boxar, alignment (t ex left eller justify) och i värsta fall gå in och redigera lite i texten för att underlätta flödet, t ex lägga in/ta bort/ändra småord, ordföljder, formuleringar. Fast det brukar inte behövas om boxen som innehåller texten är bred nog. Värst är små boxar där text dessutom ska flöda runt bilder. Jag har gjort många webbplatser med detta problem och det är inte kul..

Ps - jag har flera gånger övervägt att bygga ett avstavnings/paragraf-komposer/radbrytningsprogram i javascript (klientscript, dynamiskt på en serverbackend). Det är ganska genomförbart, den tuffa biten är att bearbeta ordlistor och avstavningsregler men detta kan man som sagt göra serverside. När jag först började räkna på det här projektet och insåg att man kunde bygga det för i sammanhanget överkomliga pengar blev jag riktigt sur - för varför bygger inte browsermakarna in detta?? Jag menar, idén är det inget konstigt med alls, browsertillverkarna måste själva ha funderat över detta.

ninjamac,

Jag varande också för avstavning

Skulle man kunna säga att för att ha raka vänster- och högermarginaler och slippa spärrningen måste man ha riktigt breda textboxar eller texter med många korta ord mellan de längre?

Kanske det enklaste är att ha enbart vänster- eller högermarginal?

precis.. Bägge är vettiga lösningar. Dvs, det är ju lite pest eller kolera.. Det händer att jag väljer det sura äpplet och kör små boxar med justerad text.. ibland vill liksom designen det, men det suger så fort folk skriver flaggstångsknopp och fönsterputsarlärling och de hamnar på samma rad.. Så man kan sammanfatta med att be sina klienter att undvika de två orden alltför nära varandra.