Question

In my website, in asp.net 4 / vb, I have a situation where I need to include a class, “noprint“, in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr’s and td’s all have classes in them already.

Basically, I have this in my footer:

Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888

And the only thing I want printed out is the phone number.

I use

<div class="noprint">whatever I want omitted when printing</div>

And that works fine. But when viewing the webpage, I don’t want the 888-888-8888 to appear below everything else, so I can’t use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!

Update: My print.css stylesheet looks like this:

@media screen
{
   /* whatever styles you have for display */
}

@media print
{
   .noprint { display: none; }
}

So I don’t know how to make the div tags display: inline, but I will search around and try to figure it out!

Answer 1

gd1 is absolutely right about span/div and display inline/block, but on a side note I’d add that what you’re trying to achieve is often done with a list (as it really is a list of links in your footer)

<ul class="footer">
  <li class="no-print">KnowledgeBase</li>
    ...
  <li>888-888-888</li>
<ul>

with a css like

.footer li {
  list-style-type: none;
  display: inline;
  padding: 0 10px;
  border-right: 1px solid black;    
}

.footer li:last-child {
  border-right: none;
}​

hope that helps