Tåpeligste jeg har vært borti

[834HF42F242]

Har mekket skallet for en ny side, og den ser akkurat ut som den skal i opera og firefox. Som oftest er det disse leserene mange sider kan se rare ut i. Men det er ikke problemet denne gangen. Nei, nå er det explorer som ikke viser siden riktig.

Jeg får nemlig et lite og uønsket mellomrom mellom to div-layers, og dette er kun i explorer.

 

Kan noen av dere se hvordan dette problemet skal løses?

 

Den aktuelle siden: www.design.westsupport.net

 

Vil kun ha svar på det aktuelle spørsmålet. Andre feil, magler osv... er ting jeg ikke har konsentrert meg om enda.

 

Kode i css-filen:

body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background-color: #EF9E2B;
}

td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

.header {
background-image: url(../graphic/logo.jpg);
background-repeat: no-repeat;
top: 0px;
left: 0px;
height: 152px;
width: 705px;
}

.mainback {
background-image: url(../graphic/backdiv.jpg);
background-repeat: repeat-y;
position: relative;
height: auto;
width: 705px;
}

.footer {
background-image: url(../graphic/bottom.jpg);
background-repeat: no-repeat;
position: relative;
height: 18px;
width: 705px;
}
.main1 {
position: relative;
height: 40px;
width: 600px;
left: 55px;
}

.main2 {
position: relative;
background-image: url(../graphic/mainbg.jpg);
background-repeat: repeat-y;
height: 300px;
width: 600px;
left: 55px;
}

.main3 {
position: relative;
background-image: url(../graphic/mainbottom.jpg);
height: 24px;
width: 600px;
left: 55px;
background-repeat: no-repeat;
}

[Mads-b]

hva med

* {
margin:0;
padding:o;
}

i CSS fila? Det er vanligvis kilden til slike problemer..

[834HF42F242]

Nei, hele css-koden er presentert i innlegget mitt ovenfor, og der er det ingen unødvendige koder...

[834HF42F242]

Tror jeg får jukse det til med å sette en ekstra repeterende bakgrunn i main1 (slik som den i main2) som starter etter menybildet, fordi om jeg ikke liker å gjøre slikt.

Endret 6. januar 2005 av anth

[Mads-b]

Forslaget var å legge til den da..

 

Uansett, IE og andre browsere ser ulikt på bruken av margins og paddings. Noen tar utgangspunkt i kanten på browseren mens andre går etter kanten på DIVen. ALt dette er selvfølgelig random så det er et mareritt og kode med margins og paddings som grunnlag..

[834HF42F242]

Jeg bruker ikke margins og paddings som grunnlag som du sikkert ser, og ser ikke det som en løsning heller... Tingen er at layeren under mellomrommet er satt til relativ og skal begynne etter den forrige layeren. Det er samme "innstilling" på alle layerne, men akkurat mellom main1 og main2 kommer dette mellomrommet.

[halvardm]

Ja, men sett på det han sa i CSS'en din.

Helt øverst i dokumentet akkurat som han skrev det.

Da blir det slik:

 

* {
margin: 0;
padding: 0;
}

body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background-color: #EF9E2B;
}

td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

.header {
background-image: url(../graphic/logo.jpg);
background-repeat: no-repeat;
top: 0px;
left: 0px;
height: 152px;
width: 705px;
}

.mainback {
background-image: url(../graphic/backdiv.jpg);
background-repeat: repeat-y;
position: relative;
height: auto;
width: 705px;
}

.footer {
background-image: url(../graphic/bottom.jpg);
background-repeat: no-repeat;
position: relative;
height: 18px;
width: 705px;
}
.main1 {
position: relative;
height: 40px;
width: 600px;
left: 55px;
}

.main2 {
position: relative;
background-image: url(../graphic/mainbg.jpg);
background-repeat: repeat-y;
height: 300px;
width: 600px;
left: 55px;
}

.main3 {
position: relative;
background-image: url(../graphic/mainbottom.jpg);
height: 24px;
width: 600px;
left: 55px;
background-repeat: no-repeat;
}

[Mads-b]

Personlig sett har jeg et labert forhold til position:relative. Prøv å lage siden uten. Det skal ikke så mye CSS til for å fikse det designet der..

[834HF42F242]

* {

margin: 0;

padding: 0;

}

Ja, det prøvde jeg og det så akkurat likt ut. Dette har ingenting med marginer eller padding å gjøre.

[Arve Systad]

La meg få spørre korfor du har posisjonert alt sammen?

 

Er masse lettare i ditt tilfelle å lage en flytande layout

[Uin Viel]

Har mekket skallet for en ny side, og den ser akkurat ut som den skal i opera og firefox. Som oftest er det disse leserene mange sider kan se rare ut i. Men det er ikke problemet denne gangen. Nei, nå er det explorer som ikke viser siden riktig.

Explorer er noe dritt

[halvardm]

Skjerp deg da.

Drit i å kom med usaklige innlegg som ikke hjelper trådstarter i det hele tatt.

Om IE er dritt er en annen sak.

 

Men som sagt er "floating" mye lettere.

Eller "position:absolute" er òg lett, men litt dumt.

Endret 6. januar 2005 av Skomaker

[834HF42F242]

Hvorfor?

 

Fordi jeg kun ønsker å bruke div-layers og mest mulig oppgitt fra css, og fordi jeg har bygd opp siden på gjentagende grafikk og elementer som må passe sammen på pixelen. Som sagt i det første innlegget så ville jeg kun høre om det var noen som visste hvorfor dette mellomrommet dukket opp.

[834HF42F242]

Skjerp deg da.

Drit i å kom med usaklige innlegg som ikke hjelper trådstarter i det hele tatt.

Om IE er dritt er en annen sak.

 

Men som sagt er "floating" mye lettere.

Eller "position:absolute" er òg lett, men litt dumt.

Jeg tar ingen snarveier, men ønsker å gjøre det skikkelig. Minst mulig kode med mest mulig innhold som validerer hos w3c og som i hovedsak er byg opp på css. Da er div og layers det beste alternativet. Å sette dette sammen på en annen måte er ikke ønskelig. Mange tar snarveier og bruker tabeller til layout, noe som er fullstendig galt.

[Mads-b]

Skriver en del tips:

1. Sett alt i en container DIV

2. Fjern Width og det klinet der. Hvis bakgrunnen er 600px bred, blir diven det vanligvis og.

3. Fjern all posisjonering

4. Eksperimenter med diverse kode for å få alt til å gå knirkefritt

 

Etter dette SKAL alt fungere

 

EDIT: dette mad layers og slikt er jo bare tull. Jeg ser ingen grunn til å benytte seg av dette her. Du sa selv at du ville ha minst mulig kode og layers er bare unyttig i denne sammenhengen.

Endret 6. januar 2005 av MBaardsgaard

[halvardm]

Jeg tar ingen snarveier, men ønsker å gjøre det skikkelig. Minst mulig kode med mest mulig innhold som validerer hos w3c og som i hovedsak er byg opp på css. Da er div og layers det beste alternativet. Å sette dette sammen på en annen måte er ikke ønskelig. Mange tar snarveier og bruker tabeller til layout, noe som er fullstendig galt.

 

Å floate er ikke noen snarvei ?

Det er validiert HTML/CSS òg.

 

Det er heller ikke tabell basert.

Det er rett og slett bare en bedre løsning å sette sammen siden på

[cfenzo]

Det er ikke no problem å bruke "float" istedet for absolutt eller relativ posisjonering for å lage den layouten der.. bare så DET er sagt..

 

bredde og høyde på flere av elementene der er heller ikke vits i å bruke.. rett og slett fordi det ikke er nødvendig..

 

Når jeg ser litt på kildekoden... er det her tegna opp i dreamweaver mx eller adobe golive? det ser slik ut.. (kanskje derfor du også bruker ordet "layers".. ?)

 

Å bruke imagemap på menyen er totalt bortkasta..

det der kan du får til veldig pent og slik med css/html (imagemaps er IKKE anbefalt å bruke.. ihvertfall ikke på slike utrolig viktige ting som navigasjon på en side..)

sjekk ut:

Sliding doors

Sliding doors part II

fra alistapart.com..

[834HF42F242]

Har nå innsett at jeg rotet meg inn i div-helvete. Her er da en bedre løsning: http://www.design.westsupport.net/wsd2/

Takker for alle forslag!

[PixelImp]

2 spm:

- hvorfor har du divene som class ? når du kun bruker div'en en gang kan du ha id, aner ikke om dette har noen fordel

 

- hvorfor har du ikke sentrert siden ? det fikser du enkelt ved å legge margin:0 auto; inn i .div1 {}

[Cucum(r)]

Hvorfor har du divene som class ? når du kun bruker div'en en gang kan du ha id, aner ikke om dette har noen fordel

ID har ingen fordel over CLASS når det kommer til styling av elementer.

Egentlig bør CLASS brukes i stedet for ID på elementer som kun har visuell effekt, siden ID brukes som et anker i innholdssammenheng, og da er det greitt å ha så mange ledige ankere som mulig.

 

 

God tur inn i militæret, forresten