IE9 and hidden Flash movies

Internet Explorer 9 (and Chrome sometimes as well) tries to be a little too smart and do too many things for you. The best example is removing the Flash movie from the DOM when you set its style to:

display: none !important;.

This small gotcha led to some headaches about why JS wasn’t able to call methods (via the ExternalInterface) on my Flash movie. As it turned out this way due to IE9 just completely removing the Flash movie from the DOM.

wmode=”transparent”

I never knew/realised this, but it’s very useful to know:

The background of a Flash movie can be set to transparent. This allows the background color or image of the HTML page that contains the Flash movie to show through and allows the layering of Flash content with DHTML content.

Very useful when your Flash is on a layer in HTML that could be covered by something else when you’re scrolling the page.

Wmode not set:

Wmode not set

Wmode not set

Wmode set to “transparent”:

wmode set to transparent

wmode set to transparent

Source: Adobe TechNote

PS: Never mind the awesome (ahem) colours, this was just a quick test. 😉

BF:H Random tip

Whenever you join a BatlleField: Heroes server a ‘Tip of the day’ is displayed. I was wondering where I could find all the tips and if anybody had already done something with them (i.e. create a service to get a random tip).

I couldn’t find anything after a Google search, so I started looking around. It turns out that all in game copy is stored in a file called ‘strings.csv‘. If you have BF:Heroes installed in the default location, you can find it here: ‘C:\Program Files\EA Games\Battlefield Heroes\mods\bfheroes\Localization‘. This file is a comma separated values file which you can open with Notepad and even Excel.

The bits I needed to have tips displayed are the rows starting with ‘WEST_FE_Loading_tip_ingress_‘ and ‘WEST_FE_Loading_tip_text_‘. What I’ve done for now is copy those fields over into an XML file: http://ansuz.nl/php_lib/bfheroes/tipoftheday.xml. I guess a next step could be a little script (or AIR application) that takes the ‘scripts.csv‘ file and converts it to XML in the format I need.

I then created a small PHP script to load the XML file and display a random quote, see here: http://ansuz.nl/php_lib/bfheroes/tip.php?method=randomTip
The first line is the ‘tip header’, the second the ‘tip body’. Both are wrapped in a ‘span’-tag with a unique class name so you can style it the way you want.

The final bit I did is loading a random tip on a site with my BF:H stats and applying some styling to it: http://ansuz.nl/bla/bfheroes/.

Available resolution in the browser

I’m working on a redesign of my homepage and completely forgot how much screen real-estate is available within a browser to display your website. A quick Google serach told me the following:

Screen resolution – available in browser
640×480 – 600×300
800×600 – 760×420
832×624 – 795×470
1024×768 – 955×600

Original forum post:
Available browser space for different screen resolution

Some interestion information about browser usage, including most common screen resolution, etc can be found at W3C’s Browser Information page.

IE7 and comments

I ran into the weirdest problem with IE today.

To test some functions I wrote for a Drupal page I outputted some values in a comment area (between ““) before the html-tag. In FireFox this works perfectly fine, but when I tested in IE my layout was ruined. Where the site was supposed to be centerd it was left aligned in IE. Also the min-height was neglected in IE. A strange problem but the solution was to remove the comment and everything worked like a charm again.

CSS for print

Never ever use an absolute positioned DIV-element for print. It will make the printer print half lines of text at the bottom of the page. This gets even worse in FF, when there’s (theoretically) a second page, FF won’t print it.

dompdf experiment pt1 – tables

In order to make nice pdf documents from html pages I stumbled upon dompdf. This tool can actually read a html page and output it as a pdf file. The problem with the tool right now is that it doesn’t support ‘div’ positioning (yet), so you have to “layout” everything with tables.
The first test is making a bit more complex table and have that outputted the right way. For now only the rowspan attribute doesn’t seem to work correctly.

Cross Browser HTML Printing

There’s a big difference between making a website look good on screen and for print. With a screen you can be save in using pixels for your fonts and more absolute measures. In print this is not done. First there are different paper-size, a4, letter, a3, etc… Than every printer has it’s own margins too. Next to that a printer most of times works in 300 dpi (dots per inch) while a screen is only 72 dpi.
So when ur marking a page up for print be sure not to use any absolute measures like pixels, but only to use relative ones like em, %, pt, etc…

Another screw up for print is using floats, they display different with every browser. As I just now discovered. FF (FireFox) displayed a div through another div, while IE displayed them below each other, as intended. I guess that’s what you get for using inline styles.
If you’re like me are using 2 stylesheets, one for screen, one for print. You have to take care not to overlook any !important statements in your CSS for screen. This can majorly screw up your print size. I had a width: 1003px !important defined, while FF printed the page just fine, IE(6) would let the page overflow and not print what ran off the page.

A nice article about printing HTML can be found here: http://alistapart.com/articles/boom