Rough Sea Games

During my attempts to get into the deepest voodoo magic known to man, sometimes referred to as “webdesign”, I stumbled over another problem which took me some time to find the answer to. But since I recently played Professor Layton for the DS and immediately fell in love with it, I don’t mind wracking my brains about a riddle now and then… So my problem was to display a DIV element OVER an existing flash-object.

The first hits on google told me that this is impossible, since the flash-object has no z-index and hence the z-indexing for elements does not work here.

After some more google-usage, I found out that you can tell your flash-object to be “transparent”. You do this by adding the parameter “wmode” and giving it the value of “transparent”. You’ll also have to add wmode=”transparent” to your embed tag. And voila, it worked for me! I haven’t tested it on mac browsers, but as soon as I’ll have I’ll tell you.

So the whole code looks like this:

<div id="flash">
<object border="0" width="802" height="766" id="YOUR_ID_HERE">
<param name="movie" value="myswf.swf">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="transparent">
<embed src="myswf.swf" width="802" height="766" name="YOUR_ID_HERE" wmode="transparent">
</embed>
</object>
</div>


As you can see, I used a unique DIV that holds the flash-object. This DIV has a lower z-index than the DIV that is shown over the flash-object. As I told you, the z-indexing does not work in this case. I just added it for the sake of completeness.

Popularity: 3% [?]

In my last post, I showed you a way to create rollover buttons that work in many different browsers without using JavaScript. I decided to use different images for different button states (like “normal”, “mouseover”) and use plain text for the button caption. This way, you have the advantage to use one and the same set of images for all buttons that have the same size. If you include your text in the images, you’ll need unique graphics for every button.

Unfortunately, there is one problem about plain text: alignment. Although it is quite easy to align text horizontally by using “text-alignment:center” in your CSS file, it was quite hard for me to figure out how to align the text vertically.

The first thing I tried was using “vertical-align:middle”. This might sound like the perfect solution,  but as a matter of fact, it is not. The vertical-align keyword controls the behaviour of adjacent elements of different size, like text with different font sizes. And the most important fact about vertical-align is: It is relative to the lineheight, NOT to the height of the parent element. Believe me, it took a long time for me to figure this out. And to understand it.

So what do you do if you want to vertically center a line of text, e.g. in a button? You might have guessed the answer: use the lineheight keyword. Since the vertical-align keyword defines the behaviour relative to the lineheight, you can combine the two keywords to get the desired effect.

In my case, I just set the lineheight of the text to the height of the button, and specified “vertical-align:middle”. And it works.

Check out this explanation to see how it works in detail.

Popularity: 2% [?]