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% [?]

It is great how challenging things can get when you leave your standard C++ environment and start dealing with some web stuff, which is quite new to me.  There are plenty of things to learn!

I am sure that web design is a piece of cake to many people out there, but since I have just dived into baking myself, I do not have much experience. To help other bakers trying to get things right, I am going to share the things that were difficult for me to figure out.

I started  creating the landing page for our upcoming game and thought “well, some HTML here and a bit of CSS there, and we are ready to go”. This worked out quite well until I came to the part where I wanted a simple button to appear on the site that changed when the mouse hovers over it. Believe me, there are as many ways to do this as there are different browsers out there… Which is no coincidence at all. It is just that there is no general solution to this problem that works the same way in every browser!

The first thing I had to do was to focus on the browsers I want to support. At the moment, my choice is “IE, FireFox, Opera”. This should do for a start.

I tried different methods, sometimes including JavaScript. Personally, there is one thing I don’t like about JavaScript: It is often assumed to be unsafe. Depending on your security settings, you might always get asked by IE7 if you want to enable JavaScript on the website you are currently viewing or turn it off. I think this might frighten off some people which IMHO is bad.

So after trying different methods that only worked on two of the three browsers I wanted to support, I finally found the solution that I was satisfied with and that does not use JavaScript. Here is how it works:

You define your button as a cell of a table, known as “table data”. The tag is <td>.

The HTML code for the button is as easy as this:


<!-- mybutton -->
<table border="0" cellspacing="0" cellpadding="0" width="120px" height="24px">
<tr>
<td class="mybutton" width="100%" height="100%">
<a href="my hyperlink reference">Button Text</a>
</td>
</tr>
</table>
<!-- mybutton -->


The important thing is that you use the class “mybutton” for the table, so we are able to define the style for the table data, which is our button, in the CSS file.

So the CSS style is the interesting part. Check this out, it is quite self explanatory:


table.mybutton
{
width: 120px;
height: 24px;
margin: 0px;
padding: 0px;
}


This defines the size for the button. Remember, the table data sort of IS the button.


td.login-button a, td.login-button a:link
{
display:block;
width:100%;
height:100%;
margin:0px;
padding: 0px;
font-size:12px;
font-family:Verdana, Arial;
font-weight:normal;
color:#FFFFFF;
text-decoration:none;
text-align:center;
line-height:22px;
background-image:url(../images/button_normal.gif);
}


Nothing weird going on here. We just define the table data and the link inside it. We give it width and height 100% in order to make it just as big as we defined the table in the HTML file. The background-image contains the graphics for the button in its normal state and is also just as big as the table which in our case is 120 by 24 pixel.

Defining a AND a:link is necessary to make it work in Opera. Only defining a:link is not sufficient for that browser.

One thing to remember is:
Make sure to set all default values the way you want them.
For example, different browsers may have different default values for padding. If you don’t explicitly set them to 0, things might look different in different browsers. You can’t be sure every browser sets default values to 0. You must do this on your own.


td.login-button a:hover
{
color:#FFFFFF;
background-image:url(../images/button_hover.gif);
}

td.login-button a:visited
{
color:#FFFFFF;
}

I guess you already know what this is for. We simply set the image for the state of the link where the mouse hovers over it to the one with the “button-hover” graphics in it. We also make sure that the color always stays white in our button, no matter how normal links are treated.
The reason why I manipulate the Link (a) in here and not the table or table data itself is plain simple: IE does not support the “hover” feature for any other element than the <a> element. So :hover for table data won’t work. Don’t ask why, I don’t know.

I found the information for this on one of the most extensive HTML info websites I know, which is unfortunately not available in English at the moment but only in German and French: Selfhtml.

Thanks for reading and stay tuned. I am going to tell you how the vertical alignment of the button text works after my next visit to hell.

Popularity: 2% [?]