[CSS & IE6] Ten Einde Raad.. - Softwareontwikkeling

woensdag 23 september 2009 10:53

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

IE6 is me weer behoorlijk aan het irriteren. Ik probeer namelijk het volgende. Ik heb een pagina met een container/wrapper van 980px. Deze centreer ik zodat die altijd netjes in het midden van mijn pagina staat. Daarin zet ik een div met een achtergrond image van 980px in de breedte en 4px in de hoogte. Onder deze div zet ik een content div, ook weer van 980px breed en de hoogte doet er niet toe. Dit werkt allemaal prima in chrome, IE7, IE8, Firefox enzovoort. Maar natuurlijk wil IE6 niet meewerken! Ik heb daarom het stukje code uit de pagina gehaald en in een nieuw bestand gezet zodat ik het aan jullie kan laten zien, uit de hoop dat jullie me uit de brand kunnen helpen.

CSS:

code:

body    {
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
}

img, div    {
    behavior: url(iepngfix.htc) 
}

#container  {
    margin-left:auto;
    margin-right:auto;
    width:980px;
}

#karteltop  {
    width:980px;
    height:4px;
    background-image:url(images/kartelT.png);
    background-repeat:no-repeat;
}

#content    {
    width:980px;
    height:200px;
    background-color:#0FF;
}

HTML:

code:

<body>
<div id="container">
    <div id="karteltop"></div>
    <div id="content"></div>
</div>
</body>

Dit is wat het zou moeten zijn:
Afbeeldingslocatie: http://www.ninjatrolls.com/test/images/example.jpg

Dit is wat IE6 er van maakt:
Afbeeldingslocatie: http://www.ninjatrolls.com/test/images/example2.jpg

Het vreemde is ook dat wanneer ik de bovenste kartel image weghaal en vervang door een achtergrond kleur dat IE6 ook hier automatisch een height van 15px van maakt, terwijl ik wil dat het 4px is!

Iemand die deze noob uit de brand wil helpen?

woensdag 23 september 2009 11:04

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Waarom gebruik je die kartelrand niet gewoon als achtergrond afbeelding van je grotere div?

De kartelrand div kun je trouwens goed krijgen met een line-height: 0 en/of overflow: hidden.

[ Voor 34% gewijzigd door Bosmonster op 23-09-2009 11:05 ]

woensdag 23 september 2009 11:16

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik gebruik de kartelrand niet gewoon als achtergrond afbeelding van mijn grotere div omdat die div opgesplitst word in 2 divs zodat die apart van elkaar kunnen stretchen, dit leek mij de beste oplossing. Maar aangezien ik nog een beginner ben zal dit wel een totaal verkeerde aanpak wezen.

edit: en btw, de overflow:hidden; werkt als een trein, hardstikke bedankt! Ik begrijp alleen niet precies wat de overflow functie inhoud.

[ Voor 19% gewijzigd door Verwijderd op 23-09-2009 11:17 ]

woensdag 23 september 2009 11:22

Acties:

0 Henk 'm!

Bosmonster

*zucht*

IE6 hanteert height als min-height. Hij zal dus stretchen als er meer content in staat. Overflow:hidden zorgt ervoor dat content die buiten de div valt hem niet uit laat rekken, maar onzichtbaar (hidden) is.

woensdag 23 september 2009 11:38

Acties:

0 Henk 'm!

jbdeiman

Overflow regelt het "overfloeien" van een teveel aan inhoud. Standaard rekt een div mee met de inhoud. Door overflow hidden te geven, verbergt die het teveel aan inhoud en pakt die een div op het aantal pixels als aangegeven.

Je kan daarnaast ook kiezen voor "scroll" (hij geeft dan standaard scrollbalken weer), auto (geeft alleen scrollbalken wanneer de content in de div de opgegeven hoogte overschrijd)
de instelling: visible betekend gewoon dat de inhoud buiten de div mag komen.

woensdag 23 september 2009 12:19

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ok. Weet ik dat ook weer. Thanks ;)!

woensdag 23 september 2009 12:27

Acties:

0 Henk 'm!

R4gnax

Even nog een uitleg waar dit probleem nou exact vandaan komt: IE6 forceert een minimum hoogte van ten minste 1 tekst regel.

Vandaar dat zowel overflow: hidden als line-height: 0 dit probleem oplossen. De eerste forceert IE om de rest van de tekst regel hoogte te verbergen (en de div niet op te rekken), terwijl de tweede de tekst regel hoogte gewoon op 0 gooit, wat sowieso kleiner is dan je ingestelde hoogte van 4px.

woensdag 23 september 2009 12:41

Acties:

0 Henk 'm!

IStealYourGun

Доверяй, но проверяй

Drop IE support en waarschuw de gebruikers dat je website er lelijk uitziet omdat ze met verouderde software bezig zijn.

woensdag 23 september 2009 12:48

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Dat zou ik inderdaad ook doen als de laatste 10% van de internet gebruikers IE6 niet meer zouden gebruiken. Ik drop het liefst ook de support voor IE6 maar het gevoel dat ik die mensen in de steek laat geeft mij een rot gevoel.

Edit: Ik heb overigens nog wel een nieuwe vraag. Ik wil niet lui overkomen maar ik ben er al een tijd mee bezig maar ik kom er niet uit. Stel dat ik een pagina heb waarin ik een header heb, daaronder zit het content gedeelte. Dit content gedeelte is in tweeën geteeld, deze moeten apart van elkaar kunnen uitrekken, ze moeten allebei de hoogte krijgen afhankelijk van hoeveel inhoud ik erin zet. Onder dit content gedeelte wil ik een aparte footer voor de linker en de rechter helft die mee "omlaag gaan" wanneer ik de linker en/of de rechter helft vul.
Ik heb al behoorlijk wat lopen kutten maar ik kom niet tot een oplossing

.

Edit2: Ik heb even snel in elkaar geflanst waar ik vast zit, zie hier: http://www.ninjatrolls.com/test2/ (link ge-update voor deze post!
De witte balk staat dus nu in principe goed (waarschijnlijk code-wise niet). De gele balk moet onder de blauwe balk komen. Ik heb daarvoor tot dusver dit:

CSS:

code:

body {
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
}

#container  {
    margin-left:auto;
    margin-right:auto;
    width:980px;
}

#top    {
    width:980px;
    height:5px;
    background-color:#6F0;
    overflow:hidden;
}

#midL   {
    float:left;
    width:721px;
    height:200px;
    background-color:#F00;
}

#midR   {
    float:right;
    width:259px;
    height:400px;
    background-color:#00F;
}

#botL   {
    float:left;
    width:721px;
    height:20px;
    background-color:#FFF;
}

#botR   {
    float:left;
    width:259px;
    height:20px;
    background-color:#FF0;
}

HTML:

code:

<body>
<div id="container">
    <div id="top"></div>
    <div id="midL"></div>
    <div id="midR"></div>
    <div id="botL"></div>
    <div id="botR"></div>
</div>
</body>

Dit is overigens het laatste wat ik moet weten voordat mijn eerste IE6 compatible website werkend is. Iemand zo vrij om mij (weer) even uit de brand te helpen?

[ Voor 101% gewijzigd door Verwijderd op 23-09-2009 14:46 ]

woensdag 23 september 2009 13:55

Acties:

0 Henk 'm!

Bosmonster

*zucht*

clear: both op dat gele ding

[ Voor 43% gewijzigd door Bosmonster op 23-09-2009 13:56 ]

woensdag 23 september 2009 14:44

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Daar kwamen we al een stuk verder mee! Ik ben echt al een tijd bezig om het goed te krijgen. De gele balk staat inderdaad nu rechts onder het blauwe gedeelte. Maar wanneer ik het rode gedeelte langer maak dan het blauwe, dan word de gele balk mee naar onder geduwd zodat hij onder de witte balk blijft van het rode gedeelte.
Het is makkelijker uitleggen met een voorbeeld, dus: http://www.ninjatrolls.com/test2/

woensdag 23 september 2009 15:21

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Dacht dat dat was wat je wilde. Wat je nu wilt bereik je niet met je huidige html-opbouw. Je zult meer elementen moeten gaan nesten en een linker en rechterkolom moeten bouwen. Daarin kun je dan weer je losse elementen definieren (Zoals het blauwe vlak en de gele daaronder).

woensdag 23 september 2009 15:57

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ah natuurlijk! Gelukt! Thanks!

donderdag 24 september 2009 10:49

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Nieuwe dag, nieuw probleem!

Ik zit weer met een nieuw probleem. Heb weer behoorlijk wat lopen knutselen en proberen toe te passen wat ik heb geleerd van jullie tot dusver maar na behoorlijk wat frustratie heb ik toch besloten om jullie hulp er maar bij te vragen. Ik probeer te bereiken wat in het "Goed" plaatje hieronder is weergeven. Je kunt al raden dat het er bij mij uitziet zoals in het "Fout" plaatje.

Goed:
Afbeeldingslocatie: http://www.ninjatrolls.com/images/example1.jpg

Afbeeldingslocatie: http://www.ninjatrolls.com/images/example1.jpg

Fout:

Afbeeldingslocatie: http://www.ninjatrolls.com/images/example2.jpg

Dit is mijn code tot dusver:

CSS:

code:

body {
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
}

#contentbox {
    margin-left:auto;
    margin-right:auto;
    width:259px;
    background-color:#0F0;
}

#title  {
    margin-top:20px;
    margin-left:20px;
    width:259px;
    height:45px;
    background-image:url(titlearea.png);
}

HTML:

code:

<div id="contentbox">
    <div id="title"></div>
</div>
</body>

Hoe kan ik er nu voor zorgen dat het eruit komt te zien zoals in het goede voorbeeld?

Edit: Ik heb het opgelost met padding, weet niet of dit de goede oplossing is?
Edit2: Niet opgelost dus, in IE6 stretched hij gewoon in de breedte mee met het plaatje.

[ Voor 6% gewijzigd door Verwijderd op 24-09-2009 11:39 ]

maandag 28 september 2009 10:04

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bump!