Background-position set in Fire Fox

HTML & CSS
21

Still a few issues here.

First, the background gradients need to be reversed - the imgBg.jpg graphic needs to be on the #wrapper while the imgTopBg.jpg graphic should be on the body. As it is now, if the content is higher than the screen the bottom gradient will scroll up with the content.

The inline style on #wrapper style=“height: 100%” needs to be REMOVED - this will prevent the wrapper expanding with content.

The float on #searchPanel .adv needs to be removed, as this causes the height of #searchPanel to collapse and misplaces the #loginPanel div.

You should also get out of the habit of including inline styles like style=“text-align: center” - this belongs in the css file along with the element’s other styles. Inline styles make maintenance more difficult later on.

The #main div is not surrounding the floated columns, and is therefore not able to push the footer down with greater content. Setting the overflow will provide that in modern browsers, but IE6 needs HasLayout triggered - that can be done by setting a width and auto side margins instead of just the percentage margins. It also needs the bottom padding on it to prevent the footer covering any content :

#main
{
 [COLOR="Red"]width: 70%;[/COLOR]
 margin: [COLOR="Red"]0 auto[/COLOR];
 padding: [COLOR="Red"]4px 0 25px[/COLOR];
 [COLOR="Red"]overflow: hidden;[/COLOR]
}

#newMemebersPanel .insideCont also needs overflow:hidden added to ensure that the div surrounds the floated content (which partly hangs out at the moment).

As the login panel contains form elements of a fixed width, a percentage width on the panel causes overlap on smaller screens - I would be more inclined to set the width of this in pixels instead of percent.

22

Thanks for all suggestions, certainly I am going to implement all these things.