I have a problem that in my page div background for #wrapper not showing the background color as I specified in css.
Css :
/* CSS Document */
body{
background:url(img/bg_sm_bk.jpg) #000000 repeat-x top center;
color:#999999;
width:1000px;
margin:0px auto;
text-align:center;
}
img{
border:none;
}
#wrapper{
background:#333333;
}
#bookmark{
text-align:right;
padding-right:8%;
}
#site_logo{
background:url(img/bg_full.jpg) center no-repeat;
display:inline-block;
width:100%;
height:149px;
}
.fb_bk:link, .fb_bk:active, .fb_bk:visited{
background:url(img/facebook.jpg) center no-repeat;
display:inline-block;
text-decoration:none;
width:27px;
height:20px;
padding:14px 5px 0 5px;
vertical-align:middle;
border:none;
}
.fb_bk:hover{
background:url(img/facebook_hover.jpg) center no-repeat;
display:inline-block;
text-decoration:none;
width:27px;
height:20px;
padding:14px 5px 0 5px;
vertical-align:middle;
border:none;
}
.tw_bk:link, .tw_bk:active, .tw_bk:visited{
background:url(img/twitter.jpg) center no-repeat;
display:inline-block;
text-decoration:none;
width:27px;
height:20px;
padding:14px 5px 0 5px;
vertical-align:middle;
border:none;
}
.tw_bk:hover{
background:url(img/twitter_hover.jpg) center no-repeat;
display:inline-block;
text-decoration:none;
width:27px;
height:20px;
padding:14px 5px 0 5px;
vertical-align:middle;
border:none;
}
.in_bk:link, .in_bk:active, .in_bk:visited{
background:url(img/linkedin.jpg) center no-repeat;
display:inline-block;
text-decoration:none;
width:27px;
height:20px;
padding:14px 5px 0 5px;
vertical-align:middle;
border:none;
}
.in_bk:hover{
background:url(img/linkedin_hover.jpg) center no-repeat;
display:inline-block;
text-decoration:none;
width:27px;
height:20px;
padding:14px 5px 0 5px;
vertical-align:middle;
border:none;
}
.navlink:link, .navlink:visited, .navlink:active{
line-height:19px;
font-size:15px;
padding-top:6px;
display:inline-block;
text-align:center;
width:100px;
height:25px;
text-decoration:none;
color:#999999;
border-left:#333333 1px solid;
border-right:#333333 1px solid;
}
.navlink:hover{
background:url(img/lbgbh.jpg) right repeat-x;
line-height:19px;
font-size:15px;
padding-top:6px;
display:inline-block;
text-align:center;
width:100px;
height:25px;
text-decoration:none;
color:#000000;
border-left:#333333 1px solid;
border-right:#333333 1px solid;
}
#left_bar{
float:left;
width:25%;
text-align:justify;
}
#right_bar{
float:right;
width:75%;
text-align:justify;
}
.bolds{
font-weight:bold;
}
.navlinks{
background:url(img/lbgb.jpg) repeat-x;
border-bottom:#000000 1px solid;
}
.testi_img{
vertical-align:middle;
padding:15px 0 12px 0;
text-align:right;
border:none;
}
.float_body{
margin:50px 0 0 0;
padding:10px 0 0 15%;
}
.float_body2{
margin:50px 0 0 0;
padding:10px 5% 0 5%;
}
#footer{
height:31px;
line-height:19px;
padding:6px 0 0 0;
}
My HTML :
<body>
<div id="bookmark">
<span style="vertical-align:middle; padding:0 2px 0 0;">Share this @</span>
<a class="fb_bk" title="Share on facebook" href="http://www.facebook.com/sharer.php?u=http://localhost/Sitede/&t=Royal Arts and Decoration - Face makeup, Hairstyles, Marrigae makeup, Office decoration, Party decoration, Hall Decoration"></a>
<a class="tw_bk" title="Post to twitter" href="http://twitter.com/home?status=Currently reading http://localhost/Sitede/"></a>
<a class="in_bk" title="Bookmark at linkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url=http://localhost/Sitede/&title=Royal Arts and Decoration - Face makeup, Hairstyles, Marrigae makeup, Office decoration, Party decoration, Hall Decoration&summary=At Royal Arts and Decors we do running a beauty parlour to provide many types of makeups such as Face makeup, Jadai Hairstyles, Kondai Hairstyles, Character Makeup and Mehndi. We also decorate your office as well as home for parties like birthday party, anniversary and also we decorate marriage and reception halls.&source=http://localhost"></a>
</div>
<div id="site_logo">
<div style="text-align:right; padding:0 5px 0 0;">
<img title="Call us" src="img/help.jpg" height="70" width="134" alt="call" />
</div>
</div>
<div class="navlinks">
<a class="navlink" title="Home" href="http://localhost">Home</a><a class="navlink" title="Services we provide" href="http://localhost/services.html">Services</a><a class="navlink" title="About RAAD" href="http://localhost/about_us.html">About us</a><a class="navlink" title="Contact us" href="http://localhost/contact_us.html">Contact us</a><a class="navlink" title="Client Testimonials" href="http://localhost/testimonials.html">Testimonials</a>
</div>
<div id="wrapper">
<div id="left_bar">
<div class="float_body">
<span style="font-weight:bold; height:22px; display:block; border-bottom:#999999 1px solid; margin-bottom:6px;">
<img style="vertical-align:text-top; padding:0 3px 0 0;" src="img/users.jpg" height="16" width="21" alt="user" /> Client Reviews :</span>
<span style="font-weight:bold;">
Kumar S</span><span >Thank you.</span>
<div class="testi_img">
<a style="padding:0 5px 0 0;" href="http://localhost/testimonials.html" title="View all Reviews"><img src="img/readall.jpg" width="80" height="25" alt="Add" /></a>
<a href="http://localhost/contact_us.html" title="Add Testimonial"><img src="img/addreview.jpg" width="80" height="25" alt="Add" /></a></div>
</div>
</div>
</div>
<div id="right_bar">
<div class="float_body2">
<div style="font-size:22px;">Welcome to Royal</div>
<img align="right" src="img/des1.jpg" style="padding:0 10px 10px 15px;" alt="Image" width="290" height="220" />
<div style="height:15px;"> </div>
We are glad to welcome you.
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">
© 2011. All Rights reserved
</div>
</body>
Please help me :(
