Stubborn flash object just won't align to top of table cell! [Archive]

Click to See Complete Forum and Search --> : Stubborn flash object just won't align to top of table cell!

kai2810

02-14-2010, 02:08 AM

Hi guys,

As described, I have trouble getting a flash object to get itself aligned to the top of the table cell it is positioned in. :mad:

I tried using align parameters in the <TD> tag itself, the <object> tag, set all padding and margins to 0...still doesn't work!

http://www.thienkaiwei.com/index2.html

As you can see from the link above, there is a green line there which indicates that the flash object is just not touching the top of the page. I set the TD cell background to green for easier spotting.

below is the html code. PLEASE ADVICE! Thanks :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script language="JavaScript">
var message = "Copyright � My Drum School Singapore. All Rights Reserved. ";
function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }
document.onmousedown = rtclickcheck;
</script>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Drum School: We Are Serious About Drumming. [SINGAPORE]</title>

<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>

<body>
<table style="width:100%" border="0" cellspacing="0" cellpadding="0" align="center">

<tr style="background-color:#4b4b4b;">
<td valign="top" style="height:100%;background-image: url(images/l.gif); background-repeat: repeat-x;width:50%;"></td>
<td style="background-color:#6F0; height:215px;width:766px; vertical-align:top;padding:0px; margin:0px; border:none;" valign="top">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width=766 height=215 align="top">
<param name="movie" value="flash/flash_index.swf">
<param name=quality value=high>
<param name="wmode" value="transparent">
<embed src="flash/flash_index.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent" width=100%></embed>
</object>
</div>
</td>
<td style="background-image: url(images/r.gif); background-repeat: repeat-x; height:100%;width:50%;" valign="top"></td>
</tr>

Pprakash

02-14-2010, 03:50 AM

You Must changed the #flah style as folloows

#flash {
position: relative; /*or absolute*/
z-index: 0;
height: 100%;
width: 100%;
top:-10px;
}

kai2810

02-14-2010, 08:14 PM

hi prakash,

from the #flash CSS code, i removed the positioning code, along with the width and height. I also set the margin-top to -2px, which worked.

However, if you go over to http://www.thienkaiwei.com/index2.html, you'll notice there is this grey line running under the black strip at the top left and right section of the page. There is supposed to have one grey line running under the flash menu too, to soften the edges of sorts.

I got the flash menu to align properly with the black strips on the left and right sections, but you can see that the bottom remains 'sharp'...

I tried reducing the height of the flash menu, and this was what i got.
http://thienkaiwei.com/index3.html

The dimensions goes out of whack...
any ideas? Am i clear on what I'm trying to say?

Eye for Video

02-14-2010, 09:40 PM

First off, validate the code on the page:
http://www.w3schools.com/site/site_validate.asp
There are so many errors that trying to fix anything without first eliminating those errors is hopeless.
Start by using a more appropriate DOCTYPE. The DOCTYPE is what determines which set of rules the browser will use to parse the page. In your case change the DOCTYPE to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Then validate the code with the link above. After eliminating all the errors, if you still have problems, continue the post and we'll try to help.
Best wishes,
Eye for Video
www.cidigitalmedia.com

kai2810

02-16-2010, 12:39 AM

Hi Eye,

I went through the validation and fixed up what I could. However a lot of the errors comes from the Site Validation not recognizing attributes in the URLs within the <embed> tags. For example,

# Error Line 282, Column 154: reference to entity "ref" for which no system identifier could be generated

…ool/23566610453?v=app_2347471856&ref=ts" target="_blank" class="l2_text">here

✉

This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.

I don't think I should change those least i screw up any of the url sourcing that the embed tags are referencing to. Am I right?

Here are blown up screenshots of my prob, to make sure i get prob across accurately ;)

The blownup screenshot below shows the way it should be, with a 1px in height grey bar running across the bottom of the black bar to soft the edges. That grey bar is actually the background colour of the <td> table cells. On the left and right side of the sides are background images loaded and aligned to the top of their respective <td> cells.
http://www.thienkaiwei.com/images/correct.jpg

However, my prob is that the flash menu in the center <td> cell is taking up the entire <td> cell, leaving no space at the bottom of that center cell to show the grey background to soften the edge. I have used the align attributes to the <td> cell, the <embed> tag itself.

Here's the screenshot.
http://www.thienkaiwei.com/images/problem.jpg

Is there any other options available?

Below is the code I am currently using for this section.
<body>
<table style="width:100%" border="0" cellspacing="0" cellpadding="0" align="center">

<tr style="background-color:#4b4b4b;">
<td valign="top" style="height:100%;background-image: url(images/l.gif); background-repeat: repeat-x;width:50%;"></td>
<td style="height:216px;width:766px; vertical-align:top;padding:0px; margin:0px; border:none; background-color:#000;" valign="top">
<div id="flash" style="height:215px;width:766px; margin-bottom:1px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width=766 height=215 align="top">
<param name="movie" value="flash/flash_index.swf">
<param name=quality value=high>
<param name="wmode" value="transparent">
<embed src="flash/flash_index.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent" width="766" height="215"></embed>
</object>
</div>
</td>
<td style="background-image: url(images/r.gif); background-repeat: repeat-x; height:100%;width:50%;" valign="top"></td>
</tr>

Eye for Video

02-16-2010, 10:18 AM

Well you should still add a DOCTYPE and fix the errors. And <embed> tags are not valid code so they should go.
Working with the flash_index it looks like it has a 1px black line across the top. Looks it's part of the original Flash. It's because the bitmaps not coming all the way to the top of the Flash document. Flash doc background color is set to black, change the doc background color to red to test this. Then move the bitmaps to cover entire stage.
As for getting a soft edge... I'm not much for using tables so here's a much cleaner way to get you banner on your page. Change the path to the background image and the flash.swf to match your folder set up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Drum</title>
<style type="text/css">

</style>
</head>

<body>

<div id="main_container">

<div id="flash_banner">

<object id="myflash"type="application/x-shockwave-flash" data="flash_index.swf" width="766" height="215">
<param name="movie" value="flash_index.swf">
</object>

</div>

</div>

</body>
</html>
I put a 5 px top margin in the flash_banner just so you can see the black line that is part of the .swf. Remove that top margin and the bottom aligns, soft edge and all. Code is all valid by the way.
Best wishes,
Eye for Video
www.cidigitalmedia.com

kai2810

02-18-2010, 06:00 PM

Hi Eye,

thanks for your responses.

I did tried to use DIV tags at the start, doing away with the table based layout. I did learned that DIV blocks are the way to go, but had quite a bit of trouble getting the blocks to line up properly, exactly the way my client wanted it. The blocks were floating all over the place...

Plus, if I can't figure it out easily, I doubt my client will be able to. I want to leave my client with easy to maintain html code, and so far tables seems to be the most stable. He himself stated that he want to use tables which he is more familiar with.

Regarding the flash animation, i have no control over it. I have to work with what I have control over.

Right now I have another issue...

Rendering in Firefox 3.5.7
http://www.thienkaiwei.com/images/firefox.jpg

Rendering in IE 8
http://www.thienkaiwei.com/images/IE.jpg

As you can see, in firefox the grey bar that is supposed to soften the edges ended up being about 2px in height. I did a screen capture using photoshop and found the height of the <td> cells to be 218px.

I tried reducing the height of all three <td> cells to 215px, but it didn't work. Worse still, it removed the softening edges in IE too.

Any idea why this happens? Is it due to the difference in browser renderings?

Here's my code
<table style="width:100%" border="0" cellspacing="0" cellpadding="0" align="center">

<tr style="background-color:#4b4b4b;">
<td valign="top" style="height:215px;background-image: url(images/l.gif); background-repeat: repeat-x;width:50%;"></td>
<td style="height:216px;width:766px; vertical-align:top;padding:0px; margin:0px; border:none; background-image: url(images/l.gif); background-repeat: repeat-x;" valign="top">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width=766 height=215 valign="top">
<param name="movie" value="flash/flash_index.swf">
<param name=quality value=high>
<param name="wmode" value="transparent">
<embed src="flash/flash_index.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent" width=766 height=215></embed>
</object>
</div>
</td>
<td style="background-image: url(images/r.gif); background-repeat: repeat-x; height:216px;width:50%;" valign="top"></td>
</tr>

kai2810

02-19-2010, 12:32 AM

Could it be the box sizing problem?

I'm looking into it and tried using it, still no luck...

Any pointers will be much appreciated!

Eye for Video

02-19-2010, 09:07 AM

Not sure what you mean by "box sizing problem", but it may have to do with that negative margin you're using for the #flash, remove and test. Far as I can tell, the neg margin is just to get rid of that black line running across the top of the .swf.
I know that you think working with tables is easier, but I'd disagree with you. As you are experiencing, tables can be a real pain when used as a design layout instead of holding tabular data, which is what they were designed for.
So if you can't get the table layout to work for you, you could still use the code I posted above to display the banner. Then just put all your other tables inside the #main_container right below #flash_banner. You just don't need such a complicated table layout for a simple banner like that.
Anyway, best wishes on your project.
Eye for Video

kai2810

02-19-2010, 06:35 PM

hey eye,

I managed to solve it...using DIVs!! :D
Spent the entire afternoon on it.

www.thienkaiwei.com/index4.html

I removed the entire TR row for the top and replaced it with DIVs, but again the DIV part gave me headaches. Still managed to get it working though...crazy combination of DIVs and tables...

Thanks for your help so far Eye :)

Eye for Video

02-19-2010, 07:35 PM

I'm proud of you!!
Once you get going with divs, you'll won't want to go back to tables.
Best wishes,
EfV