Combining class selectors

HTML & CSS
1

Hi there, thanks in advance for any help

Im trying to combine these three class selectors.

.productdisplay div .module-bm {
height: 0px}

.productdisplay div .module-bl {
height: 0px}

.productdisplay div .module-br {
height: 0px}

This is producing some strange results an obviuosly incorrect

.productdisplay div .module-bm, .module-bl, .module-br {
height: 0px}

I also wondered if setting the Div heights to zero is likely to cause browser problems. I am using a template and need some element to dissapear on certain pages using a body class suffix.

Thanks

2

You have to combine them like this:

.productdisplay div .module-bm, .productdisplay div .module-bl, .productdisplay div .module-br {
height: 0px
}

I don’t think height: 0 will cause problems, but an alternative is to give them

position: absolute;
left: -9999px;

to get them off the screen.

3

Thanks very helpful

4

Ie6 treats height as a minimum and unless overflow is hidden it will expand the element to contain its content. The off left approach that Ralph suggested is better for all assuming that the element contains valuable content as it will be available to screen readers and seo if required.

5

IE6 treats height as a minimum (as Paul said) and you will often find that IE6 will not honor the height:0 (well it does, but it’s a minimum height) and since the font size is greater then the height, IE6 wil expand so often you’ll find that 0 height boxes have ~14-16 pixels of height, and that can be fixed by setting font-size:0, or forcing the height to stay, aka overflow:hidden :slight_smile: