Css body bg image question

Can someone tell me if there is any possible way I can set a 828 wide bg image for the body bg centered so when a viewer has their monitor set to anything wider then 828 the image stays centered and I specify a bg color for the rest of the page?

Ok i figured it out. Now a new problem my main table lines up perfectly in IE6 but in firefox the table is offset to the right about 5-10px. Also my top and bottom margin is not working in either browser. Can anyone look at my code and tell me how I can get this to work with all browsers? Thanks

my html code is as follows


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
        <head>

        <title>Help Fight Cancer</title>


<!-- CSS Stylesheet -->
        <link rel="stylesheet" type="text/css" href="style1.css">
<!-- / CSS Stylesheet -->

</head>
<body id="body">

<!-- start_table_1 -->
<table class="table_1" width="800" height="100%" align="center">
        <tr>
                <td width="780" height="500">
                 test
                </td>
                        </tr>
        </table>
<!-- /end_table1 -->
</body>
</html>

here is my css code for the body

/*body_settings*/
html, body {
height: 100%;
width: 100%;
padding:0;
margin: 20px 0px 20px 0px;
font: 23px Times New Roman; color: #000000;
background:#1E1E28 url('images/body_bg.jpg') repeat-y center;
border-width:0px;
border-color:064097;
border-style:solid;
scrollbar-face-color:#1E1E28;
scrollbar-highlight-color:#262631;
scrollbar-3dlight-color:#3B3541;
scrollbar-shadow-color:#3B3541;
scrollbar-darkshadow-color:#536068;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#000000;
}

#body {
height: 100%;
width: 100%;
padding:0;
margin: 20px 0px 20px 0px;
font: 23px Times New Roman; color: #000000;
background:#1E1E28 url('images/body_bg.jpg') repeat-y center;
border-width:0px;
border-color:064097;
border-style:solid;
scrollbar-face-color:#1E1E28;
scrollbar-highlight-color:#262631;
scrollbar-3dlight-color:#3B3541;
scrollbar-shadow-color:#3B3541;
scrollbar-darkshadow-color:#536068;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#000000;
}

/*table_1_settings*/
table.table_1 {
        position: relative; left: 0px; top: 0px;
        border-width: 1px;
        border-spacing: 0px;
        padding: 0px;
        border-style: solid;
        border-color:#536068;
        border-collapse: separate;
        background-color: transparent;
}
table.table_1 th {
        border-width: 0px;
        padding: 0px;
        border-style: inset;
        border-color: #536068;
        background-color: transparent;
}
table.table_1 td {
        border-width: 0px;
        padding: 0px;
        border-style: inset;
        border-color: #536068;
        background-color: transparent;
        font-family: "Times New Roman";
        text-decoration: none;
        color: #ffffff;
        font-size:13px;
        letter-spacing:normal;
        font-style:none;
        font-weight:none;
}

Oddly enough i found a quick fix. I added a 1px top and bottom margin and it automatically fixed itself and now is perfectly centered in firefox.

Hi,

Don’t use that doctype as it makes all versions of IE party like its 1999. :slight_smile: It makes IE9 and under behave much like IE5 and you lose any improvements made in the last ten years.

These days you should use a strict doctype and not use tables for layout. (You must also remember to use units on your dimensions as they will treated as zero in a strict doctype.)

You can’t really use height 100% and then add margins and borders to it or it will be too big (see css faq on 100% height). Also scrollbar colouring should be avoided at all costs and is only partially supported in some browsers and is of course invalid.

Don’t duplicate rules on the html and body elements as that is a waste and also prone to errors.

In valid CSS/html I would do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/*body_settings*/
html, body {
    height: 100%;
    width: 100%;
    padding:0;
    margin:0;
    min-width:828px;
}
#body {
    font: 23px Times New Roman;
    color: #000;
    background:#1E1E28 url('images/body_bg.jpg') repeat-y center;
}
#outer {
    width:800px;
    margin:20px auto 20px;
    min-height:95%;
    border:1px solid #536068;
    color: #ffffff;
    font-size:13px;
}
* html #outer {
    height:95%
}
.inner {
    width:780px;
    margin:auto;
}
</style>
</head>
<body id="body">
<div id="outer">
    <div class="inner">test</div>
</div>
</body>
</html>


Hope that helps :slight_smile: