SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: div bg question

  1. #1
    SitePoint Zealot WebFreakz's Avatar
    Join Date
    Dec 2006
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div bg question

    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.

    Code:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It seems to be working in Firefox and Safari. I haven't tested the various IEs, though.

  3. #3
    SitePoint Zealot WebFreakz's Avatar
    Join Date
    Dec 2006
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot WebFreakz's Avatar
    Join Date
    Dec 2006
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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. #6
    SitePoint Zealot WebFreakz's Avatar
    Join Date
    Dec 2006
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •