Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    grg
    grg is offline
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tables to CSS convert, but FF not showing backgrounds halfway through

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #3
    grg
    grg is offline
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Progress

    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.

    *sigh*

    At least it's closer

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Make their parent position:relative; then use absolue positioning to get an overlapping effect, you might need to play with z-indexes.
    Code:
    div#logo-bar {
    	width: 995px;
    	height: 155px;
    	border-top: 1px solid #2c8dc2;
    	background: #3fbaf5 url(images/logo-background.jpg) repeat-y;
    position:relative;
    z-index:0;
    }
    div#flash-box {
    	width: 400px;
    	height: 200px;
    	float: left;
            position:absolute;
            left:20px;
    	top: -22px;
    	background-color: black;
    z-index:1;
    }
    div#login-window {
    	width: 350px;
    	height: 110px;
    	float: right;
            position:absolute;
    	top: 70px;
            right:0;
    	background: url(images/login-box.gif) no-repeat;
    	/* padding elements from overlapping the rounded edges */
    	padding: 10px;
    z-index:1;
    }
    Last edited by _Aerospace_Eng_; 12-25-2005 at 01:20 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    grg
    grg is offline
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Success

    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You might want to set the margins on your body to 0
    Code:
    body {
    	background-color: #FFFFFF;
            margin:0;
            padding:0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •