View Full Version : Tables to CSS convert, but FF not showing backgrounds halfway through

12-24-2005, 08:51 PM
I've converted the page from tables to CSS, but still have a couple problems. Firefox did a better job of displaying the CSS at the start. After I reached the bottom things went south. IE is showing the page as intended, mostly. Firefox & Safari are both losing the formatting for the bottom div. It should be 50 pixels high & have a background image.

The next two elements are meant to show over the top of the page. Thus the loss of 50 pixels causes them to show up to high. Also, one of them is not displaying its background image.

Any help or advice would be greatly appreciated.

The page: http://test.saber.net

12-24-2005, 10:08 PM
Add clear:both; to the CSS for your bottombar. This fixes the background problem but causes another. You made your flash box position:relative; and put a large negative top value on it. When relatively positioned the space that the div originally took will still be there. Put your flash and login stuff in the logo bar rather than at the bottom of your layout. You can then lose the relative positioning and that space goes away.

12-25-2005, 12:56 AM
Thank you _Aerospace_Eng_

That has helped.

The bottom bar now appears properly. Placing the other two elements inside the logo bar div put them in the ballpark & makes more logical sense.

With left & right floats all that remained was to get them to hang over the edges of their parent.

Negative margins did the trick for Firefox. IE doesn't seem to like them, though.


At least it's closer

12-25-2005, 01:17 AM
Make their parent position:relative; then use absolue positioning to get an overlapping effect, you might need to play with z-indexes.

div#logo-bar {
width: 995px;
height: 155px;
border-top: 1px solid #2c8dc2;
background: #3fbaf5 url(images/logo-background.jpg) repeat-y;
div#flash-box {
width: 400px;
height: 200px;
float: left;
top: -22px;
background-color: black;
div#login-window {
width: 350px;
height: 110px;
float: right;
top: 70px;
background: url(images/login-box.gif) no-repeat;
/* padding elements from overlapping the rounded edges */
padding: 10px;

12-25-2005, 02:03 AM
That's done it. While I tried putting in z-index previously, I didn't set the absolute positions.

Set that way, margins do the trick. No need for the floats anymore.

IE still had an issue. It was punting the input box way off to the right. Attaching the style to the form, instead of the div fixed it. I figured this made the div superfluous. Oddly, IE disagreed. As soon as I removed the extra div it punted the input box again.

Now it actually looks ready to start putting some content into.

Thanks, you've been a great help.

12-25-2005, 02:07 AM
You might want to set the margins on your body to 0

body {
background-color: #FFFFFF;