Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to hide TABS in IE

Status
Not open for further replies.

samkal

Technical User
Jun 24, 2008
41
US
I have 2 Tabs on my main page and I do not want them to appear in the printing. Following code changes in CSS file works for Firefox but not with IE7. Please help.

td[id="form:tabname"]{display:none}
 
Try that in a browser other than IE 7 or Firefox; I "think" it's Firefox-specific but don't quote me on that. ;)

I would recommend applying a class of "noprint" (or something similar) to the stuff you don't want to print, and change your CSS to read:
Code:
.noprint { display:none; }
Without seeing the HTML for the page in question, dunno if I can help you further.

Greg
 
Thanks Greg! td[id="form:tabname"]{display:none;} is working now however I had put semicolon after none. Not sure what difference it made. Anyways I have another issue, I need to print all TAB content when I give print command. I mean when main page is sent to the printer it should print TAB content too. Any help will be appreciated.
 
Create a print stylesheet that is separate from your main design, and put all formatting for printing in there.

Link it using <link rel="stylesheet" media="print" href="myprintsheet.css"/>

Greg
 
Thanks! I have already done that. I need to know how all TABS will be printed. Presently it is printing only main tab.
 
Tabs will have an id or class, which allows the script to hide and show them. In the default stylesheet for the screen, these will not be displayed and the script will display individual ones based on what tab you click. For the print stylesheet, you would change their display from none to block to begin with.

Just to clear up the above CSS issue. That is NOT Firefox specific code (those begin with -moz-), it is simply CSS3 selector. However, given that you're referencing an id, that is much easier done with a normal CSS selector for ids (#). I can imagine though that having a colon in the id name would cause issues in CSS, since in CSS colon is a delimiter for pseudo classes. Still, you might try this to see if it works in more browsers:
Code:
td#form:tabname {
  display: none;
}
If it was up to me, I would remove the colon from the ID name in the first place and then the code above would work perfectly in new and older browsers.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Thanks! I made changes in print.css file and changed display to block ( td[id="form:tabname2"] {display : block !important}.) Now I can see tabname2 in print preview with Main tab but still on the same page.Do I have to use page break to display tabname2 on the separate page.Please help.I tried below code but it did not work for me.

td#form:tabname {
display: none;
}

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top