Background and borders

[Guest]

Hi all,

 

I have some issues that I'm hoping someone could help me with. I wanted to add some margin for the whole page, so in the stylesheet.css file under BODY, I amended the margin to 100px. Then I wanted to add a border surrounding it, so I added the code border: 2px solid #a0a0a0. The whole BODY code looks like this:

 

BODY {

background: #ffffff;

color: #000000;

margin: 100px;

border: 2px solid #a0a0a0;

}

 

I have two questions. First, the border appears just fine when I browse the site using Firefox. However, on Internet Explorer (version 7), it doesn't. Any idea why?

Secondly, as I have now added a border, you can imagine that the main content of the page is sort of inside a huge box right. How do I change the background colour of the whitespace outside the box? If I change the value of "background: #ffffff", it changes the colour of the whole background (inside and outside the border).

 

Thanks heaps in advance :)

[h2oHOH]

Use html tag for background styles outside the body tag, borders only work on block level elements in ie7, You can try this ie hack

 

html {
background-color: #009; /* change to your color*/
}
body {
background: #ffffff;
color: #000000;
margin: 100px;
border: 2px solid #a0a0a0;
}

/* IE 6, IE 7 and 8 hack- */
body #ie6andie7andie8{
  	 display:block\9;
}

[Guest]

Use html tag for background styles outside the body tag, borders only work on block level elements in ie7, You can try this ie hack

 

Cool hey thanks so much. I've managed to get the background going, but IE7 is still not showing the border (and now also the new background colour outside the border), even after the hack. Firefox shows everything perfectly.

 

Any ideas?

 

Thanks again.

[h2oHOH]

Give this a try:

html {
background-color: #009; /* change to your color*/
}
body {
background-color: #ffffff;
color: #000000;
margin: 100px;
border: 2px solid #a0a0a0;
}

/*IE 6 and IE 7 */
#ie6andie7 {
 *display: block;
}

/* IE 8 only */
body #ie8{
display:block\9;
*display: none; /*overrule for ie6 and ie7 which also read this rule*/
}

 

Note: change to body style- "background-color" ....Also refresh browser

[Guest]

Hi Sean,

 

Sorry to relive this, been busy and haven't got around to doing some of the stuff. Anyways, I tried your code but it didn't work for some reason.

 

What have I done wrong?

 

Thanks.

[Guest]

Could anyone help with this at all? Let me know if you want the link to view it using both Firefox and IE.

 

Thanks heaps.

[h2oHOH]

Those hacks are not very reliable, and I can see don't work for osC site...

 

I'm not sure what you're trying to do with that 100px margin? But if you're using to show a background color behind the site then there's a better way, but you'll have to lose the flexible width and go with a fixed width, which helps keep the site design from breaking when the window is enlarged.

 

In  /catalog/includes/header.php - below this code

 if ($messageStack->size('header') > 0) {
echo $messageStack->output('header');
 }
?>

add this opening div tag

<div class="wrapper">

***************************************************

In catalog/includes/footer.php - just below the closing php tag

?>

add a closing div tag

</div>

 

Trash that html style, delete the existing Body styles, and add these styles to calaog/stylesheet.css,

BODY {
text-align: center;
background-color: #006; /*This is your background color */
color: #000000;
width: 1024px;  /* fixed width change to 770px if concerned about older monitors */
margin-top: 10px; /*places the top alignment of page */
margin-right: auto; /*centers in mid screen */
margin-bottom: 5px; /*puts space at bottom of page */
margin-left: auto; /*centers in mid screen */
}
/* -------wrapper div hack to replicate body styles for ie*--------/
.wrapper {
width: 1024px;  /* fixed width change to 770px if concerned about older monitors */
border: 2px solid #a0a0a0;
background: #ffffff; /*This is your background color */
color: #000000; 
margin-top: 10px; /*places the top alignment of web  */
margin-right: auto; /*centers in mid screen */
margin-bottom: 5px;  /*puts space at bottom of page */
margin-left: auto; /*centers  in mid screen */
text-align: left;
}

 

Body styles are all thats needed for FF and Safari, but you have to duplicate the body styles in the wrapper div so ie will follow the w3 rules... Border on the div is all that's needed for all

[Guest]

Works like a treat! Awesome, thank you sooooo much for this, Sean :)

 

I think the 100px margin referred to the top margin (which I've changed since then).

 

Thanks again!