Welcome to WebmasterWorld Guest from 54.167.157.247

Forum Moderators: not2easy

Message Too Old, No Replies

Background Problem

   
9:42 pm on May 9, 2008 (gmt 0)

5+ Year Member



Hi There,

Im new to the forum and new to css. I am currently trying to a tabless desgn for my site which has a fair bit of content - roughly 600 pages, so I have quite a bit of work ahead of me.

I have selected a free template I like and set about editing it. All was going well untill I ran into a problem of the background colour running into the main site area as illustrated in the circled area of the picture below.

Not sure which bit of code to post for you really and It looks like links are banned ? It looks like the problem revolves around the right hand column.

Can anyone offer any suggestions on how to cure this irritating problem that seems to appear in firefox

doc type is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

[edited by: SuzyUK at 8:08 am (utc) on May 10, 2008]
[edit reason] please no personal URI's [/edit]

9:45 pm on May 9, 2008 (gmt 0)

5+ Year Member



the css is :

/* MAIN BODY */
/*****************/
body {
font-size: 62.5%;
margin: 0em auto;
padding: 0em;
background-color: #8C8C8C;
font-family: Verdana,Tahoma, Arial,sans-serif;
}

#wrap {
width: 90em;
margin: 0em auto;
background-color: white;
}

#header-section {
width: 90em;
margin: 1em 0em 0em 0em;
}

#header-background {
width: 100%;
height: 100%;
float: left;
border: none;
margin: 0em 0em 0em 0em;
}

#header-background-left {
width: 14.5em;
float: left;
margin: 0em 0em 0em 0em;
padding: 0em 0em 0em 0em;
border: none;
}

#header-background-right {
width: 61.5em;
float: right;
margin: 0em 0em 0em 0em;
padding: 0em 0em 0em 0em;
border: none;
}

#header {
clear: both;
margin: 0em 0em 0em 0em;
border-top: solid 0.1em rgb(175,175,175);
border-bottom: solid 1em white;
background-color: white;
text-transform: uppercase;
line-height: 2.0em;
height: 2.0em;
color: rgb(50,50,50);
}

#middle-column {
float: left;
width: 78.2%;
padding: 0em 0.6em 0em 0.7em;
background-color: white;
color: rgb(100,100,100);
line-height: 1.3em;
font-size: 1.2em;
}

.middle-column-left {
float: left;
width: 47.75%;
}

.middle-column-right {
float: right;
width: 47.75%;
}

#right-column {
float: right;
width: 20%;
background-color: #F7F7F7;
color: rgb(100,100,100);
font-size: 1.1em;
}

#footer {
clear: both;
float: left;
width: 90em;
height: 2.5em;
margin: 0em 0em 1.0em 0em;
padding: 0.25em 0em 0.3em 0em;
border-top: solid 0.1em rgb(150,150,150);
border-bottom: solid 0.1em rgb(150,150,100);
background-color: #000080;
text-align: center;
color: white;
font-size: 1.0em;
}

[edited by: SuzyUK at 8:15 am (utc) on May 10, 2008]
[edit reason] shortened code [/edit]

8:16 am on May 10, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



short description of image for others.. ;)

the right column background does not stretch down to footer, when main content column is longer

8:28 am on May 10, 2008 (gmt 0)

5+ Year Member



Thanks

I'm not to fussed about getting the right hand side background colour exactly right. I would like the wrapper area to appear white and not take on the grey of the background colour If I could stop the grey background colour from spilling into the wrapper then that would be good enough for me. I would have thought that simply adding a background colour white to the #wrap would sort that out but it doesn't.

Very stressed at the moment as I cant get my head around this

8:39 am on May 10, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



background colour white to the #wrap would sort that out but it doesnt.

It should but you also need to make sure that #wrap actually is wrapping and containing your floats (the floated content columns), adding

overflow: auto;
to #wrap should enable you to see if that is the cause.. if it is then you can be happy and if you want to learn then do a search for "containing floats" to see why it's needed and then search for "faux columns" which will show a technique for getting a full column like effect :)

and btw, Welcome to WebmasterWorld!

8:49 am on May 10, 2008 (gmt 0)

5+ Year Member



Suzy that's brilliant. I added the overflow auto an it instantly came right. I had been looking at faux columns but they sort of baffled me. Maybe Ill take another look when my head is clearer, as no doubt I will need to utilise them in the long run.

Thanks again and thanks for the welcome.

Best regards - Glenn

6:38 pm on May 17, 2008 (gmt 0)

5+ Year Member



Hi There,

There seems to be another problem here now. If the right sidebar extends below the main content then the extra content seems to go under the footer and throws everything out of line causing scroll bars to appear top and bottom in IE, whilst in FF all is well

9:31 pm on May 17, 2008 (gmt 0)

5+ Year Member



This is quite hard to explain without posting a link or a picture. The design has 2 columns. 1 for the main content and a narrowerer right colum sidebar used for extra links. At the moment the content in the right sidebar is longer than the main content in the main column. Everything displays well in FF but in IE the right side content stops at the same height as the main content. It appears the height of the right sidebar is being influenced by the height of the main content column.

Hope this is clearer ?

2:03 pm on May 18, 2008 (gmt 0)

5+ Year Member



bump
 

Featured Threads

Hot Threads This Week

Hot Threads This Month