CSS Centered in FF, Safari... not in IE

tequilamala · #1 July 1st, 2008, 05:35 PM

I'm having trouble centering an image and a embedded video... Its centered on Safari and FF... but for some reason IE is being annoying... heres the code:

Expand|Select|Wrap|Line Numbers

  
<head>
 
<style type="text/css">
 
body {

       text-align:center;

       background-color: black;

        }
 
#container {

    margin: 0 auto;   

    text-align: left; 

    position:absolute; 

    width:100%; 

    margin-left: auto;
 
 }

</style>
 
</head>
 
<body>
 
<DIV id="container">

<DIV style="position: absolute; top:0px; left:0px; width:00px; height:0px;">

    <table>

      <tr>

           <td><img src="entirepage3.jpg" alt="About Us Pic" name="aboutus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<div style="position: absolute; top:290px; left:300px; width:0px; height:0px;">

    <table>

      <tr>

        <td><object><param name="allowfullscreen" value="true" >

<param name="allowscriptaccess" value="always" >

<param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=890103&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1">

<embed src="http://www.vimeo.com/moogaloop.swf?clip_id=890103&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1"

 type="application/x-shockwave-flash" 

allowfullscreen="true" allowscriptaccess="always" width="400" height="240">

</embed>

</object>

        </td>

      </tr>

    </table>

  </DIV>

</DIV>

</body>

tequilamala · #2 July 1st, 2008, 06:44 PM

i think i figured it out... let me know if there's any bugs.... here it is

Expand|Select|Wrap|Line Numbers

 <html>

<head>
 
<style type="text/css">
 
body {

       text-align:center;

       background-color: black;

        }
 
#container {

    margin: 0 auto;   /* align for good browsers */

    text-align: left; /* counter the body center */

    position:relative; 

    width:1009px; 

    height:800px;

    margin-left: auto;

    margin-right: auto;

 }
 
</style>
 
</head>

<body>
 
<DIV id="container" class="container>

<DIV style="position: absolute; top:0px; left:0px; width:00px; height:0px;">

    <table>

      <tr>

           <td><img src="entirepage3.jpg" alt="About Us Pic" name="aboutus">
 
        </td>

      </tr>

    </table>

  </DIV>
 
<div style="position: absolute; top:290px; left:300px; width:0px; height:0px;">

    <table>

      <tr>

        <td><object><param name="allowfullscreen" value="true" >

<param name="allowscriptaccess" value="always" >

<param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=890103&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1">

<embed src="http://www.vimeo.com/moogaloop.swf?clip_id=890103&amp;server=www.vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1"

 type="application/x-shockwave-flash" 

allowfullscreen="true" allowscriptaccess="always" width="400" height="240">

</embed>

</object>

        </td>

      </tr>

    </table>

  </DIV>

</DIV>
 
</body>
 
</html>

CSS Centered in FF, Safari... not in IE

Popular Articles

What is Bytes?