[RESOLVED] background color is white...should be #EFEFFF

sneakyimp

DANG the stylesheets for phpbb templates are a nightmare.

I am trying to simplify the CSS definitions in my forum so I can get a grip on them.

Here's the page I'm talking about:
http://flashmog.net/community/faq.php

Under the header 'Frequently Asked Questions' there is a DIV with id=faqlinks. If I use firebug to inspect this element, firebug reports that its inherited color is #EFEFFF (which is what it should be). However, the background is obviously white.

Interestingly, the div with id faqlinks is also reported as having a height of zero despite being full of visible content. Also interestingly, it has a nested div which also reports a height of zero with class="inner".

Any ideas about what is going on here would be appreciated.

bradgrafelman

sneakyimp wrote:
Interestingly, the div with id faqlinks is also reported as having a height of zero despite being full of visible content.

That's why you can't see the background (which really is #EFEFFF - it's not white).

It's not "full" of visible content either - it contains content that overflows past its borders (seeing as how the container is 0px tall).

Try adding this:

display: table-cell;

to that element (e.g. in the #faqlinks CSS section).

sneakyimp

OK someone kindly informed me that it's the 'float' which causes the contents to be removed from the flow of the page. Not being CSS master, I never use float so this is news to me. I didn't create these gnarly templates, I'm just adapting them.

Your suggestion worked beautifully for that particular page. I'm just wondering a couple of things:
1) What happened? Between floating elements and table-cell-ifying a DIV element, I'm not really sure what you did. No lengthy explanation needed, any info appreciated.

2) Rather than applying a fix to this one div by Id, i'm wondering if there'a way to fix it site-wide. I can see how the floats are useful in eliminating tables and still getting DT and DD to line up, but the floating is resulting in DIVs mistakenly thinking they are empty. I'm guessing that removing any bgcolor or borders on the surrounding DIV tags is probably the answer.

Generally speaking it's usually

<div class="panel bg1">
  <div class="inner">
    <dl>
      <dt>this is floated left</dt>
      <dd>this is floated right</dd>

johanafm

Personally I'd fix this by

<div class="inner">
   <div class="column1"></div>
   <div class="column2"></div>
   <br style="clear: both;"/><!-- or any other element with style="clear: both;" -->

display: table-cell makes the element behave as if it were a table cell. Since the div is not inside a table->tbody->tr hierarchy, I wouldn't make it a table cell. But if you are interested in more details, it will be lengthy: visual formatting model which somewhere along the page will point you to table spec
They don't really mistakenly think they are empty, but rather, floating content is not supposed to count towards the containing elements height. To get a quick overview of how it works, including the clear property to reset the flow, check the minimalized and simple examples at http://www.w3.org/TR/CSS2/visuren.html#comp-float

sneakyimp

thanks so much.