Positioning flash file via CSS...HELLLLP!

1

Having some major issues with a CSS file and flash positioning. I’m a bit of a noob when it comes to using DIV positioning (i’ve been using tables for years and finally decided to join the 21st century).

I took this page over from a previous author so I’ve had to retrofit the code to make it work. The problem is - the flash navigation bar on top should be about 10 pixels to the left and up a little bit…how can i reposition it?

here’s the url in question: http://clairvoyancydesign.com/beta/theory/about.php

here’s how it’s supposed to be positioned: http://clairvoyancydesign.com/theory/about.php

Here’s the code for the flash div:


<div id="bionav">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="300" height="76" id="bionav">
        <param name="allowScriptAccess" value="sameDomain" />    
        <param name="movie" value="/theory/about_us.swf" />
    <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <embed src="about_us.swf" quality="high" bgcolor="#ffffff" width="300" height="76" name="about_us" align="left" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
</div><!-- end bionav -->

…And here’s the code for the CSS file in question:


#theory #one {margin: 0; padding: 0 0 0 148px; width: 332px;}
#lw #content {background: transparent url(/i/about_lw.gif) 42px 100% no-repeat;}
#lw #one {background: none;}
#cp #content {background: transparent url(/i/about_cp.gif) 42px 100% no-repeat;}
#cp #one {background: none;}
#sw #content {background: transparent url(/i/about_sw.gif) 42px 100% no-repeat;}
#sw #one {background: none;}
#jl #content {background: transparent url(/i/about_jl.gif) 42px 100% no-repeat;}
#jl #one {background: none;}
#bionav {position: absolute; left:50px; top:50px float: left; width=300px; height=76px;}

The left and top values on “bionav” are meaningless, i was just trying to type in some extreme values and see what happened.

I’m on a bit of a time crunch here…i’d be eternally grateful if someone could enlighten me.

thanks!

2 
#bionav {position: absolute; left:50px; top:50px float: left; width=300px; height=76px;}

First:
width=300px; should be width: 300px;
height=76px; should be height: 76px;

Have you tried removing padding or margins from around the element? Or parent elements?

Just looking at the code I see that the flash file is located in a div with id bionav, which is a child of the div with id header which in turn is inside the div with id wrapper (lots of IDs being used there… wow).

Anyway, bionav doesn’t appear to have the margins/paddings stripped from it (set to 0) so that would be a place to start. If not, move on to the header. Its margins are set to 0, but has a padding-top of 33px. SO you may be able to remove a bit from there if needed.

Just keep in mind if you remove padding and/margins from the parent element of bionav (in other words header or wrapper) then it will effect the other children so you may have to adjust those as well.

3

I’ll give it a shot. Thanks for the heads up on the width and height thing - didn’t even notice.

Funny thing - the positioning just decided to start working again for a few revisions, then it stopped again. wonder if it’s something to do with the ISP/browser?