homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Background Problem
glennk




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

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]

 

glennk




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

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]

SuzyUK




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

short description of image for others.. ;)

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

glennk




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

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

SuzyUK




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

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!

glennk




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

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

glennk




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

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

glennk




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

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 ?

glennk




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

bump

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved