Half of image lost to background color

[Aug]

I am trying to finish my mothers website. She hired someone to do this for her and they flaked out. She can't afford to pay anyone else so the burden has fallen to me. Now I am a professional programmer so I thought I could handle CSS with ease. I apparently was wrong. I am attaching a picture to demonstrate the problem.
Here is the css

Code: Select all

body 
{
    position:relative;
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 101%;
    color: #333333;
    width: 800px;
}
#header 
{
    position:relative;
    height: 125px;
    background-color: #28402A;
    color:#FFFFFF;
}
#logo
{
    position:absolute;
    top:-89px;
    left: 5px;
    width: 350px;
    overflow:hidden;
}
#content
{
    position:relative;
    min-height: 550px;
    overflow: auto;
}

#leftContent
{
    text-align:left;
    float:left;
    width: 35%;
        overflow: auto;
}
#leftTitle
{
    text-align:center;
    color:#005EAE;
}

#leftTitle h1
{
    font-size:x-large;
}
#rightContent
{
    float:right;
    text-align: left;
    width: 65%;
        overflow: auto;
}
#rightTitle
{
    text-align:center;
    color:#005EAE;
}
#rightTitle h1
{
    font-size:x-large;
}

#topContent
{
    height: 90px;
}
#footprint
{
    float: right;
    width:400px;
}
#footer 
{
    position:relative;    
    color:#FFFFFF;
    font-size: 0.7em;    
    height: 113px;
    width: 800px;
    background-repeat:repeat;
}
#leftFooter
{
    float: left;
    width: 300px;
    text-align:center;
    vertical-align:middle;
    overflow:hidden;
}
#rightFooter
{
    float: right;
    width: 500px;
}

The css works correctly in IE which is the opposite of what I expected. If I remove the overflow on the content the logo in the left corner appears correctly. But the text bleeds into the footer which doesn't work.

The page in question can be found here: http://sellshomes.us/?page=about . I am far from a css expert (actual I just started to learn this today) so my css may not be flawless. Any help would be appreciated.

A.

[Legacy_Staff]

Only starting with CSS myself, so not the best one to help but, the table midway down on THIS PAGE may help you in the meantime.
If you need more, try HERE.
Hope this helps until one of the CSS guys replies with something better.

[edit: Hope your Mum gets her money back]

[Aug]

I didn't mention this but I can get it to work with tables but I really can't use them. The website is database driven entirely and the website alters the content through 3 seperate css files. So tables makes the css easy but the back end insanely more complex.

[minute44]

Originally Posted by Aug

So tables makes the css easy but the back end insanely more complex.

Hmm, I would ahve thought it would have been the other way around... Oh, well.

Maybe a few more div's than you need, it's over complicating things.. All you need is:

• div for container
• div for header
• div for navigation
• div for content
• div for footer

None of this #footerleft business...

my guess for the reason you're having this overlap problem is it could be a couple of things...

• Check the order in which the elements appear in the CSS as this can have a bearing.
• Check all your positioning, floats, clear attributes. It only takes one to be wrong.

[masonbarge]

The easiest way it to give the graphic a div with a z-index, which I think will work here. Give the graphic a z-index of 1

Code: Select all

{z-index: 1;}

and absolute position. Find out about it on Google if you have any problems with it -- you may have to change some other position types, but I don't think so.

I actually don't see why you'd think it would bleed up into a previous div.

Just a couple of obvious hints. First, make your width smaller -- 800px width won't fit on an 800x600 screen. About 780 is the general limit.

All the absolute and relative positioning is not needed. If you're going to do any more css, you should try doing without it.

[ukgeoff]

The problem relates to the fact that your logo that you are talking about is contained within the divs 'content' and 'topcontent'.

It doesn't matter what you do with the image, you will not see it outside the contraints of the containing div.

Put the image inside its own div, NOT embedded inside any other div, and then you will be able to position it where you want.

Under the circumstance I suggest making it the first div in your layout, use absolute positioning and set the top and left attributes as required.