Problem with CSS - Some help please?

Hi there, well, I'm trying to learn CSS and all that stuff, so, still a newbie, I'm working on a website with, I think, a very basic layout, but one thing is not working as it should be, for example, if you go here:

detalle-de-peliculas-bluray.php?ID=14

Behind the embed video you'll see a blu bar, or at least part of it, that's the footer, you can see the footer here:*contactos.php

The question is, why it is appearing like that in the page with the video? I tried everything and still appearing there, so, not really sure what's going on.

If someone can help me or send me a signal of what I'm doing wrong that would be highly appreciated.

Thanks so much!

Arturo

when trying to troubleshoot css issues, use FireFox and FireBug.

FireBug is a very easy to use extension for FireFox that allows you to explore the document model in the browser and see the css effecting each part an interact with it in real time.


the div that contains the movie has the following style:

#VideoPreview {
clear: both;
height: 148px;
margin-bottom: 5px;
margin-top: 50px;
width: 964px;
}


you are specifically setting the height of the video preview element to 148px. However, the video is in an iframe that is given the height of 493px. no overflow has been set, so the page is using the 148px height for the video element, this is used for positioning the footer, then video is overflowing and covering the footer.

change the height of the video preview element to 493px









NOTE: in your css file, it is defined twice, the first time as:
#VideoPreview {
width: 970px;
margin-top: 15px;
margin-bottom: 15px;
float: right;

}

the second one over rides the first.

Thanks a lot Jason, thanks so much, you were right about that, I named a box in the home page like a box in the preview area, what I did now is change the name of the preview box area for the home page, that fixed the problem in the detail page - thanks again!! - however, that sent me anther error, those 3 boxes on home page, now are not working properly, they have a margin top that is not being reflected, this is the CSS for the first box:

#PrevisualizationBluRay {
width: 964px;
height: 148px;
margin-top: 50px;
margin-bottom: 5px;
clear: both;
}

And this is the HTML of that box:

<div id="BoxGames">
<div id="PrevisualizationXbox">
<table border="0">
CONTENTS HERE
</table>
</div>

But not working, not sure now what I did wrong, basically is not rendering the margin top, on dreamweaver is there but once uploaded is not, any idea? here's the page:

index.php

Thanks a lot!

A.-

i need more details, i don't se the problem (not really sure what to be looking for).


send a screen shot showing what it should look like for comparison,

Hi Jason, sorry, my bad, it is fixed right now, I was just mixing a few properties there but now works, thanks so much for your help!!