Div bg question

HTML & CSS
1

Ok I am going to include my style sheet.
I am trying to create a gradient background for my main text bg. Here is my style sheet but it doesn’t work. Funny thing is it works for my body background.

Look at #main_text that is where I am using the gradient filters for the browsers.

<style type="text/css">
<!--

/*body_style*/
html, body {
height: 100%;
margin:126px 0px 50px 0px;
/* For any browser that can't create a gradient  */
/*background: #273E68;*/
/*//mozilla*/
background: -moz-linear-gradient(top, #273E68, #2F4D82);
/* Chrome/Safari     */
background: -webkit-gradient(linear,  left top, left bottom, from(#273E68), to(#2F4D82));
/*IE 6/7 */
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#273E68', EndColorStr='#2F4D82', GradientType=0);
/*IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#273E68, endColorstr=#2F4D82)";
border-width:0px;
border-color:064097;
border-style:solid;
scrollbar-face-color:#273E68;
scrollbar-highlight-color:#336699;
scrollbar-3dlight-color:#2E4C7E;
scrollbar-shadow-color:#2E4C7E;
scrollbar-darkshadow-color:#FFE2EA;
scrollbar-arrow-color:#273E68;
scrollbar-track-color:#141950;
}

#body {
height: 100%;
margin:126px 0px 50px 0px;
/* For any browser that can't create a gradient  */
background: #273E68;
/*//mozilla*/
background: -moz-linear-gradient(top, #273E68, #2F4D82);
/* Chrome/Safari     */
background: -webkit-gradient(linear,  left top, left bottom, from(#273E68), to(#2F4D82));
/*IE 6/7 */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#273E68', EndColorStr='#2F4D82', GradientType=0);
/*IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#273E68, endColorstr=#2F4D82)";
border-width:0px;
border-color:064097;
border-style:solid;
scrollbar-face-color:#2E4C7E;
scrollbar-highlight-color:#336699;
scrollbar-3dlight-color:#336699;
scrollbar-shadow-color:#336699;
scrollbar-darkshadow-color:#273E68;
scrollbar-arrow-color:#F67710;
scrollbar-track-color:#273E68;
}

/*set_Concursico_font*/
@font-face {
    font-family: "Concursico Mono BTN";
    src: url(/fonts/Concmonb.ttf);
}
.Concursico Mono BTN {
    font-family: "Concursico Mono BTN";
    font-size: 44px;
    text-decoration: none;
    color: #ffffff;
}

/*set_Sans_Serif_font*/
@font-face {
    font-family: "MS Reference Sans Serif";
    src: url(/fonts/REFSAN.TTF);
}
.MS Reference Sans Serif {
    font-family: "MS Reference Sans Serif";
    font-size: 44px;
    text-decoration: none;
    color: #ffffff;
}

a {font-family:Times New Roman, tahoma, verdana; font-size:14px; color:#F67710; text-decoration:none}
a:hover {text-decoration:none; font-style:none; font-weight:none; color:#F78E39;}

a.navi_text {font-family:verdana; font-size:09px; color:#F67710; text-decoration:none}
a.navi_text:hover {text-decoration:none; font-style:none; font-weight:none; color:#F78E39;}

/*set_table_1*/
table.main {
        border-width: 1px;
        border-spacing: 0px;
        padding: 0px;
        border-style: solid;
        border-color:#336699;
        border-collapse: separate;
        background-color:#2E4C7E;
}
table.main th {
        border-width: 0px;
        padding: 0px;
        border-style: inset;
        border-color: 3376D2;
        background-color: none;
}
table.main td {
        border-width: 0px;
        padding: 0px;
        border-style: inset;
        border-color: 3376D2;
        background-color: none;
}

/*header_div*/
#logo_div {
        position: relative; left: 0px; top: 0px;
        width:100%; height:100%;
        border-width: 0px;
        padding: 0px;
        border-style: solid;
        border-color: transparent;
        background-color: transparent;
        }


#navi_bg {
        position: absolute; left: 2px; top: 2px;
        width:99.6%; height:60px; z-index:1;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#home_pic {
        position: absolute; left: 13px; top: 03px;
        width:52px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#home_text {
        position: absolute; left: 22px; top: 46px;
        width:39px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#about_pic {
        position: absolute; left: 92px; top: 03px;
        width:58px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#about_text {
        position: absolute; left: 92px; top: 46px;
        width:60px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#services_pic {
        position: absolute; left: 184px; top: 03px;
        width:49px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#services_text {
        position: absolute; left: 180px; top: 46px;
        width:60px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#demo_pic {
        position: absolute; left: 280px; top: 03px;
        width:49px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#demo_text {
        position: absolute; left: 270px; top: 46px;
        width:80px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#downloads_pic {
        position: absolute; left: 385px; top: 03px;
        width:39px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#downloads_text {
        position: absolute; left: 369px; top: 46px;
        width:60px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#login_pic {
        position: absolute; left: 480px; top: 03px;
        width:48px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#login_text {
        position: absolute; left: 463px; top: 46px;
        width:84px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#faqs_pic {
        position: absolute; left: 580px; top: 03px;
        width:47px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#faqs_text {
        position: absolute; left: 570px; top: 46px;
        width:65px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#contact_pic {
        position: absolute; left: 672px; top: 03px;
        width:47px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#contact_text {
        position: absolute; left: 660px; top: 46px;
        width:75px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#tagged_pic {
        position: absolute; left: 765px; top: 03px;
        width:49px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#tagged_text {
        position: absolute; left: 759px; top: 46px;
        width:50px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#myspace_pic {
        position: absolute; left: 847px; top: 03px;
        width:37px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#myspace_text {
        position: absolute; left: 839px; top: 46px;
        width:65px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#facebook_pic {
        position: absolute; left: 935px; top: 03px;
        width:26px; height:43px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: #284071;
        }
#facebook_text {
        position: absolute; left: 921px; top: 46px;
        width:65px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: #000000;
        background-color: #284071;
        }
#page_arrows {
        position: absolute; left: 10px; top: 75px;
        width:10px; height:10px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: transparent;
        }
#main_seperator {
        position: absolute; left: 5px; top: 90px;
        width:676px; height:2px; z-index:2;
        border-width: 0px
        border-style: solid;
        border-color: transparent;
        background-color: transparent;
        }
#main_text {
        position: absolute; left: 5px; top: 94px;
        width:676px; height:500px;
        /* For any browser that can't create a gradient  */
        background: #2E4C7E;
        /*//mozilla*/
        background: -moz-linear-gradient(top, #2F4D82, #273E68);
        /* Chrome/Safari     */
        background: -webkit-gradient(linear,  left top, left bottom, from(#2F4D82), to(#273E68));
        /*IE 6/7 */
        filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2F4D82', EndColorStr='#273E68', GradientType=0);
        /*IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2F4D82, endColorstr=#273E68)";
        border-width: 0px;
        }

.pic_no_border
{
        background-color: transparent;
        color: transparent;
        border: 0px;
}

/*navi_alpha_filter*/
.navi font {visibility:hidden;}
.navi img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}
.navi:hover img {filter:alpha(opacity=50); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;}

</style>
2

It seems to be working in Firefox and Safari. I haven’t tested the various IEs, though. :confused:

3

hey ralph. it isn’t working in my version of firefox at all or ie8… I am stumped. I thought my code was correct. I am confused why it works in yours and not mine??? lol

4

Ralph I just updated my version of firefox to the latest and it nows works in firefox but still no luck with ie8. Do you run any ie browser?

5

I just tested it in IE8 and it worked there too. So the issue may be with how all the other page elements are interacting with this element. Perhaps you should post your HTML too.

6

I got it working in ie8 now too. Very odd all I did was refresh the page and now it works. Thanks Ralph just needed to update my firefox. lol