[css] Transparante achtergrond met float

[Phenomenon]

Ik krijg het maar niet voor elkaar om een achtergrond transparant te maken bij een div die ik float. Is het uberhaubt wel mogelijk om bij een gefloate div de regel

Cascading Stylesheet:

#floatdiv {background: transparent;}

te doen? Zodra ik de float er uit haalt, wordt hij namelijk wel met transparante background weergegeven. Iemand een idee?

Hoe ik het nu heb:

HTML:

<div id="main">
 bla bla bal
 <div id="floatleft">
  bla
  bla
 </div>
 <div id="nogenfloat">
  bla 
  bla
 </div>
</div>

Cascading Stylesheet:

#main {background: url(http://www.link.nl/plaatje.jpg) no-repeat;}
#floatleft {background: transparent; float:left;}
#nogenfloat {background: transparent: margin-left: 234px;}

[ Voor 37% gewijzigd door Phenomenon op 09-03-2006 09:40 ]

[crisp]

Vergeet je niet gewoon je float te clearen zodat #main 'm kan omsluiten?

[gvanh]

Wat gebeurt er als je helemaal geen achtergrond opgeeft voor de div? Is hij dan niet vanzelf al transparant?

[Phenomenon]

crisp schreef op donderdag 09 maart 2006 @ 11:38:
Vergeet je niet gewoon je float te clearen zodat #main 'm kan omsluiten?

Er staat een footer welke een clear:both heeft, dus dat klopt volgens mij wel, maar ik gooi er om te testen wel even een <br style="clear:both" /> in.

Wat gebeurt er als je helemaal geen achtergrond opgeeft voor de div? Is hij dan niet vanzelf al transparant?

Nope zonder background property loopt de achtergrond nog steeds door,

edit:
Dat <br style="clear: both;" /> doet het hem. Dank dank dank dank

[ Voor 18% gewijzigd door Phenomenon op 09-03-2006 12:44 ]

[JHS]

Alternatieve manier om floats te clearen: http://annevankesteren.nl/2005/03/clearing-floats .

[crisp]

JHS schreef op donderdag 09 maart 2006 @ 16:41:
Alternatieve manier om floats te clearen: http://annevankesteren.nl/2005/03/clearing-floats .

offtopic:
misschien moet ik Anne even mailen om daar een disclaimer bij te zetten dat dat vooralsnog in IE7 niet (meer) werkt?

[JHS]

crisp schreef op donderdag 09 maart 2006 @ 16:52:
[...]

offtopic:
misschien moet ik Anne even mailen om daar een disclaimer bij te zetten dat dat vooralsnog in IE7 niet (meer) werkt?

Dat zei je ja, maar toen ik het teste werkte het uitstekend . Het is op zich wel een oude testcase, maar volgens mij voldoet 'ie?

[crisp]

Deze deed het vziw niet goed in IE7 beta 2 (note dat in beta 1 nog weinig tot niets op het gebied van CSS gewijzigd was).

[JHS]

Jouw versie bugt al in IE 6, aangezien je de _height: 1%; niet hebt die je in mijn testcase én in Anne z'n voorbeeld ziet . Die ontbreekt in jouw testcase, terecht, aangezien het zonder gewoon zou moeten werken .

[JayVee]

Ik ben wel eens een ander raar probleem tegen gekomen bij floats met background: transparent. Ik kon het fixen door een 'vaste' waarde als achtergrondkleur op te geven. Mooier was natuurlijk geweest het transparent te houden om de achtergrondkleur van het element erachter te gebruiken, maar als IE dat niet lust dan maar zo.

Blijkbaar is transparent achtergrond icm floated elements niet zo netjes geimplementeerd in IE. Wie had dat gedacht...

// edit:
Ik heb het even opgezocht: het probleem was dat een block-level a alleen op de tekst zelf (en dus niet op de hele box, zoals het hoort) een hover effect gaf als background-color niet opgegeven was of transparent was. Bij een vaste waarde ging het wel...

[ Voor 27% gewijzigd door JayVee op 09-03-2006 19:23 ]

[crisp]

JHS schreef op donderdag 09 maart 2006 @ 17:29:
Jouw versie bugt al in IE 6, aangezien je de _height: 1%; niet hebt die je in mijn testcase én in Anne z'n voorbeeld ziet . Die ontbreekt in jouw testcase, terecht, aangezien het zonder gewoon zou moeten werken .

Het is immers een testcase voor IE7; dat IE6 buggy is weten we allemaal
Overigens is het niet de overflow:auto die in IE6 voor clearing zorgt; een parent-element met 'layout' cleared ook zonder die property (en dus tegen de specificaties in) z'n floats.

JayVee schreef op donderdag 09 maart 2006 @ 19:18:
// edit:
Ik heb het even opgezocht: het probleem was dat een block-level a alleen op de tekst zelf (en dus niet op de hele box, zoals het hoort) een hover effect gaf als background-color niet opgegeven was of transparent was. Bij een vaste waarde ging het wel...

Een afmeting geven helpt hierbij ook (bijvoorbeeld de height: 1% zoals JHS al noemde, hoewel ik persoonlijk zelf niet de underscore-hack zou gebruiken om die toe te kennen); het is een hasLayout-related bug.

[ Voor 10% gewijzigd door crisp op 10-03-2006 00:23 ]