Swf animation object within a html table...weird things happen!

HTML & CSS
,
1

Hi guys
I’ve got a really weird problem while trying to fit a swf animation object within a html table.
So I’m a bit of a beginner, and have improvized a table to structure a website menu, and an animation within the framework of a html table.
Here’s the code with the animation working perfectly, but it’s not resizeable because of the absolute swf object dimensions:

<table width="100%" height="100%" border="0" align="left">
  <tr>
    <th><table border="0" height="100%" border="1" align="left">
               <th align="left"><a href="http://www.rentavillainfrance.com/index.html" style="text-decoration: none">Home<font size="2"><br>&nbsp;</font></a></th>
               <tr></tr>
               <th align="left"><a href="http://www.rentavillainfrance.com/contact.html" style="text-decoration: none">About<br>&nbsp;</a></th>
               <tr></tr>
               <th align="left"><a href="http://www.rentavillainfrance.com/thumbs.htm" style="text-decoration: none">Gallery<br>&nbsp;</a></th>
               <tr></tr>
               <th align="left"><a href="http://www.rentavillainfrance.com/contact.html" style="text-decoration: none">The&nbsp;Aude&nbsp;Area<br>&nbsp;</a></th>
               <tr></tr>
               <th align="left"><a href="http://www.ownersdirect.co.uk/availability.asp?property_id=119983" style="text-decoration: none">Availability<br>&nbsp;</a></th>
               <tr></tr>
               <th align="left"><a href="http://www.ownersdirect.co.uk/accommodation/p8119983?src=LS#contact" style="text-decoration: none">Bookings<br>&nbsp;</a></th>
               <tr></tr>
               <th align="left"><a href="http://www.ownersdirect.co.uk/accommodation/p8119983#rates" style="text-decoration: none">Pricing<br>&nbsp;</a></th>
               <tr></tr>
               <th align="left"><a href="http://www.rentavillainfrance.com/contact.html" style="text-decoration: none">Contact<br>&nbsp;</a></th>
               <tr></tr>
               <th align="left"><a href="https://www.facebook.com/villadeflleur" style="text-decoration: none"><font size="3">Facebook</a><br><a href="http://www.rentavillainfrance.com/index.html" style="text-decoration: none">Google+&nbsp;</a></th>
               <tr></tr>                     
               <th align="left"><font size="2">© 2014 Nick Cartwright</font></th>           
</table>
<th><embed align="left" width="1185" height="630" src="http:www.rentavillainfrance.com/slideshow8.swf"></th>
</table>

NowI’ve tried giving it % dimensions and weird things happen like the flash object is either squished small or it’s in some other part of the table that doesnt, or shouldnt, exist…

2

You won’t find too many people who take tableware for framing a page and flash animation very seriously these days. I don’t. Try this and see how it feels. Notice the <doctype>, html and head sections. No warranty or guarantee of satisfaction implied.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inimbrium 3</title>
    <style>
html,body {
    padding:0;
    margin:0;
}
.outer {
    display:table;
    width:100%;
    max-width:1185px;
    height:100%;
    margin:0 auto;
}
.tcell {
    display:table-cell;
    vertical-align:middle;
    text-align:left;
}
.tcell:first-of-type {
    vertical-align:top;
    width:8%;
}
.tcell > div {
    width:100%;
    padding-top:53%;
    position:relative;
}
embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;  /* 1185px */
    height:100%;  /* 630px */
}
ul {
    list-style:none;
    display:table;
    height:100%;
    padding:0;
    margin:0;
}
li {
    display:table-row;
}
li > div {
    display:table-cell;
    height:10%;
    vertical-align:middle;
    padding-right:20px;
}
.copy {
    font-size:.85em;
}
a {
    font-weight:bold;
    text-decoration:none;
}
    </style>
</head>

<body>
<div class="outer">
    <div class="tcell">
        <ul>
            <li><div><a href="http://www.rentavillainfrance.com/index.html">Home</a></div></li>
            <li><div><a href="http://www.rentavillainfrance.com/contact.html">About</a></div></li>
            <li><div><a href="http://www.rentavillainfrance.com/thumbs.htm">Gallery</a></div></li>
            <li><div><a href="http://www.rentavillainfrance.com/contact.html">The&nbsp;Aude&nbsp;Area</a></div></li>
            <li><div><a href="http://www.ownersdirect.co.uk/availability.asp?property_id=119983">Availability</a></div></li>
            <li><div><a href="http://www.ownersdirect.co.uk/accommodation/p8119983?src=LS#contact">Bookings</a></div></li>
            <li><div><a href="http://www.ownersdirect.co.uk/accommodation/p8119983#rates">Pricing</a></div></li>
            <li><div><a href="http://www.rentavillainfrance.com/contact.html">Contact</a></div></li>
            <li><div><a href="https://www.facebook.com/villadeflleur">Facebook</a><br><a href="http://www.rentavillainfrance.com/index.html">Google+</a></div></li>
            <li><div class="copy">© 2014 Nick Cartwright</div></li>
        </ul>
    </div>
    <div class="tcell">
        <div><embed src="http://www.rentavillainfrance.com/slideshow8.swf"></div>
    </div>
</div>
</body>
</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.