Clever::Tagline::Pending

Using Flash for background animation

April 29th, 2007 at 8:47 pm (CSS)

I was working on a website recently that needed to display Flash animation beneath normal HTML content as part of its visual treatment. In the course of developing this, I found out that embedded Flash objects inserted into a HTML document will be displayed above all other content.

The easiest way to get around this is to enclose the Flash object in a another element, for example a <div> . This enclosing element will then have a value for z-index that is lower than the content that should be displayed above the Flash object.

The next step is to position the content and Flash object, there are 2 ways to "layer" the 2 elements on top of each other. The first method is to use absolute positioning, the second is to take advantage of negative margins. In my case, I went with the latter.I will pull div#content up towards the Flash object by declaring a negative top margin for #content.

In the course of testing, the page is rendered as intended in Internet Explorer 6/7 and Firefox. However, the Flash object will be displayed above content in Safari when any text is selected or the page is scrolled by the user. To get around this issue, enable transparency for the Flash object. Just take care to position content away from the non-transparent parts of the Flash animation or it will be hidden from view in Safari.

Comments

Internet Explorer 6 and 7 on OSX with Parallels

April 11th, 2007 at 9:47 am (Apple, Web)

I finally bit the bullet and got my own shiny new copy of Parallels for Mac. It helped that I got an email from the company containing a link to purchase the software at a discounted rate.

So I've been putting it through its paces for the past few weeks and its been great! No more having to do website compatibility checking for Internet Explorer 6 and 7 on different PCs. I just need to fire up Parallels and boot up the Windows XP images with the browser installed. You do need to have at least 2 GB ram in order to have both the VM and OSX running smoothly.

Comments

Stupidly simple way to clear floats with CSS

January 22nd, 2007 at 4:37 pm (CSS, Standards)

I discovered this method of clearing floated elements (this may be old news to some of you) in a layout using CSS while searching the web for alternatives to inserting extra markup just so the layout will look right (I'm looking at you, <div style="clear:both"></div>). This is just brilliant, a single style declaration, "overflow: auto;" to the element containing the floats and that's it. It seems to work with all major browsers, which includes Firefox, Mozilla, Internet Explorer 6 & 7, Opera and Safari.

There is an extra step to make this work in Internet Explorer 6 though. A dimension needs to be applied to the element that the overflow:auto; declaration is being applied on in order to trigger the hasLayout property in the element.

3 Comments

Singapore Web Standards Group

January 18th, 2007 at 12:45 am (Standards)

I enjoyed the first Singapore Web Standards Group meetup held at Raffles Girls School. Saw a few familiar faces and several new ones as well. It's good to know that web standards are alive and kicking in Singapore. I really appreciate the effort given by Lucian who organised the meetup, and for the entertaining and informative presentations given by Coleman and Nick.

Although I thought the meetup could have done with more publicity, I only got to know of it from Sip Khoon a week before. I suppose it's something that we can do to make people aware of the options available

Update
Ivan Lian has pictures of the meetup on Flickr. Check it out!

1 Comment