CSS Drive forums | background not repeating for main content in firefox, chrome, safari, opera etc

background not repeating for main content in firefox, chrome, safari, opera etc

Posted: 25 December 2010 04:44 PM

[ Ignore ]

Newbie

Total Posts: 7

Joined 2010-11-22

Hi there my website is working fine in internet explorer changed a few things to try and get it working for firefox, chrome, safari, opera etc but i cant get the main content working my css for the relate part is

#content {
    background:url(../img/contentbg.png);
    background-repeat:repeat-y;
    width:900;
    height:auto;
}
#sidebar {
    width:260px;
    float:right;
    text-align:left;
    padding-top:18px;
    padding-right:100px;
}
#main {
    width:435px;
    float:left;
    text-align:left;
    padding-top:18px;
    padding-left:100px;
}
.mainpagetitle {
    background:url(../img/mainhead2.png);
    height:20px;
    width:425px;
    padding-top:4px;
    padding-left:5px;
}
.mainpagetop {
    background:url(../img/maintop2.png);
    width:430;
    height:6px;
    margin-bottom:0px;
    margin-top:2px;
}
.mainpagebg {
    background:url(../img/mainbg.png);
    width:425px;
    padding-left:5px;
}
.mainpagebottom {
    background:url(../img/mainbottom.png);
    background-repeat:no-repeat;
    height:12px;
    width:430px;
} 

but im not sure what is wrong it is hosted here.

Any help would be great,

Thanks,

Blink359

Profile

blink359

Posted: 26 December 2010 02:46 PM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 7

Joined 2010-11-22

Heres the HTML if it helps

<body>
    <div id="container">
        <div id="header"></div>
        <div id="logo"><a href="index.html"><img src="img/logo.png"></a></div>
        <div id="navbar"></div>
        <div id="navbarlinks"><a href="index.html" id="homebtn"><img src="img/home.png"></a> <a href="#" id="ourmusicbtn"><img src="img/ourmusic.png"></a> <a href="index.html" id="aboutusbtn"><img src="img/aboutus.png"></a> <a href="index.html" id="loginbtn"><img src="img/login.png"></a> <a href="index.html" id="contactusbtn"><img src="img/contactus.png"></a></div>
        <div id="speakers"></div>
        <div id="content">
            <div id="main">
                <div class="mainpagetitle"><h1>Home Page</h1></div>
                <div class="mainpagetop"></div>
                <div class="mainpagebg">This is a test This is a test This is a test This is a test This is a test This is a test This is a test <br>This is a test This is a test This is a test This is a test This is a test This is a test This is a test <br>This is a test This is a test This is a test This is a test This is a test This is a test This is a test <br></div>
                <div class="mainpagebottom"></div>
            </div>

            <div id="sidebar">
                
                
                new TWTR.Widget({
                  version: 2,
                  type: 'profile',
                  rpp: 10,
                  interval: 6000,
                  width: 250,
                  height: 500,
                  theme: {
                    shell: {
                      background: '#0f4b84',
                      color: '#ffffff'
                    },
                    tweets: {
                      background: '#e3e3e3',
                      color: '#000000',
                      links: '#125391'
                    }
                  },
                  features: {
                    scrollbar: false,
                    loop: false,
                    live: false,
                    hashtags: true,
                    timestamp: true,
                    avatars: false,
                    behavior: 'all'
                  }
                }).render().setUser('***********').start();
            
            </div>
        </div>
        <div id="footer"></div>
    </div>
    
</body> 

Profile

TerranceP

Posted: 26 December 2010 11:54 PM

[ Ignore ] [ # 2 ]

Newbie

Total Posts: 2

Joined 2010-12-26

Blink, did you ever get it figured out? I’m having the exact same problem.

Profile

blink359

Posted: 27 December 2010 01:09 AM

[ Ignore ] [ # 3 ]

Newbie

Total Posts: 7

Joined 2010-11-22

Im in the middle of solving it now, I have found that you need to have content in the part that has the background in this case my #content so i cant have #main and #sidebar inside i need on of the two inside the #content which means i have a little reworking to do but i should be able to deal with it

Profile

blink359

Posted: 27 December 2010 03:06 PM

[ Ignore ] [ # 4 ]

Newbie

Total Posts: 7

Joined 2010-11-22

I got it working after redoing the code from scratch it took me around 15 minutes as i had worked most of it out from writing it before i will post the code so you can compare with the old code and see what has changed if you are having the same problem
HTML

<html>
<head>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/cstyle.css" />
<!--[if lt IE 8]><link rel="stylesheet"  href="css/reset.css"/><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet"  href="css/style.css"/><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet"  href="css/reset.css"/><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet"  href="css/style.css"/><![endif]-->
    <title>Lakewood Music - Home</title>
</head>
<body>

    <div id="container">
    <div id="speakers"></div>
        <div id="logo"><a href="index.html"><img src="img/logo.png"></a></div>
        <div id="header"></div>
        <div id="navbar"></div>
        <div id="content">
            <div class="mainctit"><h1>Home Page</h1></div>
            <div class="mainctop"></div>
            <div class="maincmain">This is test home page This is test home page This is test home page This is test home page This is test home page This is test home page This is test home page</div>
            <div class="maincbot"></div>

            <div class="mainctit"><h1>News 1</h1></div>
            <div class="mainctop"></div>
            <div class="maincmain">This is test home page This is test home page This is test home page This is test home page This is test home page This is test home page This is test home page</div>
            <div class="maincbot"></div>

            <div class="mainctit"><h1>News 2</h1></div>
            <div class="mainctop"></div>
            <div class="maincmain">This is test home page This is test home page This is test home page This is test home page This is test home page This is test home page This is test home page</div>
            <div class="maincbot"></div>

            <div class="mainctit"><h1>News 3</h1></div>
            <div class="mainctop"></div>
            <div class="maincmain">This is test home page This is test home page This is test home page This is test home page This is test home page This is test home page This is test home page</div>
            <div class="maincbot"></div>

                <div id="sidebar">
                    
                    
                    new TWTR.Widget({
                      version: 2,
                      type: 'profile',
                      rpp: 10,
                      interval: 6000,
                      width: 250,
                      height: 500,
                      theme: {
                        shell: {
                          background: '#0f4b84',
                          color: '#ffffff'
                        },
                        tweets: {
                          background: '#e3e3e3',
                          color: '#000000',
                          links: '#125391'
                        }
                      },
                      features: {
                        scrollbar: false,
                        loop: false,
                        live: false,
                        hashtags: true,
                        timestamp: true,
                        avatars: false,
                        behavior: 'all'
                      }
                    }).render().setUser('L*************d').start();
                
            </div>
        </div>
        <div id="footer"></div>
        <div id="copyright">Copyright © Lakewood Music 2011</div>
    </div>
</body>
</html> 

CSS:

body {
    background-color:#bcbcbc;
    padding-top:15px;
    
}
#container{
    width:900px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
}
#speakers {
    background:url(../img/speakers.png);
    width:900px;
    height:249;
    margin-left:auto;
    margin-right:auto;
    position:absolute;
    top:-10;
    z-index:2;
}
#header{
    background:url(../img/header.png);
    width:720;
    height:180;
    margin-left:auto;
    margin-right:auto;
}
#logo{
    width:266;
    height:87;
    position:absolute;
    left:103;
    top:6;
    z-index:20;
}
#navbar{
    background:url(../img/navbar.png);
    width:800;
    height:40;
    margin-left:auto;
    margin-right:auto;
}
#content{
    background:url(../img/contentbg.png);
    width:900;
    background-repeat:repeat-y;
    text-align:left;
    padding-top:15px;
    padding-left:100px;
}
#footer{
    background:url(../img/footer.png);
    width:900;
    height:62;
}
#sidebar {
    width:260;
    float:right;
    position:absolute;
    top:235;
    z-index:5;
    left:540;
}
#copyright {
    font-size:12px;
    text-align:center;
}
.mainctit{
    background:url(../img/ctit.png);
    background-repeat:no-repeat;
    width:430;
    height:24;
    padding-left:8px;
    padding-top:4px;
}
.mainctop{
    background:url(../img/ctop.png);
    background-repeat:no-repeat;
    width:430;
    height:12;

}
.maincmain{
    background:url(../img/cmain.png);
    width:430;
    background-repeat:repeat-y;
    padding-left:5px;
}
.maincbot{
    background:url(../img/cbott.png);
    background-repeat:no-repeat;
    width:430;
    height:12;
} 

Hope this helps someone,

Blink359

Profile

‹‹ One of the hottest teams in the NFL SōL® Marketplace | Solar Solutions for a Mobile World. ››