PDA

View Full Version : Stubborn flash object won't align to top of table cell



Kai2810
Feb 14th, 2010, 09:10 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">
<!--
. {
padding:0px;
margin:0px;
}
.style21 {
font-size: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
body {
background-color: #FF9A00;
}
.style37 {
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
.style44 {color: #FF9A00}
.style20 {color: #000000}
.style31 {font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
.style8 { color: #E87800;
margin-bottom: 4px;
margin-top: 3px;
}
.style34 {color: #535353}
.style15 {
color: #B51C00;
font-size: 11px;
line-height: 11px;
font-family: Tahoma;
font-weight: bold;
}
.style27 {color: #FFFFFF; font-size: 12px; }
.style40 {font-size: 12px}
.style45 {font-size: 6px}

.style46 {color: #282828}
.style47 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style49 {
color: #000000;
font-size: 11px;
font-family: Tahoma;
}
.style54 {color: #000000; font-weight: bold; }

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

-->
</style>
</head>

<body>
<table style="width:100%" border="0" cellspacing="0" cellpadding="0" align="center">
<!--Start of header section-->
<tr style="background-color:#4b4b4b;">
<td valign="top" style="height:100%;background-image: url(images/l.gif); background-repeat: repeat-x;width:50%;"></td><!--Left side of header section-->
<td style="background-color:#6F0; height:215px;width:766px; vertical-align:top;padding:0px; margin:0px; border:none;" valign="top"><!--Center of header section-->
<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><!--Right side of header section-->
</tr>

jfreak53
Feb 14th, 2010, 10:06 PM
I have had that problem before on many flash top banners. It has more to do with the DIV after it than itself I'm pretty sure since a lot of my pages never have that problem, then once in a grand while I find one that gives me problems. In this case this is the only DIV so the table around it might be messing with it. The only way I found to fix it is either one of two things. One either make the background the color you want or image then make the flash object transparent, using "wmode:transparent". In your case you already have that, but then you have a background image in the flash movie. I would remove the background image and require flash 9 to play, that way it's always transparent and you never have to worry about it being positioned perfect, except for your menu bar.

Another quick fix would be to use "margin:-1px;" or -2. It works great actually, I have used it before when I had to use a background and had no choice. The problem is that sometimes IE doesn't render it the same way and sometimes it will go too high up. But this would also work.

You might want to get rid of your position parameter as well since if you have no DIVs in the site but this one it's really not needed, it will position off of the Table element. I would really suggest removing all table elements and going with straight DIV positioning since you already have "xhtml1-transitional" it should work better and render mostly the same in most browsers. Just a thought though.

I would also try putting margin 0 in your flash div and not just the table div, this is because the div might be at the top of the table item and might not be able to go more, so make table -1 then div 0 and see if that moves it right or not. The problem is that your styling everything then you leave the DIV to chance basically with hardly any parameters and then you put a position tag in, asking for trouble. If your going to use position tags you need to use the rest of them too to actually tell it where to position it at or it get's lost you could say.

Kai2810
Feb 15th, 2010, 03:14 AM
hi jfreak,

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?

jfreak53
Feb 15th, 2010, 02:12 PM
Glad to hear it worked. The problem is probably this line:


<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% height=100%></embed>

You changed the initial width and height but you never changed the embed width and height, they both have to be the same for it to work, if not your just filling the table at it's width and height. Better to make it an exact number anyways than to leave that to the browser, can't trust browsers to know what they are doing.

You can also try giving a width and height to the div itself if that doesn't work, make them all the same. But start with the flash embed line then go from there.

Kai2810
Feb 16th, 2010, 07:34 AM
hey jfreak,

I tried your suggestions, setting the height and width to both the embed tag and the div tag, still doesn't work.

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 my current code.

<body>
<table style="width:100%" border="0" cellspacing="0" cellpadding="0" align="center">
<!--Start of header section-->
<tr style="background-color:#4b4b4b;">
<td valign="top" style="height:100%;background-image: url(images/l.gif); background-repeat: repeat-x;width:50%;"></td><!--Left side of header section-->
<td style="height:216px;width:766px; vertical-align:top;padding:0px; margin:0px; border:none; background-color:#000;" valign="top"><!--Center of header section-->
<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><!--Right side of header section-->
</tr>

jfreak53
Feb 16th, 2010, 02:17 PM
Yes I actually had to do it on my own computer to get it to work the way it was supposed to. Two problems, one you cannot use 100% with flash. In the embed tag you need to be specific with your width and height. Actually to be honest using transitional XHTML1 you shouldn't be using percentages anyways but since you must fill the whole screen that's fine. Sometimes IE8 breaks, I've had that problem with a couple pages for a couple weeks now.

Also you didn't have a background image in the TD for the flash, this is a major problem. So basically you were resizing the flash object and that was working, but it was just showing the black background behind it instead of the image since you didn't have the image filling everything, this is why DIV positioning is so important instead of using tables. With DIVS you could have filled the whole thing with one image instead of 50% on each side then you place the flash in a DIV on top. But that is just my suggestion, never user Tables, always div positioning.

This is the code you need to place in your page:


<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"><!--Center of header section-->
<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>

Replace everything around the flash object and also the flash object, FROM TD TO TD. This code works, I've tested many times.

You will notice that I added the background image to it. This is because it needs this, because your flash has to be smaller than your TD, so this way no matter what happens with your flash there will always be a background.

Also I added the width and height to the embed with pixels instead of percent. This is for what I said earlier plus if you will notice this way your menu does not come above the black bar like it did in your demo.

I would suggest removing the orange and black bar from your flash entirely, the images, then just run it transparent like you currently have it, otherwise you will always have position problems.

Kai2810
Feb 16th, 2010, 03:54 PM
THANK YOU jfreak, it work nicely. :D

I think one of my mistakes is setting the width and height for the <embed> tag in quotes...

Two different images were used for the left and right site becos the flash animation is having two different patterns tapering off at the sides. It's subtle, but the difference is there.

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.

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

jfreak53
Feb 16th, 2010, 04:58 PM
I understand, hey you work with what you got right. Glad it worked out for you and we could solve your problem.

Kai2810
Feb 18th, 2010, 02:15 AM
Hi jfreak,

Thanks for your help so far, but I have run into yet another problem.

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?

jfreak53
Feb 18th, 2010, 08:18 PM
I think it has to do with how each browser works differently. To be honest I've been having major problems with IE8 and my CSS lately, IE8 is just a mess.

What is the setting for that line? Where is it that it set's the actual height at for it?

Kai2810
Feb 19th, 2010, 12:54 AM
The height of the top banner should be 216px in height, with that grey edge 1px in height and the flash menu (with the l.jpg and r.jpg) 215px.

It is becos in firefox the table cells themselves are taking up space?

BTW, that grey bar is residing in the <tr> tag as the background colour.


<table style="width:100%" border="0" cellspacing="0" cellpadding="0" align="center">
<!--Start of header section-->
<tr style="background-color:#4b4b4b;"><!--Grey background colour for edge softening-->
<td valign="top" style="height:215px;background-image: url(images/l.gif); background-repeat: repeat-x;width:50%;"></td><!--Left side of header section-->
<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"><!--Center of header section-->
<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><!--Right side of header section-->
</tr>

Kai2810
Feb 19th, 2010, 07:31 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!

jfreak53
Feb 19th, 2010, 03:52 PM
Ohhhhh, I didn't take the time to look at the TR and notice the color. It could be as simple as the fact that your TR isn't sized for height. Try adding a height function to that TR and see how it reacts. Short of that I think there is just a problem between two browsers and the way they show tables. I would go DIVS.

Kai2810
Feb 19th, 2010, 03:57 PM
hey jfreak!

I managed to solve it...i hope! Not sure if I did it the right way though.
Spent the entire afternoon on it. :eek:

www.thienkaiwei.com/index4.html (http://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. Managed to find one example...but what do you think of the code?

Crazy combination of DIVs and tables...

jfreak53
Feb 19th, 2010, 10:59 PM
Good deal! You could have spent longer trying to figure it out with tables to be honest. Looks pretty good from where I'm sitting. One thing though, on the two divs, left and right, the class="left column" and the other one for right, I suggest doing it without the spaces, use underscores or dashes, spaces could cause problems.

Also try it out in a couple different browsers, IE8 or 6, firefox, chrome and opera. Just to make sure, when you mix tables and divs that way you sometimes, not all the time, but sometimes run into problem if they run into each other. I spent the whole afternoon myself with that problem, a div inside another div next to a paragraph, it was a mess. So just do yourself the favor and do the testing.

But it looks good from where I'm sitting, good job.

Kai2810
Feb 20th, 2010, 01:34 AM
Alright! :thumbsup:

Thanks jfreak, you have been a GREAT help for this.

BTW, those spaces for the column CSS? They are seperate CSS styles...each div is referring to two seperate CSS styles.

Hope sometime in the future i'll run into your problems around here and give hand. ;)

Have a great weekend! :)

Kai2810
Feb 22nd, 2010, 06:19 AM
Another prob!! LOL one thing after another.

this is the screenshot of the site using IE7...the black bar supposed to run across the entire screen, the gif files on the left and right side of the flash menu are not loaded!

http://www.thienkaiwei.com/images/Picture1.jpg

Any ideas why this happens in IE7? it loads fine in IE8 and Firefox 3.5...

I'm suspecting it may be the DIV codes and the way IE7 interprets them.


#flashheader {
width: 766px;
height: 216px;
margin-left: auto;
margin-right: auto;
background-image:url(images/l.gif);
background-repeat:repeat-x;
overflow:auto;
position:relative;
z-index:1;
overflow:visible;
}

.headercolumn {
width: 50%;
position: absolute;
top: 0;
}

.left {left: 0;}
.right {right: 0;}

#leftcol {
margin-right: 200px;
height: 216px;
width:inherit;
background-color:#4d4d4d;
float:left;
background-image:url(images/l.gif);
background-repeat:repeat-x;
}

#rightcol {
margin-left: 200px;
height: 216px;
width:inherit;
background-color:#4d4d4d;
float:right;
background-image:url(images/r.gif);
background-repeat:repeat-x;
}

</style>
</head>

<body>
<!--Start of header section-->
<div id="flashheader">
<div style="position:absolute; top:-2px;">
<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>
</div>

<div class="left headercolumn">
<div id="leftcol"></div>
</div>

<div class="right headercolumn">
<div id="rightcol"></div>
</div>
<!--End of header section-->

Update:
I just checked out a list of IE issues from Smashing Magazine (nice site BTW), and suspect the INHERIT line for #leftcol and #rightcol is the culprit since it's stated to be not supported in IE7.

However i changed the INHERIT line for both #rightcol and #leftcol to width:40%, but it still doesn't work. Any suggestions?

jfreak53
Feb 22nd, 2010, 03:25 PM
Oooohhhh yeah, IE problems ha ha. Well unfortunately you have found every web designers problem now adays, IE7 and IE8 display a lot of web content very differently, so now not only do we have to keep IE7 code in our pages but we also have to code for IE8 separately as well. First suggestion, make your site always IE7 by using this at the top of your page:


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Then make it WORK in IE7 and IE8 will run in compatibility mode. Which basically means it renders pages as IE7 did. So you don't have to keep two separate codes for each browser, dumb Microcrap ha ha.

Now since I don't have IE7 anymore, I can't test it. I was forced to upgrade to IE8 for problems I've been having in that browser, had to have a way to test it.

I would fair to say your problem is two things. Since your now using DIVS you have to position them, for one don't use inherit, use the exact width in percents. Just to test and play put 100% in there and see if it covers the screen.

Also you might have to put in position in your CSS for each DIV. I'm not positive though since I would have to play with it to make sure and I can't, no IE7. I would suggest running it with static that way you can position it to the left and right of each side of the flash and it will never move. But like I said I would have to play.

Try something else real quick, remove your flash object and see if the DIVS are underneath it? This will help you decern what is going on. Chances are they are not positioned and you just need a left and right parameter. But remove flash real quick and see if they are beneath it. This will shed some more light on this problem.

What you might have to end up doing is having code in your page to load a different CSS file if IE7 is being used than firefox. If so I will post the code to do this, it's not hard. But it might come down to that, don't know for sure. We have to test some things first.

Kai2810
Feb 22nd, 2010, 06:55 PM
Dumb Microcrap indeed, in this case! argh...

Anyway, I removed the flash DIV part, and no, the left and right DIVs are positioned correctly.

Here's a screenshot with the Flash DIV removed.
http://www.thienkaiwei.com/images/picture2.jpg

Here's a screenshot with the Flash DIV in place.
http://www.thienkaiwei.com/images/picture3.jpg

Trying out the positioning for the Flash DIV...
This problem reminded me why I decided to abandon DIVs and stick with tables...haha

BTW, the red banner at the bottom is screwed up too. It's supposed to stick to the bottom of the page regardless of any vertical scrolling done, and the text inside should be positioned in the middle...need to take a look at this too.
#@(*$)!(*&$)(!*@&

jfreak53
Feb 22nd, 2010, 09:26 PM
That's funny, so basically with the flash there, NO DIVS. Without flash, DIVS. hmmmm

What is the link to this page, still index2?

I will have a look with another PC that I might still have IE7 on and see what I can find.

Kai2810
Feb 23rd, 2010, 03:12 AM
Nope...it's no longer the case, after using your meta tag code.

Now, the left and right DIVs are positioned correctly. It's just that the flash DIV is not positioned correctly. It's stuck on the left side of the browser window.

I'm still trying the get it positioned correctly. I just realized for the #flashheader CSS code, the POSITION:RELATIVE must remain for the z-index to work. And apparently, setting the MARGIN-LEFT and MARGIN-RIGHT to auto no longer sets the flash DIV block in the middle.

www.thienkaiwei.com/index5.html (http://www.thienkaiwei.com/index5.html)

BTW, viewing it in IE8 gives the same result as IE7. I just tested on another system with IE7.

jfreak53
Feb 23rd, 2010, 01:43 PM
Ok, well then in that case your almost home. Now you have conformity across browsers. I would suggest leaving the emulate in. Now just position your DIV conformed to the two previous divs. I will test in IE8 and see what I see ha ha.

Kai2810
Feb 23rd, 2010, 02:08 PM
well, haha that's where I'm stuck at.

The left and right divs are using POSITION:ABSOLUTE to get them to stick to the left and right side of the screen.

Then for the flash DIV i have to set it to POSITION:RELATIVE for me to use the z-index, or else the left and right DIVs will overlap it. Now, according to definition POSITION:RELATIVE is supposed to positioned relative to its parent container, which in this case should be <html>.

Then in this case, margin-left:auto plus margin-right:auto should work, but it is not working...

I cannot set position:absolute for the flash DIV as it will cause the content table directly below to go all the way to the top of the screen, and appear similar to the screenshot earlier.

And I am using this DIV arrangement in particular becos it will automatically shrink the left and right DIVs automatically when the browser window is minimised in width. The other 3-column CSS layouts I have looked up will get the central column to collapse instead, which is not what my client wants.

This is where I got the format from.
http://uxte.com/test/3col_test.html

Any ideas on how to resolve this?

Kai2810
Feb 25th, 2010, 01:10 PM
Hi, I managed to get it working.

Instead of having to code to comply with IE6 and IE7, i found a FANTASTIC piece of code written by a genius.

http://code.google.com/p/ie7-js/

It makes IE6 and IE7 to behave like a IE8 browser!

3 lines of code from here, and it worked for me. :thumbsup: