Hej!

Jag håller nu på med att göra en hemsida till mig.
Jag har i princip bara hunnit göra designen och försöker sätta ihop den till en sida nu.
Det ser ut som det ska i FF, Opera och Safari. Men i IE blir det helkonstigt.
IE verkar hitta på egna storlekar i tabellen. Även om en av cellerna inte har nån definerad höjd så hittar IE på en specifik höjd.
Hemsidan:
http://www.nisslas.se/sidan/default3.asp
(testa den i olika webbläsare om ni vill)

Är det någon kodsnutt som jag missat nånstans?
Om jag hade kunnat så hade jag blockerat IE, men det är ju fortfarande den mest använda webbläsaren, tyvärr.

Någon som har någon idé vad felet kan vara?


MvH
Niklas Sandberg

Enkla sättet: ta bort "height:100%" för ditt table-element. Nu täcker dock inte sidan hela browserfönstret.
Halvfippliga sättet: Särbehandla sidan för IE-användare enligt ovan
Omständiga sättet: Använd inte tables för design :P

finns det nåt sätt att sätta vertical align till bottom? så att sidan liksom börjar längst ner. för det tror jag skulle kunna vara snyggt.
har försökte med style="vertical-align:bottom;" i bodyn. men det fungerar inte, är det omöjligt att göra eller gör jag bara fel?

vertical-align är nog tänkt att användas inuti tabeller, eller på inline-element..

Men det är inte omöjligt att placera ut saker där man vill ha dem, bara mer eller mindre med jobb ;-j. Och div+css istället för tabeller.

Pröva att placera ut elementen med höjderna satta i procent, och att dom inte hamnar bredvid varann utan under föregående. Tänk på att procentuella beräknas från elementet en nivå upp i hierarkin, från det elementet som nuvarande ligger *inuti*, alltså. Om höjden på förälderelementet inte är satt så letar webbläsaren efter höjder satta högre upp. Så sätt höjderna från toppen av hierarkin och neråt tills du kommer till dina "delar". Annars kanske du får höjd=x procent av nåt annat än du tänkt dig.

Höjderna på dina 3? 4? element ska bli 100% tillsammans alltså. Centrera antar jag att du vet hur man gör redan ;). Lycka till.

Kan man göra så även om jag vill ha fasta storlekar i vissa av fälten, annars blir ju bakgrunden konstig.

Hur skulle jag kunna bygga upp det med divar på ett bra sätt? (gärna lätt med) samt att få de "fält" som ska vara en fast storlek att vara en fast storlek, och "main-fältet" ska blir större iochmed mer innehåll?


[senare...]
Har testat lite med divar nu, men en av divarna vill inte lyda i IE, och jag får det inte att hamna i mitten. någon idé?
(jag har inte lagt in bilderna ännu, utan bara gett divarna olika färger, "main-diven" har jag nu gjort blå och lite bredare så att man ser att den går ända ner, i IE. fast att det inte ska vara så sen. Den ska gå från slutet av topp-diven till början av botten-diven som ni kanske förstår.)

sidan i divar:
http://www.nisslas.se/sidan/default5.htm

[ännu senare...]
Jag ser också att när det blå fältet har mycket text i så sitter det gröna fältet kvar på den plats den var från början, alltså i botten av "första" sidan, även om det blå fortsätter nedåt. Jag har testat att ha olika position attribut, men inget får det att funka som det ska... någon idé?

Jag är inte säker på att jag fattat rätt om fälten. Vill du att headern/top och footern/bottom ska ha fasta höjder och main växer på höjden? Eller ska main ha konstant höjd och möjlighet att scrolla innehållet i den när det växer? Det lär väl inte påverka hur man placerar ut de här tre, men det lär påverka vilken sorts bakgrund du kan välja.

Med alternativ 1 för main ser det tokigt ut med ett foto eller så där mittendelen sträcks ut, eller staplas. Foto funkar bättre med alternativ 2 och konstant höjd förstås..

Hursomhelst, snabbt hoprafsad CSS för alternativ 1, om du byter plats på main och bottom i html-koden(visste inte vad du vill ha för höjd på main, 450px är taget ur luften):

body {
    margin: 0px;
    background-image: url('bilder/layoutbilder/bilder/bg.gif');
}
#top {
    position: relative;
    margin: 0px auto;
    width: 818px;
    height: 207px;
    background-color:#FF0000;
}
#main {
    position:relative;
    margin: 0px auto;
    min-height: 450px;
    width:850px;
    background-color:#0000FF;
}
* html #main {
    height: 450px;
}
#bottom {
    position:relative;
    width:818px;
    height:199px;
    margin: 0px auto;
    background-color:#00FF00
}

Vad har du prövat för att centrera divarna? margin: 0px auto; på divarna är det "rätta". IE köper inte alltid detta, utan vill då ha text-align: center; för elementet som innehåller det man vill centrera. Det jobbiga med text-align är att det kan ärvas av element inuti det med center. Så ofta får man "nolla" ett lass med underelement.

Hej!

Jag ber om ursäkt att jag inte har svarat på ett tag. mycket att göra.
Men det var i princip precis sådär som jag ville ha det.
Tack så väldigt mycket!
Nu är det bara lite konstigt med att det är ett mellanrum mellan divarna, vet du hur man kan få bort det?

---- Jag hittade felet med mellanrummet nu, jag hade radbrytningar i.----



och sen undrar jag om det gick att placera allt så att det utgår från botten. alltså om sidan (om innehåller i main är väldigt lite) går upp från botten, så att det är tomt ovanför top-diven istället för tomt nedanför bottom-diven. Går det? (jag skulle kunna kyssa den som hjälper mig) <-- talesätt

I vilket fall som helst så tackar jag alla för den hjälp jag har fått här!

Kommer det nåt mellan #top och toppkanten?

Vad utgår du ifrån att höjden i surfprogrammet är? X antal pixlar, 100% eller nåt annat?

det kommer inget imellan början på webbfönstret och första diven. i min upplösning är det nog 800px skulle jag tro.

Det fungerar som det ska nu.
Tack för all hjälp!

Pja..
Kom på åtminstone 4 sätt att göra det här *skina, skina*, pröva det här:

#top {
    padding-top: 150px;
    position: relative;
    margin: 0px auto;
    width: 818px;
    height: 256px;
    background: url(bilder/top.jpg) bottom no-repeat;
}

(Som vanligt, justera padding-top som du vill.)