[CSS] Witte tussenruimte bij gebruik van float - Softwareontwikkeling

dinsdag 13 april 2004 16:32

Acties:

Topicstarter

Niet zo'n groot probleem, maar wel heel irritant:

Hier de pagina met het probleem

Zoals je ziet verschijnt er een klein wit randje tussen het plaatje links en de zwarte balk rechts. Weet niet waar het vandaan komt of hoe ik het netjes kan oplossen

dinsdag 13 april 2004 16:33

Acties:

disjfa

be

achtergrondkleur van je plaatje geel maken

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 13 april 2004 16:43

Acties:

Verwijderd

Zoals je ziet verschijnt er een klein wit randje tussen het plaatje links en de zwarte balk rechts. Weet niet waar het vandaan komt of hoe ik het netjes kan oplossen

Ik zie een tekstbestand, waar klaarblijkelijk wat markup in gezet is. De extensie duid op een XHTML bestand (met een content-type van application/xhtml+xml), maar dat heeft het zeker niet (text/plain wel, welke incorrect geparsed wordt door IE).

dinsdag 13 april 2004 16:46

Acties:

r0bert

Topicstarter

disjfa schreef op 13 april 2004 @ 16:33:
achtergrondkleur van je plaatje geel maken

Nee, het gaat om de witruimte RECHTS van het plaatje.. dus tussen de 2 zwarte elementen in.

Verwijderd schreef op 13 april 2004 @ 16:43:
[...]
Ik zie een tekstbestand, waar klaarblijkelijk wat markup in gezet is. De extensie duid op een XHTML bestand (met een content-type van application/xhtml+xml), maar dat heeft het zeker niet (text/plain wel, welke incorrect geparsed wordt door IE).

HTML extensie, zo beter? :)

[ Voor 48% gewijzigd door r0bert op 13-04-2004 16:47 ]

dinsdag 13 april 2004 16:51

Acties:

crisp

Devver

Pixelated

white-space of de bekende IE-3pixel-bug bij floats

Intentionally left blank

dinsdag 13 april 2004 16:51

Acties:

Verwijderd

d'r staat toch ook een whitespace na je img in je code? haal die dan weg als je dat niet wilt

lama, niet het geval dit keer, zie crisp, die heeft het bij het juiste eind

[ Voor 34% gewijzigd door Verwijderd op 13-04-2004 16:54 ]

dinsdag 13 april 2004 16:53

Acties:

r0bert

Topicstarter

crisp schreef op 13 april 2004 @ 16:51:
white-space of de bekende IE-3pixel-bug bij floats

minder bekend bij mij, maar dat zal het dus wel zijn..

_{link over 3px gap bug}

[ Voor 21% gewijzigd door r0bert op 13-04-2004 16:56 ]

dinsdag 13 april 2004 16:54

Acties:

Verwijderd

Plaatje van de geplande layout? (En ja, met 'text/html' als content-type geeft ie hem grafsich wel weer.)

dinsdag 13 april 2004 16:55

Acties:

crisp

Devver

Pixelated

r0bert schreef op 13 april 2004 @ 16:53:
[...]

minder bekend bij mij, maar dat zal het dus wel zijn..

Je kan proberen je image in een div te zetten en de div te floaten; blijf je dan nog ruimte houden dan zal je met wat truukwerk IE een negatieve margin moeten geven...

Intentionally left blank

dinsdag 13 april 2004 17:12

Acties:

r0bert

Topicstarter

crisp schreef op 13 april 2004 @ 16:55:
[...]

Je kan proberen je image in een div te zetten en de div te floaten;

Dat euh, lijkt niet te werken

met wat truukwerk IE een negatieve margin moeten geven...

Euhm, snap wat je bedoelt, maar ik boek niet echt resultaat

edit:

heb de structuur/layout veranderd..

ipv:

code:

+----------+
|  HEADER  |
+----------+
|+---++---+|
||IMG||NAV||
||---||---||
||   ||   ||
||   ||   ||
||   ||   ||
|+---++---+|
+----------+

dit gebruikt en werkt wel goed:

code:

+----------+
|  HEADER  |
+----------+
|+--------+|
||IMG||NAV||
|+--------+|
|+---++---+|
||   ||   ||
||   ||   ||
|+---++---+|
+----------+

waarbij de image in een div van 200px met een witte background float tegen div "nav" in een "container" met een zwarte achtergrond..
_{goede pagina}

[ Voor 56% gewijzigd door r0bert op 13-04-2004 17:33 ]

dinsdag 13 april 2004 17:44

Acties:

crisp

Devver

Pixelated

Testcase waarin het probleem+oplossing voor IE duidelijk is:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>test</title>
        <style type="text/css">

            #div1 {
                background-color: blue;
                float: left;
                _margin-right: -3px;
                width: 200px;
                height: 100px;
            }
            #div2 {
                background-color: black;
                height: 100px;
            }

        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>

let op de _margin-right; Moz ignored deze dus

Intentionally left blank

dinsdag 13 april 2004 17:48

Acties:

Verwijderd

(Je voorbeeld valideert niet.)

Het geven van namen gelijk of soortgelijk aan: 'right', 'left', 'top', 'bottom' is niet geheel in de spirit van semantiek en al helemaal niet in de spirit van CSS. Het is net zo erg als een CLASS attribuut met de waarde 'zwart' bijvoorbeeld.
(Als je het nog niet geheel snapt, denk aan alternate style sheets. Denk ook aan het verschil tussen '<em class="sarcasme">' en '<em class="ironie">', welke dezelfde stijl zouden kunnen hebben als '<em class="rood">', maar duidelijk beter zijn.)

Heeft verder niet heel veel met het topic te maken, maar het probleem is opgelost en het topic staat nog steeds bovenaan, dus ik dacht dat ik je hier wel even op kon attenderen.

dinsdag 13 april 2004 18:05

Acties:

Bosmonster

*zucht*

Niet zo netjes, maar hspace="0" / vspace="0" doet voor IE meestal wel de truc... Valideert prima in xhtml transitional.. kweet hiet hoe het zit met strict.

Persoonlijk ben ik trouwens helemaal niet weg van allerlei 'css-hacks'.. er is altijd wel een omweg te vinden.. Je weet immers nooit hoe de minder bekende browsers op dit soort 'hacks' ingaan.. Imho hetzelfde niveau als de ouderwetse javascript trucs/browserdetecties.

IE 5.0, 5.5 en 6.0 hebben overigens ook nog eens verschillen in boxmodels, zeker als je xhtml als doctype opgeeft (dan gedraagt IE 6 zich ineens redelijk netjes ten opzichte van zijn voorgangers).

[ Voor 66% gewijzigd door Bosmonster op 13-04-2004 18:09 ]

dinsdag 13 april 2004 18:47

Acties:

Verwijderd

Niet zo netjes, maar hspace="0" / vspace="0" doet voor IE meestal wel de truc... Valideert prima in xhtml transitional.. kweet hiet hoe het zit met strict.

"Werkt" niet met Strict, aangezien het niks met het element te maken heeft, maar met de presentatie van het element (hoewel er uitzonderingen te verzinnen zijn, "cellpadding", "cellspacing" e.a.).

Persoonlijk ben ik trouwens helemaal niet weg van allerlei 'css-hacks'.. er is altijd wel een omweg te vinden..

Een CSS hack is altijd beter dan een HTML hack. Dat is zo omdat (1) een CSS hack centraal te fixen is en (2) er redelijk wat tests gedaan zijn naar de effecten van bekende hacks.

Je weet immers nooit hoe de minder bekende browsers op dit soort 'hacks' ingaan..

Wat valt onder minder bekend? Ooit wel is een CSS "hacks" overzicht gezien? (Het zijn niet echt hacks, meer geavanceerde truucjes.)

Imho hetzelfde niveau als de ouderwetse javascript trucs/browserdetecties.

CSS hacks zijn (1) beter gedocumenteerd en de meeste (2) zijn gebouwd op ondersteuning in plaats van browser.

IE 5.0, 5.5 en 6.0 hebben overigens ook nog eens verschillen in boxmodels, zeker als je xhtml als doctype opgeeft (dan gedraagt IE 6 zich ineens redelijk netjes ten opzichte van zijn voorgangers).

Dat kan ik ook krijgen met een HTML 4.01 Transitional Doctype. Door dit soort "statements" raken mensen alleen maar meer verward over het verschil tussen HTML en XHTML, vooral omdat het niet klopt.

dinsdag 13 april 2004 19:06

Acties:

crisp

Devver

Pixelated

Tsja, ik heb het ook niet zo erg op "hacks" maar in dit geval vind ik dit gewoon de meest nette oplossing; alle andere oplossingen die je mogelijk kan verzinnen om deze bug te omzeilen omvatten allemaal aanpassing van je structuur, en dat wil je soms gewoonweg niet...

Intentionally left blank