CODEWITHSUNDEEP
csscss-selectors
max4ever
max4ever

Reputation: 12142

Print CSS refuses to hide elements

I am using simple CSS with modern browsers: IE 9 and Firefox 10.

<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />

With this content it works.

@media print
{
    #wrap, div.push, div.footer, div.barra_sopra_datatables, div.fg-toolbar, img{
        display: none;
    }   

    body {
        font-size: 10pt;
    }

     * {  
     margin: 0;  
     padding: 0;  
    }  


}

I need to hide some columns of a table, so just for testing I tried

tr:first-child {
    display: none;
}

but it hides all the tr elements.

I’ve alsove also tried td:first-child and table tbody tr td:first-child and other selectors, and all of them fail. I need to maintain compatibility with IE 8. kimblim.dk says that IE 8 supports these selectors, so why won’t it work? I’m not trying to set background color which many pointed out doesn’t work.

Upvotes: 2

Views: 1023

Answers (1)

yunzen
yunzen

Reputation: 33439

I think you cannot just don't display table cells.
display:none means, don't display it at all, so do as it would not have been there in the first place. Perhaps the browser thinks, if the first column is not there anymore, the next column is the new first one and then it hide this columns as well.

Try to give a table-cell a class hide-in-print and then

@media print {
  .hide-in-print {
    display: none;
  }
}

Maybe @media print is not supported fully by IE. If this is true, try conditional comments.

Upvotes: 1

Related Questions