[XHTML/CSS] Ruimte binnen <div> kan niet worden weggewerkt

[Verwijderd]

Ik ben bezig met een website te maken met XHTML 1.0 Strict en CSS. Dus gebruik ik geen tabellen, maar div's. Alleen nu is het probleem dat ik bij het testen alleen in Internet Explorer (6.0) een schoonheidsfoutje heb (http://www.voetbalinside.nl/obie.html, daar zie je aan de rechterkant bij de balk "Frontpage" een wit pixel-lijntje), en in Opera (7.32) en Mozilla (Firebird 0.7) niet.

Het ligt ook niet aan de bekende fix voor het boxmodel, want:

code:

*
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

...staat al in m'n code.

Ik heb het geprobeerd op te lossen via "width: 100%;", maar dat lukt niet. Ook heb ik ze in plaats van in één div, in twee div's gezet (dat wil nog wel eens werken) maar ook dat werkte niet.

En toen ik de bovenstaande fix voor het boxmodel weghaalde, toen kreeg ik dit foutje in alle drie de browsers. Dus ik snap er weinig meer van

De stylesheet: http://www.voetbalinside.nl/stylesheet.css en de pagina: http://www.voetbalinside.nl/obie.html

Bvd.

[ Voor 8% gewijzigd door Verwijderd op 07-12-2003 16:07 ]

[Verwijderd]

Wellicht een idee om eerst is je document te structureren? Zoals het er nu uitziet had je m.i. beter tabellen kunnen gebruiken.

PS: het is trouwens niet gegarandeerd dat die hack blijft werken. Er bestaat een mogelijkheid dat CSS3 gaat werken met andere properties of eventueel 2 box models (uiteraard is die kans klein, gezien het grote gebruik van deze hack).

[Verwijderd]

Cascading Stylesheet:

.sidebar
{
    ...
    width: 199px;
    ...
}

werkt hier goed

[Verwijderd]

Als ik de "width: 199px;" instel, dan werkt ie wel in Internet Explorer 6.0, maar dan werkt 'ie niet meer in Mozilla Firebird. Dus heb ik nog even door gepuzzeld, en toen had ik de hack weggehaald en toen werkte die wel in beide browsers (en ook in Opera). Alleen werkt u nu weer niet in IE 4.0

Verwijderd schreef op 07 december 2003 @ 19:30:
Wellicht een idee om eerst is je document te structureren? Zoals het er nu uitziet had je m.i. beter tabellen kunnen gebruiken.

Hoe bedoel je precies?

Ik heb lange tijd gewerkt met tabellen en HTML 4.01, maar t'is dus de eerste keer dat ik echt met div's aan de gang ben en dat is gebleken dat het een aardige omslag is...

[We Are Borg]

Verwijderd schreef op 07 december 2003 @ 21:28:
Als ik de "width: 199px;" instel, dan werkt ie wel in Internet Explorer 6.0, maar dan werkt 'ie niet meer in Mozilla Firebird. Dus heb ik nog even door gepuzzeld, en toen had ik de hack weggehaald en toen werkte die wel in beide browsers (en ook in Opera). Alleen werkt u nu weer niet in IE 4.0

Mag ik je motivatie weten waarom je zo'n oude browser als IE 4.0 probeert te ondersteunen? Ik bedoel, een klein schoonheidsfoutje in een browser die hopeloos verouderd is en misschien 0,1% van je bezoekers zal gebruiken

[Verwijderd]

Ik dacht dat IE6 die box-model switch sowieso niet ondersteunde. Volgens mij doet alleen IE5 op de Mac dat. Dit betekent dus dat IE6 gewoon in content-box modus zit. Vandaar dat het gedrag hetzelfde is als je de box-model switch weghaalt. Je kunt 3 dingen doen:

• Zorgen dat IE6 niet in strict modus zit zodat hij border-box als model heeft, of
• Geen box-model switch inbouwen zodat Mozilla, e.d. ook het content-box model gebruiken, of
• CSS hacks toepassen (http://www.tantek.com) om je CSS te splitsen voor IE/Moz/Opera

[Verwijderd]

Doordat 'ie niet goed werkt ik IE 4.0, kan het zijn dat ik gewoon een foutje heb gemaakt in de code. En als dat zo is, kan ik het maar beter verhelpen.

Tevens zit er nog wel een foutje in m'n voorlopige pagina, want als je onderaan de pagina kijkt is de "height: 100%;" dat bedoeld is om de pagina altijd even lang als het beeldscherm (of langer, mits er zoveel tekst in staat) te houden té lang en loopt de border ook niet door (in Mozilla Firebird).

[creative8500]

Met CSS kun je nu wat, nu je HTML nog! Alleen div's gebruiken is uit den boze. Je hoeft bij sites als tweakers.net bijvoorbeeld slechts ongeveer acht div's te gebruiken

Voor de rest heb je ul/ol/li/h1-6/p/.../.../...-tags.

[Verwijderd]

Verwijderd schreef op 07 december 2003 @ 23:05:

• Zorgen dat IE6 niet in strict modus zit zodat hij border-box als model heeft, of

De laatste twee opties die je aangeeft begrijp ik, maar hoe bereik ik het bovenstaande?

[Verwijderd]

creative8500 schreef op 07 december 2003 @ 23:10:
Met CSS kun je nu wat, nu je HTML nog! Alleen div's gebruiken is uit den boze. Je hoeft bij sites als tweakers.net bijvoorbeeld slechts ongeveer acht div's te gebruiken

Voor de rest heb je ul/ol/li/h1-6/p/.../.../...-tags.

Daar heb je opzich gelijk in, maar met deze pagina die ik aan het maken ben is het een beetje een speciaal geval. Doordat ik een wat pixel-achtig design maak zónder images te gebruiken, zal ik met borders moeten werken. En deze kun je alleen creeëren door meerdere div's in elkaar te laten "zetten" (om zonder de "outset" style te werken, zodat het compatible is met oudere browsers). Dus vandaar de reden dat ik wat veel div's gebruik. Ik kan wel met images gaan werken, maar dat kan altijd nog, ik prefereer namelijk deze manier van werken...

[crisp]

Verwijderd schreef op 07 december 2003 @ 23:16:
[...]


De laatste twee opties die je aangeeft begrijp ik, maar hoe bereik ik het bovenstaande?

xml-declaratie boven je DTD zetten

[Verwijderd]

crisp schreef op 07 december 2003 @ 23:23:
[...]

xml-declaratie boven je DTD zetten

Je bedoeld (onderstaande)?

code:

<?xml version="1.0" encoding="ISO-8859-1"?>

[creative8500]

Obie: Daar heb je opzich gelijk in, maar met deze pagina die ik aan het maken ben is het een beetje een speciaal geval. Doordat ik een wat pixel-achtig design maak zónder images te gebruiken, zal ik met borders moeten werken. En deze kun je alleen creeëren door meerdere div's in elkaar te laten "zetten" (om zonder de "outset" style te werken, zodat het compatible is met oudere browsers). Dus vandaar de reden dat ik wat veel div's gebruik. Ik kan wel met images gaan werken, maar dat kan altijd nog, ik prefereer namelijk deze manier van werken...

Over borders weet ik onderhand alles, dus ik zie direct dat dat je hier geen plaatjes daarvoor hoeft te gebruiken. Wat ik bedoel is, dat je net zo goed die styles kan toepassen op een <li> als op een <div>. Div's kun je wel gebruiken om grotere gedeeltes in je site aan te merken als aparte 'section' binnen het document, maar vaak is ook dat niet nodig.

Samengevat: borders kunnen overal op toegepast worden.

[Verwijderd]

Als ik de XHTML tag list bekijk, dan zie ik ook weinig andere opties dan de <li> tag. Behalve dan de <p> tag.

Maar het is dus beter om met deze twee tags te werken in plaats van vele div's?

[creative8500]

Verwijderd schreef op 08 december 2003 @ 08:32:
Als ik de XHTML tag list bekijk, dan zie ik ook weinig andere opties dan de <li> tag. Behalve dan de <p> tag.

Maar het is dus beter om met deze twee tags te werken in plaats van vele div's?

Kijk anders eens naar de code van deze pagina, dan zie je hoe het anders kan. Dit is overigens nog een oude versie, er is een nieuwe waar nog maar drie divs (denk ik) over zijn gebleven, de rest bleek overbodig.

[Verwijderd]

crisp schreef op 07 december 2003 @ 23:23:
[...]

xml-declaratie boven je DTD zetten

De site wordt dan onzichtbaar in IE4 op de mac. <http://www.plasticlab.nl/index.php?p=68&c=1#comments> (zie reactie Kris)

[Verwijderd]

Ik ben nu alweer wat verder en ben ik gestuit op een andere probleem. De twee div's staan naast elkaar dmv "float: left;" maar nu is het zo de hoogte van beide div's niet gelijk is. Nu heb ik daar een oplossing voor gezocht en deze vond ik hier. Alleen nu is het probleem dat wanneer de rechterkolom langer is dan de linker, dat het dan niet werkt (andersom wel, dus wanneer links langer dan rechts is).

Zie: http://www.voetbalinside.nl/obie.html

Ik heb dit proberen te verhelpen via "clear: both;" maar ook dat werkt niet...

[Verwijderd]

kan je je .sidebar niet gewoon een border-bottom meegeven? volgens mij zou dat hier (winxp, ie6) de oplossing zijn..

edit:

*djkappi ziet nu dat dat waarschijnlijk niet de bedoeling is, maar wel een eenvoudige oplossing waar imo mee te leven valt..*

[ Voor 41% gewijzigd door Verwijderd op 08-12-2003 17:37 ]

[Verwijderd]

Verwijderd schreef op 08 december 2003 @ 16:42:
kan je je .sidebar niet gewoon een border-bottom meegeven? volgens mij zou dat hier (winxp, ie6) de oplossing zijn..

edit:
*djkappi ziet nu dat dat waarschijnlijk niet de bedoeling is, maar wel een eenvoudige oplossing waar imo mee te leven valt..*

Daar valt inprincipe mee te leven, maar het zou toch wel mogelijk moeten zijn...?

[Verwijderd]

ik weet het niet, ik heb nog wel wat geprobeerd met jouw html/css, maar mij lukte het niet (paar position:relative's gezet, wat met height's en margin's enzo).
kan me voorstellen dat het niet kan, omdat de hoogte (van .document) bepaald wordt aan de hand van de hoeveelheid tekst in je .content en .sidebar heeft niets 'relative' met .content. wat volgens mij wel zou moeten gebeuren is dat de hoogte van .sidebar gelijk moet kunnen worden gesteld aan .document, maar die heeft ook een height:auto. als je .document een absolute height meegeeft zal een height:100% in .sidebar wel werken (ff geprobeerd). ik zou hier zelf ook wel graag het fijne van willen weten... someone else?

[Verwijderd]

Verwijderd schreef op 08 december 2003 @ 19:35:
als je .document een absolute height meegeeft zal een height:100% in .sidebar wel werken (ff geprobeerd).

Als ik dat doe, dan zijn de hoogtes van beide div's bepaald niet gelijk aan elkaar...?

[Verwijderd]

sorry, was misschien niet duidelijk genoeg:

Cascading Stylesheet:

.document {
  height:1000px;
}

.sidebar {
  height:100%;
}

maar nogmaals, dit is niet de oplossing, slechts ter verheldering van de materie zullen we maar zeggen

[Verwijderd]

Ook dat geeft bij mij weinig goeds...

Toch blijft het vreemd dat de rechterkolom zich wel aanpast aan de linker en andersom niet.

[Justice]

Ik wil je wel proberen te helpen maar volgens mij is het probleem door vage antwoorden en vragen ondertussen al 3 keer gemuteerd wat is nou het probleem en waar kan ik er een voorbeeld van vinden?

[Verwijderd]

kheb ff die height op 450px gezet, dan kun je t zien:

http://www.webpro.nl/temp/obie.html

geeft bij mij

http://www.webpro.nl/temp/obie.jpg

[Verwijderd]

Verwijderd schreef op 09 december 2003 @ 13:36:
kheb ff die height op 450px gezet, dan kun je t zien:

http://www.webpro.nl/temp/obie.html

geeft bij mij

http://www.webpro.nl/temp/obie.jpg

Daar heb je inderdaad gelijk in, maar als ik het dan bekijk in Mozilla Firebird dan werkt het weer niet...

Justice schreef op 09 december 2003 @ 13:31:
Ik wil je wel proberen te helpen maar volgens mij is het probleem door vage antwoorden en vragen ondertussen al 3 keer gemuteerd wat is nou het probleem en waar kan ik er een voorbeeld van vinden?

Dat klopt Maar ik heb het inmiddels min of meer opgelost. Maar eigenlijk ook weer niet. Ik heb 't probleem ontweken door de linker-div te vullen met los staande menuutjes zodat het niet hoeft door te lopen tot de onderkant van de "container".

Maar mocht iemand toch weten hoe je twee div als kolommen op gelijke hoogte weet te krijgen, hoor ik het graag