Object CSS help please (CSS)

What do I put in my CSS to get the object to space 5px like I would with the pictures. The pictures work fine currently, but I’m unsure what to do with the object in question. It’s a youtube video.

What is needed in the CSS to define the object to space 5px from the text?

My CSS code
.sf_blog_entry img {
clear: both;
margin-right: 5px;
margin-top: 5px;
}

This is what I use for the images.

Example:
www.fithope.com - My posts on the main page. If you look at the 1st vs the 2nd post.

I’m wondering why the css affects the images and not the youtube videos though

Because your code says “img”?


.sf_blog_entry [b]img[/b] {

A video is not an image.

<object id=“whatever” …>stuff inside</object>

#whatever {
styles for the object calling the video with the id of “whatever”;
}

If it’s multiple objects with videos, then they should have a class:

<object class=“something”>…

<object class=“something”>…

.something {
styles for every element with the class of “something”;
}

Actually, you can make the object itself a block. Then you’d be able to style it pretty much as Trilli has with the div.

Objects are like images… they are inline by default, but they look like blocks because they contain referenced content which usually has pixel dimensions (videos, images).

Though this css code:
.sf_blog_entry img {
clear: both;
margin-right: 5px;
margin-top: 5px;
}
looks like an image and not an object. which is it?

However the answer would be the same.

If you have multiple of these things and need them to stack alongside each other, then floating them would work. Now they have block context and you can have the top margins, without sitting underneath each other.

put your object into div and assign margin attributes to that div.

example


<div id="container"><object .....</object></div>

My post might of moved. It was a youtube video actually.

I’m wondering why the css affects the images and not the youtube videos though. What is the difference here? Do I need to make one a video?