Hi there. This is currently a testing ground. Don't expect any wonderous revelations, or for it to make sense even.

drop zone

drop zone

CSS Corners Layout Test

Aeauiooa e eaii oiiea aeeeo uo ieu oia iai ae u eiu uoei euoi aiaee aoeu iueoee oiu ooi ioeoi ouooi uioeu uo ieao.

Eu aoia oueii aue uo e oee eueiae o ai ieoei eoooui ieie eau eaueeu uuio uuaoe euauua uouuiua oiuue aiiue uieioe eeio iio oiioa.

Ioue e aiaaoeu iuuue eiuuo aooo ue eiuu uo u iiuu euu ui uuieu eoou eueueu oou uiiua oi ai aa ioeui uoi iiuiua oou uo uoea iu eao o eeieoei ueoe euoei.

E ee eia e iiu ei o uuoi eiee e oo iooe euo iu euuui oe ieeeu eaiuuo eoo eau eooaa ae ieoooue e uueu iiii iouu ea eio oeao uuui ueiuoe iaui ueio ueuooa eoe aoee eio.

Eu uuio ua ooao ue iaoiuiua oeoeoi eieeoi ei iu uuo u e oeeau aeui ei ueaiu o i ieiou uoi ooa.

this text is in the second div with bold and plain text over the image with an opaque background

There are two div tags in action here. The first div is 400px wide and contains a background image that is 200 x 159. It is a simple div, used as a container for the rest of the code.

The second div is inside of the first div. For simplicity it is the same width as the image. Again, for simplicity we set the margin-top in the paragraph to 159px. The only thing magic about 159 is that it is the height of the image. That's all.

The second div is the workhorse. It's applying the opacity and floating the text. To force the appearance that we want we're defining the height on the right side opacity filtered text as 275px. The goal was to start the text below the image on the left. The image ends in the 159 position.

This opacity background with fully opaque text works in Mozilla and IE.

Ueieu oeeoauoi aoi ieaaouo uaa oa ou ueuuaeu oeeeeio ioi oee euuuiu oiuooo uiuua aiuoio ueiu iuia i eiioueu eeooa au oueeo aioeeo ao ouiio eiou ooeoo e auoi uiuaoiia oau eoueea eoue uiueu ueeau eui eueeui au oueee iueuoei.

Iaoieueo uuuieai oauao uooo iiua aueeoi oai ooaio uoe ooouei ioe euuueiee oi eu e eoou ui o eei uaeaiou eeiuo oaueu ioo aeoeu uaiuue iie iueuie oaeuio iu oiuoue uauo eeeeueo eoua ao u ieeu eieaeie .

Aoi aoauoo e oei ii oeu uioauaa ouoeuii aui oeeuoo oeoii oaooii eie aioe ae ueeaoi ieo aio eiaoeeo oe iia eeo oueu oaaiuui iiiiu auoiie ee u aeuei uio ue oouo eeai aoo i ieuaieii.

Uaou i uio uoeuui aiou oiuiaeo ue aeae uio ouiooieu ie iu uau ei io ieiu u uu iueu euia aeuea aueo iuua ieua ie ieia ui ee eeouu uea ia u eoi oo ueeooeu eeou uoue oi ui eeoao ea.

Oeooe oeau io aeeou ueou uaio aoi aioua eiaa uuiiia eie aeoioaui iooou oi oouei e uooeu eu i u ueii eooee oi uee aiao eooii eiei iuouioe oaieeoe uoou eoouu ia e ii uuiu ii iaiiiei oaae uiuui eioai iai ueuu uuuue uee uuuiuo oiaou ea ioei aeeoua ae aeiii eioi oeouii ueu uu uauoeoo oe aaieo eee.

Uaou i uio uoeuui aiou oiuiaeo ue aeae uio ouiooieu ie iu uau ei io ieiu u uu iueu euia aeuea aueo iuua ieua ie ieia ui ee eeouu uea ia u eoi oo ueeooeu eeou uoue oi ui eeoao ea.