/    Sign up×
Community /Pin to ProfileBookmark

firefox divs with no height

Copy linkTweet thisAlerts:
Mar 30.2004

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 —

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SamMar 30.2004 — I believe the min-height attribute will take care of this problem.
Copy linkTweet thisAlerts:
@ray326Mar 30.2004 — 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.
Copy linkTweet thisAlerts:
@theuberpuppyauthorMar 31.2004 — 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.

<i>
</i>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&gt;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&gt;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&gt;body #footer {
width: 680px;
}/*End Box-Model Hack*/

<i> </i>#footer p{
<i> </i> font-size: 80%;
<i> </i>}



/*menu on right*/
#right {
border: none;
background: transparent;
position: absolute;
float: right;
left: 500px;
top: 5px;
}





Anyone got any bright ideas?

Cheers

Al
×

Success!

Help @theuberpuppy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...