[css] image 3px van rand door float: left ? - Softwareontwikkeling

maandag 12 mei 2003 23:50

Acties:

Superuser

Topicstarter

Ik heb zojuist enkele uren mijn hoofd gebroken over het volgende probleem, hopelijk weten jullie of ik nu tegen een IE bugje aanloop of dat ik zelf gewoon een fout maak.

Ik spreek van de volgende HTML (head weggelaten):

HTML:

<body>

<div class="header">
[img]"mindconnect_logo_broad.gif"[/img]
[img]"glasvezel1.png"[/img]
</div>

</body>

Deze pagina heb ik aan een stylesheet gelinkt, namelijk home.css. Deze ziet er als volgt uit:

Cascading Stylesheet:

body {
    color: black;
    background-color: #F2F2F2;

    margin: 20px 20px 20px 20px; /* afstandje van browser border */
    padding: 0px 0px 0px 0px;
}

div.header {
    background-color: #026399;

    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

img.logo {
/*  float: left; */
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

_{float: left; hier dus nog commented!}

Ok, all safe and sound voor zover ik kan beoordelen.

Nu bekijk ik deze pagina en dit ziet er als volgt uit:
Afbeeldingslocatie: http://woei.mindcontrolled.nl/zonderfloat.png

Afbeeldingslocatie: http://woei.mindcontrolled.nl/zonderfloat.png

_{de blokken waren plaatjes, but you catch my drift.}

Vervolgens wil ik dus die img.logo naar links duwen, en dus uncomment ik de float: left; uit mijn stylesheet.

Nu zie ik opeens het volgende:
Afbeeldingslocatie: http://woei.mindcontrolled.nl/metfloat.png

Afbeeldingslocatie: http://woei.mindcontrolled.nl/metfloat.png

Hoe kan het nu, dat, met alle margins en paddings op 0, er toch nog 3px ruimte zit tussen de rand van de DIV, en mijn plaatje. En voornamelijk, waarom alleen als ik het plaatje links laat floaten

Wat kunnen jullie hierover zeggen?

The cake is a lie | The Borealis awaits...

maandag 12 mei 2003 23:58

Acties:

crisp

Devver

Pixelated

misschien moet je even hspace="0" vspace="0" toevoegen aan je image-tag

Intentionally left blank

dinsdag 13 mei 2003 00:15

Acties:

Booster

Superuser

Topicstarter

Dat werkt (

), maar om het heel kort door de bocht te zeggen: zo wil ik het niet doen.

Zowiezo zijn die elementen deprecated, wat mijnsinziens een rede is om ze niet te gebruiken (althans in dit geval).
En verder wil ik dit natuurlijk gewoon in mijn stylesheet kunnen doen.

Ik nam zelf aan dat margin en padding bij een image tag deze elementen wel zouden vervangen, maar misschien heb ik het fout. Anders werken ze gewoon niet naar behoren zou ik zeggen.

The cake is a lie | The Borealis awaits...

dinsdag 13 mei 2003 00:25

Acties:

crisp

Devver

Pixelated

Booster schreef op 13 mei 2003 @ 00:15:
Dat werkt (), maar om het heel kort door de bocht te zeggen: zo wil ik het niet doen.

Zowiezo zijn die elementen deprecated, wat mijnsinziens een rede is om ze niet te gebruiken (althans in dit geval).
En verder wil ik dit natuurlijk gewoon in mijn stylesheet kunnen doen.

Ik nam zelf aan dat margin en padding bij een image tag deze elementen wel zouden vervangen, maar misschien heb ik het fout. Anders werken ze gewoon niet naar behoren zou ik zeggen.

he, we hebben het hier over IE met brakke CSS2 support

kort door de bocht: ik zou zo 1-2-3 niet weten hoe je dit specifieke probleem in IE anders op moet lossen met floats. In Moz is het inderdaad een kwestie van margins aanpassen, wat dus gewoon logisch is en naar mijn mening ook correct...

Intentionally left blank

dinsdag 13 mei 2003 00:31

Acties:

Verwijderd

Ik zou ook gewoon denken dat het gewoon met margin en padding zou moeten werken. In Mozilla werkt het ook, dus het zal wel een bug zijn van IE.
Als je echt, echt geen hspace=0 en vspace=0 wil gebruiken, dan zou je het zo kunnen doen:
img.logo{
voice-family: expression(this.hspace=0);
volume:expression(this.vspace=0);
}
Dit kan echter nadelige effecten hebben voor dhtml-scripts.

dinsdag 13 mei 2003 00:33

Acties:

Booster

Superuser

Topicstarter

zucht

waarschijnlijk kan ik de image wel weer in een div proppen en de div laten floaten, maar het ging me nu even voornamelijk om begrijpen waarom dit zo gebeurde.
(thanks again crisp

)

Naja, ik bedenk wel iets waardoor ik het hele float stuk niet meer nodig heb. Niet zo'n zin om er omheen te gaan werken dmv lousy tricks.

Ik zag dat richinstyle.com geen IE6 bugsheet heeft. Als iemand aanraders heeft voor websites om dergelijke dingen op te zoeken dan houd ik me aanbevolen

_{mompel mompel klote mompel shitty support mompel geen zin meer mompel zzzz}

[edit]
martijn22: bedankt, ik ken de tags niet maar ik zal ze nakijken en bepalen of ik ze wil gebruiken of niet

[ Voor 10% gewijzigd door Booster op 13-05-2003 00:35 ]

The cake is a lie | The Borealis awaits...

dinsdag 13 mei 2003 06:49

Acties:

IschaGast

En als je het eens zo doen:

Cascading Stylesheet:

body {    
background-color: #F2F2F2;    
color: black;    
margin: 20px;  
padding: 0;
}
#header {    
background-color: #FFFF00;    
color: Black;
margin: 0;    
padding: 0;
}

En je html eens zo

HTML:

1
2
3

<body>
<div id="header">[img]"1.gif"[/img][img]"2.gif"[/img]</div>
</body>

Bij mij werkt het in ieder geval, ik heb de images achter elkaar gezet.

Float left van je img was helemaal niet nodig dat is bijvoorbeeld als je meedere img achter elkaar hebt dan gaat de volgende img weer naast je andere img. Als ik het goed heb hoor ben het nu ook allemaal aan het leren.

dinsdag 13 mei 2003 09:58

Acties:

Booster

Superuser

Topicstarter

izzii, je code ziet er okee uit maar helaas lost het net niet helemaal mijn probleem op

De float had ik in mijn situatie wel echt nodig. Dit is in het voorbeeld inderdaad niet duidelijk, maar die was dan ook puur gemaakt op het illustreren van het probleem van de vreemde rand.

Ik gok dat ik gewoon voor een totaal andere aanpak kies zodat ik het hele gezeik met die float over kan slaan. Thanks anyway

The cake is a lie | The Borealis awaits...

dinsdag 13 mei 2003 10:37

Acties:

crisp

Devver

Pixelated

Booster schreef op 13 May 2003 @ 09:58:
izzii, je code ziet er okee uit maar helaas lost het net niet helemaal mijn probleem op

De float had ik in mijn situatie wel echt nodig. Dit is in het voorbeeld inderdaad niet duidelijk, maar die was dan ook puur gemaakt op het illustreren van het probleem van de vreemde rand.

Ik gok dat ik gewoon voor een totaal andere aanpak kies zodat ik het hele gezeik met die float over kan slaan. Thanks anyway

De oplossing in dit geval is om een div om je img heen te zetten, en de div te floaten. Ik heb nog geprobeerd om de img een display: block mee te geven, maar dat bracht ook geen soelaas. Duidelijk dus weer in IE-bug (of zouden ze dit een feature noemen?)

Intentionally left blank

dinsdag 13 mei 2003 11:40

Acties:

IschaGast

Als je wilt floaten kan je volgens mij inderdaad het beste 2 aparte divjes maken en die dan floaten. Waarom maak je het probleem dan niet ff duidelijk door een url te geven of zoiets en dan vervang je alle dingen die wij niet mogen zien ff door een ander plaatje.

Dan is het makkelijker helpen volgens mij. Of je gooit je vraag hier ff in de groep: http://archivist.incutio.com/viewlist/css-discuss/

dinsdag 13 mei 2003 12:27

Acties:

Booster

Superuser

Topicstarter

Het probleem leek mij in principe duidelijk genoeg, en ik had zelf ook voldoende andere oplossingen voor handen, maar het ging mij voornamelijk om de 'waarom'. Tis best vervelend als iets niet reageert zoals je dat beredeneerd had

Het gaat hier dus duidelijk om een IE-bugje en daar is niets aan te doen.

The cake is a lie | The Borealis awaits...