Why is my flash object one pixel off from where I want it to be?

HTML & CSS
1

For some reason I cannot seem to get a flash object to line up on a new site that I am developing. If you look closely at the page you will see that the main flash slide show is just off by a pixel or two, there is a white line on right side and it is off on the left side. I have tried resizing the object as well as many other trials and it just keeps sitting slightly off. Any help would be great.
http://www.influencealife.org

2

No it won’t do anything to #newshead itself because only the object was targeted.


#Newshead [B]object {[/B]

#Newshead will remain where it always was.

I’m not sure either what this is supposed to be?


  <span class="style14">i</span>

It seems a bit strange.

3

Firstly, rather than use <center>, which is out of date, wrap the object in a div and give that div

width: 984px;
margin: 0 auto;

Or you could leave out the div and just apply that to the object itself.

Anyway, I think that main problem is that the sides of you background image are not equal. The dark line on the right is narrower than on the left. You should fix that first.

4

I just tried that and it moved the whole newshead div over instead of just the flash div which is all I am trying to move. I want the newshead stationary but the flashdiv moved over

5

Try something like this:


#Newshead object{margin:auto;display:block;position:relative;left:1px;}
6

I put it inside it’s own div but not just alone part of the problem I guess is I have a shadow border that I made in photoshop that outlines the whole main text frame so I am trying to keep it inside of that photoshop shadow frame so that is why i have my flash div inside of the main body text div. I hope that makes sense.
thanks

7

Hi there tableforglasses,

as ralph.m has pointed out, remove the deprecated center element. :wink:

Then add this to your style sheet…

[color=navy]
object{
    display:block;
    margin:auto;
 }
[/color]

This advice…[indent]Or you could leave out the div and just apply that to the object itself[/indent]
…has also been suggested by ralph.m but should be ignored as it will cause validation errors.

Inline elements must always be contained by block level elements. :wink:

coothead

8

Wrap the <object> in a div of its own, say <div id=“vid-wrap”>, then apply these styles:

#vid-wrap {
  width: 984px;
  margin: 0 auto;
}
9

Huh, I had read that <object> could be used as a block level element, but as you say, it doesn’t validate, so it must be wrong. (I’ve never had <object> not validate, but I guess I’ve always had it contained within a block level element…)

10

Ok so i put it in a div box which definitely works but now it is lining the edge up to the div container that it is within instead of to the center of the div container that it is within which is what I want. I tried adding a margin to the container and tried adding padding but that didn’t seem to work how can I realign that div within the main div? check it out.
http://www.influencealife.org
thanks