[CSS] 3px ruimte tussen divs in IE???? - Softwareontwikkeling

donderdag 5 januari 2006 00:06

Acties:

Verwijderd

Topicstarter

Op de onderstaande pagina krijg ik een gat van 3px tussen 2 divs, dit gebeurt alleen in IE, en alleen als ik een hoogte aan m'n divs meegeef.

Ik heb al op positioniseverything.net gelezen over de 3px gap, maar ze geven als oplossing om je objecten een vaste hoogte te geven. Maar dit is precies wat ik doe!

Heeft iemand enig idee hoe dit komt, en hoe ik het op kan lossen?

http://konstruct.nl/dojo/IEgap.htm

donderdag 5 januari 2006 00:50

Acties:

Sappie

De Parasitaire Capaciteit!

Ik heb hier laatst ook eens mee zitten kloten, maar ben er toen ook niet uitgekomen. Wanneer voor een element de zogenaamde "hasLayout" property true is geworden, lijkt deze bug op te treden. Erg vage bug. wat meer over hasLayout

Edit: hier een specifieker onderdeel van bovenstaande url, die exact dit probleem beschrijft: http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat

Het is dus een bug, maar er is uiteraard op verschillende manieren omheen te werken. (of je moet het natuurlijk per se op deze manier op willen lossen

). hieronder een van de meerdere manieren, weet alleen de exacte gewenste werking van de verschillende div's uiteraard niet (meeschalend in breedte / hoogte, etc):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style>
        #container {
            width: 150px;
            height: 100px;
        }
        
        #div1 {
            float: left;
            width: 50px;
            height: 100px;
            background: green;
        }
        
        #div2 {
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="div1">fsd</div>
        <div id="div2">fds</div>
    </div>
</body>
</html>

de container div dient er uiteraard voor dat de div's niet onder elkaar komen te vallen bij verkleining van het venster.

edit: nog een andere manier:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style>
        
        #div1 {
            float: left;
            width: 50px;
            height: 100px;
            background: green;
        }
        
        #div2 {
            width: 100px;
            height: 100px;          
            background: blue;
            margin: 0 0 0 50px;
        }
    </style>
  <!--[if lt IE 7]>
    <style type="text/css">
        #div2 {
            position: relative;
            top: 0;
            left: -3px;
            margin: 0;
        }
    </style>
  <![endif]-->
</head>
<body>
    <div id="div1">fsd</div>
    <div id="div2">fds</div>
</body>
</html>

[ Voor 59% gewijzigd door Sappie op 05-01-2006 01:09 ]

Specs | Audioscrobbler

donderdag 5 januari 2006 01:16

Acties:

Verwijderd

Maar het kan ook zonder "float: left;", door #div1 met "position: absolute;" buiten de flow te zetten en #div2 te positioneren met "position: relative; left: 50px;" of "padding-left: 50px;" (in de code van Sappie). Iets met vele wegen en Rome..

donderdag 5 januari 2006 01:19

Acties:

disjfa

be

Verwijderd schreef op donderdag 05 januari 2006 @ 01:16:
Iets met vele wegen en Rome..

Het is zonde om dingen uit de flow van je document te halen omdat IE een 3 pixel bug heeft. Absoluut positioneren is 99% van de keren overbodig. Het is gewoon een fout van IE door de haslayout zoals de persoon boven mij al zij.

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 5 januari 2006 03:13

Acties:

Niakmo

misschien dat dit je kan helpen
The IE Three Pixel Text-Jog

donderdag 5 januari 2006 06:05

Acties:

Verwijderd

disjfa schreef op donderdag 05 januari 2006 @ 01:19:
[...]

Het is zonde om dingen uit de flow van je document te halen omdat IE een 3 pixel bug heeft. Absoluut positioneren is 99% van de keren overbodig. Het is gewoon een fout van IE door de haslayout zoals de persoon boven mij al zei.

Dat het een IE-bug is, betwijfel(de) ik niet. Maar omdat de TS al een en ander had geprobeerd naar aanleiding van het positioniseverything-artikel meende ik net als Sappie een workaround te bieden. Edoch, ik heb me het afgelopen uur suf gegoogled naar absolute positioning en wat daar in boven-staande workaround zo slecht aan zou zijn, maar ik zie het vooralsnog niet. Please, enlighten me! $_/-\o_$

donderdag 5 januari 2006 09:42

Acties:

Sappie

De Parasitaire Capaciteit!

disjfa schreef op donderdag 05 januari 2006 @ 01:19:
Het is zonde om dingen uit de flow van je document te halen omdat IE een 3 pixel bug heeft. Absoluut positioneren is 99% van de keren overbodig.

Dat is opzich natuurlijk waar, ware het niet dat floats ook uit de document flow worden gehaald; dus of je nu dat element float of absoluut positioneert, je haalt het sowieso uit de flow. Wel is het zo dat floats nog invloed hebben op de document flow om hen heen, waar absoluut gepositioneerde elementen dat niet hebben. Mochten de afmetingen van beide elementen echter van tevoren vastliggen dan zie ik geen reden waarom absoluut positioneren in dit geval geen mogelijkheid zou zijn. Of dit in dit geval ook zo is / moet zijn (vastliggende afmetingen) kan de ts ons vertellen

Specs | Audioscrobbler

donderdag 5 januari 2006 16:17

Acties:

Verwijderd

Topicstarter

Bedankt voor alle hulp, op deze manier kan ik weer verder.

Ik denk dat ik de 2e manier van Sappie ga gebruiken, de eerste lijkt me op het eerste gezicht eleganter, maar ik vind het toch risky om de 2e div ook te laten floaten, omdat ik dan weer m'n volgende layout element moet clearen. De 2e manier maakt een uitzondering voor IE zonder de rest van m'n css code overhoop te halen.

Het artikel van zirus had ik al gezien idd, maar is neit van toepassing omdat het gaat om divs met hoogte.

En ik kan niet absoluut positioneren omdat er bijvoorbeeld nog een footer onder kan komen. En omdat het gaat om content die varieert. De div moet dus meeschalen met de content, maar de footer moet er altijd onder blijven hangen, dit kan met floats en niet met absoluut positioning (volgens mij dan).

EDIT:

Met het idee van Sappie in gedachten heb ik nog een hack gevonden die mij eleganter lijkt, ik geef nu de eerste div de volgende css mee:

_margin-right: -3px;

De underscore zorgt ervoor dat alleen IE het leest, en dat als we straks naar IE7 gaan en deze bug hopelijk gefixed wordt, de regel ook voor IE7 onzichtbaar wordt.

[ Voor 19% gewijzigd door Verwijderd op 05-01-2006 16:23 ]

donderdag 5 januari 2006 23:49

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 05 januari 2006 @ 16:17:
EDIT:

Met het idee van Sappie in gedachten heb ik nog een hack gevonden die mij eleganter lijkt, ik geef nu de eerste div de volgende css mee:

_margin-right: -3px;

De underscore zorgt ervoor dat alleen IE het leest, en dat als we straks naar IE7 gaan en deze bug hopelijk gefixed wordt, de regel ook voor IE7 onzichtbaar wordt.

Dat valt nog maar te bezien of IE7 inderdaad die regel zal negeren (en of het 3px probleem daadwerkelijk is opgelost uiteraard) - daarom zijn conditional comments imho 'veiliger'.

Intentionally left blank