I design a website layout CMS based, the problem here is i don't understand why my background image(shadow image) is not showing when i float the div to none, the image will only show when the div is float to left.
below is a tiny part of my css code,
#wrapper {
width: 1030px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/shadow.jpg);
background-repeat: repeat-y;
float: none;
}
#contentwrap {
width: 990px;
margin-left: auto;
margin-right: auto;
}
the image is located in the wrapper div, it's actually to create a drop shadow effect for the content.
p/s: my other images work perfectly fine, the browser that i use to test the layout are firefox, chrome, ie, safari, and opera.
EDIT: Linux, i've already tried with the quotation and without the quotation...it's still not working...for some reason idk why the image only shows when the div is floated to left.
Lightnote, here is the code...a bit long there sorry..
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#navigation {
width: 990px;
height: 65px;
margin-left: auto;
margin-right: auto;
background-color: #000;
}
#header {
width: 100%;
height: 300px;
background-color: #F00;
}
#wrapper {
width: 1030px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/shadow.jpg);
background-repeat: repeat-y;
}
#contentwrap {
width: 990px;
margin-left: auto;
margin-right: auto;
}
.box {
width: 300px;
height: 200px;
float: left;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
background-image: url(../images/box.png);
}
#content {
width: 550px;
height: 1000px;
background-color: #ccc;
float: left;
margin-left: 15px;
margin-right: 15px;
}
#right {
width: 380px;
height: 1000px;
background-color: #00F;
float: left;
margin-left: 15px;
margin-right: 15px;
}
here is the footer...and if you notice all of the css codes does not implement any shorthand...ive changed everything to the very basic to avoid anything that might contribute to the problem.
#footer {
width: 100%;
height: 300px;
margin-top: 1230px;
background-color: #09F;
}
EDIT
Lightnote, hey..i fixed it, by giving the div id="wrapper" a height to cover all the divs inside the wrapper...and thx for the link, i used firebug to view the css source...and btw..all the divs has their own height instead of giving it 100% or none because im trying to imitate one of the theme i saw in Rocketheme for joomla.thx again btw and all others too...
below is a tiny part of my css code,
#wrapper {
width: 1030px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/shadow.jpg);
background-repeat: repeat-y;
float: none;
}
#contentwrap {
width: 990px;
margin-left: auto;
margin-right: auto;
}
the image is located in the wrapper div, it's actually to create a drop shadow effect for the content.
p/s: my other images work perfectly fine, the browser that i use to test the layout are firefox, chrome, ie, safari, and opera.
EDIT: Linux, i've already tried with the quotation and without the quotation...it's still not working...for some reason idk why the image only shows when the div is floated to left.
Lightnote, here is the code...a bit long there sorry..
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#navigation {
width: 990px;
height: 65px;
margin-left: auto;
margin-right: auto;
background-color: #000;
}
#header {
width: 100%;
height: 300px;
background-color: #F00;
}
#wrapper {
width: 1030px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/shadow.jpg);
background-repeat: repeat-y;
}
#contentwrap {
width: 990px;
margin-left: auto;
margin-right: auto;
}
.box {
width: 300px;
height: 200px;
float: left;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
background-image: url(../images/box.png);
}
#content {
width: 550px;
height: 1000px;
background-color: #ccc;
float: left;
margin-left: 15px;
margin-right: 15px;
}
#right {
width: 380px;
height: 1000px;
background-color: #00F;
float: left;
margin-left: 15px;
margin-right: 15px;
}
here is the footer...and if you notice all of the css codes does not implement any shorthand...ive changed everything to the very basic to avoid anything that might contribute to the problem.
#footer {
width: 100%;
height: 300px;
margin-top: 1230px;
background-color: #09F;
}
EDIT
Lightnote, hey..i fixed it, by giving the div id="wrapper" a height to cover all the divs inside the wrapper...and thx for the link, i used firebug to view the css source...and btw..all the divs has their own height instead of giving it 100% or none because im trying to imitate one of the theme i saw in Rocketheme for joomla.thx again btw and all others too...