Clever::Tagline::Pending

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.

[html]

Flash object markup

Actual Page Content

[/html]

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.

[html]

Flash object markup

Actual Page Content

[/html]

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.

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.

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.

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!

If you have ever tried to ensure that your website validates against its declared doctype, you probably know that it is a task that consumes a fair amount of time, even with tools like the HTML Validator or the Web Developer extensions for Firefox.

In comes Nikita the Spider, this web application performs bulk validation of the pages within a website. It can run unattended and have a report sent to an email address that you specify. Unfortunately, the site is unable to accept new requests since the its mention on 456 Berea Street.

Users will need to possess some technical knowledge in order to make sense of some of Nikita’s advanced configuration settings. While the descriptions go towards explaining what the individual options do, it might confuse the less technically inclined. In any case, the default settings are all you need to start using the tool.

According to Markus Mielke, the Program Manager for Internet Explorer 7, the development team has improved aka corrected implementation for CSS2. It remains to be seen whether the browser will finally end years of frustration for web developers who have had to grapple with years of rendering bugs on Internet Explorer. Chris Wilson has pointedly stated that while IE7 will not be ACID2 compliant, the product team is trying to remove the problems people have with IE. A year after Paul Thurott’s very public shaming of the IE7 Beta, he has changed his stance to a more conciliatory one, albeit still critical.

I have personally tried using IE7 on a Windows XP machine, the Vista interface looked out of place and it didn’t as intuitive as Firefox. I would imagine that it would be more pleasurable to interact with on Windows Vista (when it finally ships in 2030). I think the real test of standards compliance for IE7 would be after its release, when developers start to test against for real websites. Till then, given Microsoft’s track record for internet browsers, I’m not holding my breath.