[CSS] Rare IE margin bij image float:right

[Sn0rkel]

Hoi,

In een poging een layer van een afgerond hoekje te voorzien gebruik ik een child-layer waarin een image geheel naar rechts wordt gealigned. De child-layer krijg ik keurig in de hoek van mijn hoofdlayer maar het plaatje houdt op de een of andere manier in IE een margin aan de rechterkant over... dit gebeurd natuurlijk weer niet in FireFox. Is dit een bekende IE bug? Ik kan er niets over vinden op got/google, en zit dus een beetje met mijn handen in het haar.

code:

#container {
  border: 1px solid black;
  margin: auto;
  padding: 0px;
  width: 960px;
}

#hoekje {
  background: green;
  padding: 0px;
  margin: 0px;
  float: right;
  width: 100px;
}

#hoekje img {
  position: relative;
  top: -1px;
  right: -1px;
  height: 50px;
  margin: 0px;
  float: right;
}

en het resultaat in IE (links) en FireFox


Alvast bedankt!

[Verwijderd]

je positioneert je img nu relative, maar geeft wel een top en right positie mee. dat heeft geen nut. je zou ook je img gewoon als background-image van je div hoekje kunnen nemen. een goed voorbeeld voor custom borders en hoekjes vind je hier

[ Voor 14% gewijzigd door Verwijderd op 08-07-2005 10:18 ]

[Sn0rkel]

Ik meende dat relative icm top en right wel degelijk werkt, maar dat de image dan relatief tov de container (is layer hoekje) wordt gepositioneerd. Vandaar dat in IE de layer binnen de border blijft van de hoofdlayer maar dat het plaatje wel er 'overheen' valt door 1 pixel naar rechtsboven te schuiven...

[crisp]

Sn0rkel schreef op vrijdag 08 juli 2005 @ 10:29:
Ik meende dat relative icm top en right wel degelijk werkt, maar dat de image dan relatief tov de container (is layer hoekje) wordt gepositioneerd. Vandaar dat in IE de layer binnen de border blijft van de hoofdlayer maar dat het plaatje wel er 'overheen' valt door 1 pixel naar rechtsboven te schuiven...

Ja, maar waarom gebruik je dan geen:

Cascading Stylesheet:

#hoekje {
  background: green;
  padding: 0px;
  margin: 0px;
  width: 100px;
  position: absolute;
  top: -1px;
  right: -1px;
}

Overigens kunnen afrondingsverschillen ook nog wel eens voor een pixeltje verschil zorgen - voornamelijk in IE. Vaak helpt het dan om je container 1 pixel groter of kleiner te maken.

[TeeDee]

Heeft dit niet iets met whitespace te maken?

[Sn0rkel]

Misschien begrijpen jullie niet helemaal exact wat mijn probleem is. De layer 'hoekje' staat prima tov de plek waar ik mijn hoekje wil hebben, en in firefox staat het plaatje ook helemaal in de hoek van hoekje. perfect dus. Wat nou het probleem is is dat in IE het plaatje NIET tegen de rand staat, ondanks een float: right; eigenschap... er komt een vage margin tussen!

Whitespace zat ik ook aan te denken, maar is het niet zo dat float:right; dit zo moeten verhelpen icm margin: 0px op plaatje en padding: 0px op layer?

edit: overigens heb ik nu een workaround gevonden door het plaatje als background van de layer in te stellen en als eigenschappen top, right en no-repeat te nemen. Dit neemt niet weg dat IE raar doet met de margin-right van de image.

[ Voor 20% gewijzigd door Sn0rkel op 08-07-2005 11:05 ]

[Surkow]

Dat probleem had ik ook bij het maken van afgeronde hoeken in een website. (http://proto5.thinkquest.nl/~lle0446) Dit heb ik opgelost door een IE hack toe te passen die de plaatjes een pixel opschuift.

Het volgende moet je invoeren als style in een html document:

code:

<!--[if IE]>
   <style type="text/css">
   /*<![CDATA[*/

CSS hiero die plaatje in IE andere plaats geeft

   /*]]>*/
   </style>
<![endif]-->

Dit werkt alleen maar omdat IE de enige browser is die deze manier van style verwerken ondersteunt. Alle andere browers negeren deze code dus.

De website waar ik die hack vandaan heb is http://www.dithered.com/css_filters/index.html

Bij mijn oplossing heb ik allemaal div's misbruikt om de plaatjes in alle hoeken te krijgen. Die heb ik een absolute positie meegeven. En in IE heb ik een extra style toegevoegd.

[ Voor 108% gewijzigd door Surkow op 08-07-2005 17:36 ]