background not repeating for main content in firefox, chrome, safari, opera etc
Posted: 25 December 2010 04:44 PM   [ Ignore ]
Newbie
Rank
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
 
 
Posted: 26 December 2010 02:46 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
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',
                  
rpp10,
                  
interval6000,
                  
width250,
                  
height500,
                  
theme{
                    shell
{
                      background
'#0f4b84',
                      
color'#ffffff'
                    
},
                    
tweets{
                      background
'#e3e3e3',
                      
color'#000000',
                      
links'#125391'
                    
}
                  }
,
                  
features{
                    scrollbar
false,
                    
loopfalse,
                    
livefalse,
                    
hashtagstrue,
                    
timestamptrue,
                    
avatarsfalse,
                    
behavior'all'
                  
}
                }
).render().setUser('***********').start();
            
            </
div>
        </
div>
        <
div id="footer"></div>
    </
div>
    
</
body
Profile
 
 
Posted: 26 December 2010 11:54 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  2
Joined  2010-12-26

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

Profile
 
 
Posted: 27 December 2010 01:09 AM   [ Ignore ]   [ # 3 ]
Newbie
Rank
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
 
 
Posted: 27 December 2010 03:06 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
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',
                      
rpp10,
                      
interval6000,
                      
width250,
                      
height500,
                      
theme{
                        shell
{
                          background
'#0f4b84',
                          
color'#ffffff'
                        
},
                        
tweets{
                          background
'#e3e3e3',
                          
color'#000000',
                          
links'#125391'
                        
}
                      }
,
                      
features{
                        scrollbar
false,
                        
loopfalse,
                        
livefalse,
                        
hashtagstrue,
                        
timestamptrue,
                        
avatarsfalse,
                        
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