Half of image lost to background color

Aug · #1 Jun 15th, 2006, 11:47

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 · #2 Jun 15th, 2006, 11:57

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 · #3 Jun 15th, 2006, 12:02

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 · #4 Jun 15th, 2006, 13:26

Quote:

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 · #5 Jun 15th, 2006, 15:29

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 · #6 Jun 15th, 2006, 16:35

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
background color in xml	kool77	Other Programming Languages	2	Jul 7th, 2007 16:30
background-color	kapyrossi	Web Page Design	5	Jul 4th, 2007 16:53
chnaging the background color	DavidinLondon	Web Page Design	0	May 20th, 2006 20:37
background color	kaz	Web Page Design	4	Aug 4th, 2005 18:28
background color	kaz	Web Page Design	1	Apr 20th, 2005 12:43

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Half of image lost to background color