Hi,
I'm trying to set up a website where I'm using a few nested divs. I'm trying to use css properties to set background properties for the various divs.
My problem is that some of the divs have no elements in them other than more divs. But firefox seems to read this as meaning that these parent divs have no height. IE works fine, increasing the height of the parent to match that of the child. But firefox just can't be bothered.
Am I trying to do something impossible? Have I just not understood correctly how the divs are interpreted? Or, what I'm hoping, have I just forgotten to write a single line that solves the whole problem for me?
TIA
Al
--slowly going mental trying to understand the convoluted world of css --I believe the min-height attribute will take care of this problem.Without seeing your code you might as well be calling the Psychic Friends Network. You're probably doing something with the contained divs that takes them out of the normal flow like float.Point! But I am now PEEVED!
I've got it working in firefox (ok, well I cheated and used the min-height thing). But, IE (6) doesn't like min-height , and that is still exhibiting the problem that I initially thought was confined to firefox. Urgh!
Well, anyway, here goes with some code.
I'm not sure why I'm still using a 'content' div, as strictly speaking it isn't necessary - however, I'm leaving it in for the moment cos I don't know whether it may come in useful again later on.
body {
border: none;
margin: 0;
padding: 0;
background: #ccc url(images/bkg.gif) 50% repeat-y;
width: 100%;
}
html {
background: url(images/greyupfade.gif) #cccccc bottom left repeat-x fixed;
}
/* Wrapper for all of page */
/* Page has image bar across top, content div below with a right-positioned menu */
#all {
margin: auto;
position: relative;
text-align: center;
width: 600px;
padding: 0px -1px 0px 0px;/* begin Box-Model Hack*/
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #all {
width: 680px;
}/*End Box-Model Hack*/
/*content contains content plus a right-positioned menu
#content {
background: transparent;
border-color: #333333;
border-width: 0px;
border-style: none;
padding: 0;
position: relative;
text-align: left;
top: 10px;
width: 600px;
min-height: 400px;
/* begin Box-Model Hack*/
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #content {
width: 680px;
}/*End Box-Model Hack*/
/*finishes off content div with a bar containing copyright info etc. */
#footer{
background: #5fc url(images/bottom.gif) repeat-y 50%;
border-style: solid;
border-color: #666;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
position: relative;
bottom: 0px;
right: 0px;
margin: 0px auto;
text-align: left;
width: 600px;
/* begin Box-Model Hack*/
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #footer {
width: 680px;
}/*End Box-Model Hack*/
#footer p{
font-size: 80%;
}
/*menu on right*/
#right {
border: none;
background: transparent;
position: absolute;
float: right;
left: 500px;
top: 5px;
}
Anyone got any bright ideas?
Cheers
Al
I'm trying to set up a website where I'm using a few nested divs. I'm trying to use css properties to set background properties for the various divs.
My problem is that some of the divs have no elements in them other than more divs. But firefox seems to read this as meaning that these parent divs have no height. IE works fine, increasing the height of the parent to match that of the child. But firefox just can't be bothered.
Am I trying to do something impossible? Have I just not understood correctly how the divs are interpreted? Or, what I'm hoping, have I just forgotten to write a single line that solves the whole problem for me?
TIA
Al
--slowly going mental trying to understand the convoluted world of css --I believe the min-height attribute will take care of this problem.Without seeing your code you might as well be calling the Psychic Friends Network. You're probably doing something with the contained divs that takes them out of the normal flow like float.Point! But I am now PEEVED!
I've got it working in firefox (ok, well I cheated and used the min-height thing). But, IE (6) doesn't like min-height , and that is still exhibiting the problem that I initially thought was confined to firefox. Urgh!
Well, anyway, here goes with some code.
I'm not sure why I'm still using a 'content' div, as strictly speaking it isn't necessary - however, I'm leaving it in for the moment cos I don't know whether it may come in useful again later on.
body {
border: none;
margin: 0;
padding: 0;
background: #ccc url(images/bkg.gif) 50% repeat-y;
width: 100%;
}
html {
background: url(images/greyupfade.gif) #cccccc bottom left repeat-x fixed;
}
/* Wrapper for all of page */
/* Page has image bar across top, content div below with a right-positioned menu */
#all {
margin: auto;
position: relative;
text-align: center;
width: 600px;
padding: 0px -1px 0px 0px;/* begin Box-Model Hack*/
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #all {
width: 680px;
}/*End Box-Model Hack*/
/*content contains content plus a right-positioned menu
#content {
background: transparent;
border-color: #333333;
border-width: 0px;
border-style: none;
padding: 0;
position: relative;
text-align: left;
top: 10px;
width: 600px;
min-height: 400px;
/* begin Box-Model Hack*/
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #content {
width: 680px;
}/*End Box-Model Hack*/
/*finishes off content div with a bar containing copyright info etc. */
#footer{
background: #5fc url(images/bottom.gif) repeat-y 50%;
border-style: solid;
border-color: #666;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
position: relative;
bottom: 0px;
right: 0px;
margin: 0px auto;
text-align: left;
width: 600px;
/* begin Box-Model Hack*/
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #footer {
width: 680px;
}/*End Box-Model Hack*/
#footer p{
font-size: 80%;
}
/*menu on right*/
#right {
border: none;
background: transparent;
position: absolute;
float: right;
left: 500px;
top: 5px;
}
Anyone got any bright ideas?
Cheers
Al