Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Problem with CSS - Some help please?

Thread began 2/06/2012 9:31 am by arturo.civit | Last modified 2/07/2012 12:41 pm by arturo.civit | 831 views | 4 replies |

arturo.civit

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

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

arturo.civit

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.-

Sign in to reply to this post

Jason ByrnesWebAssist

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,

Sign in to reply to this post

arturo.civit

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!!

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...