close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

2 css issues

Thread began 5/29/2009 4:15 pm by CraigR | Last modified 7/10/2009 2:31 am by CraigR | 2832 views | 6 replies |

CraigRBeta Tester

2 css issues

I am having 2 little css problems.

1. I have a fixed footer layout, but the page content sometimes disappears behind the footer, (both FF and IE7).
I am using a spry collapsible panel in both cases.
On the home page it seems OK and the footer moves down when the panel expands
On the gallery page (choose suffolk), the text in the panel goes behind the footer.

2. To display 4 images across the screen, i have a left floated div in a repeat region.
The spacing is nice in FF but in IE the space between the image and the text is bigger, so I get overlap problems.

test site url is as follows... www.gallery.stonepits.com

Sign in to reply to this post

Justin Nemeth

1) I noticed you have a top margin applied to the body tag, this is forcing the fixed footer to be moved down and causing a scrollbar to appear. I would recommend having no margins for the body tag to have a properly working fixed footer.

As for the spry panel, trying adding some bottom margin so the content stays above the footer.

2) In your #imagebox css, instead of specifying a height: 150px, remove that and instead try overflow: hidden;

Sign in to reply to this post

CraigRBeta Tester

great.

point 1 helps, the spry panel works better with a 30px bottom margin, and i took the top margin off the body as you suggested.

on point 2, i tried your suggestions, but the ie gap remains significantly bigger than ff.

Sign in to reply to this post

CraigRBeta Tester

nearly done..

the gap between the image and the add to cart button is due to how IE formats the form in which the 'add to cart' button is placed.

i put the form in its own div and set the css so that it was spaced like other forms on the site and the IE padding is fixed.

just one thing i noticed, the scroll bar isn't present in FF, but it is there in IE, even though it doesn't seem to be needed as the page heights seem the same.

Sign in to reply to this post

Justin Nemeth

You can always "zero" out the form css as well which should make IE behave better. A general rule like:

form {
margin: 0;
padding: 0;
}
Sign in to reply to this post

CraigRBeta Tester

Thanks justin.

I am still having some issues with the fixed footer. In FF, the scrollbar fails to appear (sometimes) when it should, hence the content disappearing behind the footer.

Sign in to reply to this post

CraigRBeta Tester

back again !...

Just re-visiting this issue.

On several pages on this test site, i have a collapsible panel, which, when expanded, pushes the content behind the fixed footer.

my 'quick & dirty' fix is to put some empty tags at the bottom of the content, which seems to stop the content from disappearing, but there has to be a 'proper' solution.

examples include..

contact.php
sitemap.html

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