Solved

Border around Flash Object Not showing

Posted on 2004-08-23
9
841 Views
Last Modified: 2011-10-03
Ive embedded a flash movie into my html as follows:

<object id="flash1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="160" height="198">
        <param name="movie" value="images/welcome.swf">
        <param name="quality" value="high">
        <embed src="images/welcome.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="198"></embed></object>

Ive then created a style in css which is id="flash1" as follows:

#flash1 { border-top: 0.1em solid #FF66CC;
            border-left: 0.1em solid #FF66CC;
}

The actual cell where this goes has a css style to:

.corner {height: 200px;
             text-align: right;
             vertical-align: bottom;
}

In IE6 and even opera 5 the flash objects butts up with the corner of the table. But in Mozilla and Netscape the flash object is raised by one pixel from the bottom of the cell and the border does not appear at all ? Ive tried making the border even bigger but to no avail !!

Any help would be nice. thanks.
0
Comment
Question by:Eternal_Student
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 11

Expert Comment

by:neester
ID: 11869017
Maybe if you put it inside a DIV.
And border that DIV....


shorthand code would be:

<div style="border: 1px solid #000; padding: 5px;">
--FLASHCODE--
</div>
0
 
LVL 11

Expert Comment

by:neester
ID: 11869019
btw padding is optional - i just added it for some spacing....
0
 
LVL 18

Author Comment

by:Eternal_Student
ID: 11869065
The thing is I dont really care if the border doesn't show up on the browsers I mentioned above, but I just want the flash object to be vertically aligned to the bottom of the cell, but for some reason its not ?
0
 
LVL 1

Expert Comment

by:Ehsun
ID: 11869080
You should set a one-cell table and set its border-collapse property to COLLAPSE and then set the border you want to that cell, You can't set a CSS style for a <embed> tag.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 18

Author Comment

by:Eternal_Student
ID: 11869761
ahh that is why i am having problems then !!

thanks Ehsun
0
 
LVL 11

Expert Comment

by:neester
ID: 11869923
Awww so its not the border - its the 1px spacing?

Try removing the MARGIN on everything you can...

Try on the embed and the cell....
Remove CELLPADDING and set the STYLE="padding: 0;"

thats probably all you can do now!
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 30 total points
ID: 11872577
Chances are the issue you're seeing is caused by the default font size applied to the object.
You can remove it just by adjusting it's display by applying CSS to the embed tag, as an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

body
{
      margin: 0;
      padding: 0;
}

#flash
{
      border-top: 4px solid #FF66CC;
      border-left: 4px solid #FF66CC;
}

.corner
{
      text-align: right;
      vertical-align: bottom;
}

</style>
</head>
<body>

<table cellpadding="0" cellspacing="0">
      <tr>
            <td class="corner" 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="160" height="198">
            <param name="movie" value="images/welcome.swf">
            <param name="quality" value="high">
            <embed style="display:block;" src="images/welcome.swf" quality="high"
            pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="198"></embed>
            </object></td>
      </tr>
</table>

</body>
</html>

Thanks,
Sean
0
 
LVL 5

Expert Comment

by:pmsyyz
ID: 11883609
First off, read http://www.alistapart.com/articles/flashsatay/

Bug 236089: <embed>, <object> does not draw CSS borders when embedding plugin
http://bugzilla.mozilla.org/show_bug.cgi?id=236089

So wrapping a div around your flash object is probably the best solution.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11883901
I think we covered that, but thanks for the bug link :-)

Part of the problem is likely because of the default line-hiehgt, and hence the need for this:
<embed style="display:block;" .....
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Printing a Google Form 2 25
CSS Position not returning 2 48
manage footer size 4 12
push logos in footer up higher 5 12
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now