Print CSS not working Correctly

Question

MVC3 RAZOR VB.Net App. In one of my views I am trying to create a printer friendly view using print.css . I have the following code for the view:

@ModelType IEnumerable(Of xxxxxxxxxxxxx.sponsor)
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
@Code
ViewData("Title") = "Sponsors"
End Code
@Code


Using (Html.BeginForm())
    @<p> 
    Search For: @Html.TextBox("SearchString")
    <input type="submit" value="Filter" />

    </p>


End Using

End Code

<p>
@Html.ActionLink("Create Sponsor", "CreateSponsor")
</p>
<table>
<tr>
    <th>
        Exhibitor or Sponsor
    </th>
    <th>
        Sponsor Amount
    </th>
    <th>
        Contact Person
    </th>
   <th>
       Company/Organization
    </th>
   <th>
       Phone
    </th>
    <th>
       Email
    </th>
    <th>
      Paid
    </th>


    </tr>

    @For Each item In Model
    Dim currentitem = item
    @<tr>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.status)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.amount)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Contact_Person)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Company_Organization)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Phone)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Email)
    </td>
    <td>
    @Html.DisplayFor(Function(modelItem) currentitem.Paid)
    </td>

    <td>
    @Html.ActionLink("Edit", "EditSponsor", New With {.id = currentitem.id}) |
    @Html.ActionLink("Details", "DetailsSponsor", New With {.id = currentitem.id}) |
    @Html.ActionLink("Delete", "DeleteSponsor", New With {.id = currentitem.id}) |
    @Html.ActionLink("Pay with Credit Card", "Credit_Card_Sponsor", New With {.id = currentitem.id})
   </td>
   </tr>

    Next
    </table>

    <div id="sidebar3">
    <p>


      @Html.ActionLink("Back to List", "Index")
      </p>
      </div>

Using the default Layout view. And the below is the print.css file

#header, #footer, #sidebar3, #Actions, #nav{
display: none;
}

Its like its not seeing the css at all when I right click in the browser and click print. The sidebar box, header image, and the menubar all show still... Any ideas????

Dips · Accepted Answer · 2012-02-24 00:01:03Z

3

Have you added @media print

@media only print
{
#header, #footer, #sidebar3, #Actions, #nav{
display: none !important;
}

answered Feb 24, 2012 at 0:01

Dips

3,2903 gold badges22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dips Over a year ago

Yes inside your print.css file

BoltClock Over a year ago

Why is this necessary when the print stylesheet is already limited to media="print"?

Skindeep2366 Over a year ago

That was what I thought but I am very open to ideas... The print css file isn't working correctly at ALL though. Everything still shows...

Skindeep2366 Over a year ago

I just noticed vb doesn't like the above css anyways.. It flags the upper french brace and the !. So I have changed it back to the originally posted css above..

Dips Over a year ago

Its better you just add it to your normal css and it works. You don't have to have seperate css with media="print"

|

StanK · Accepted Answer · 2012-02-24 03:37:50Z

1

The issue will be to do with the precedence of the selecters you are using and the 'cascading' nature of stylesheets.

I'm guessing you are using a different external css file for 'normal' display, via a link with no media specified? This stylesheet will be overriding the print styles you defined, as if you do not specify a media type it applies to all media.

One way of fixing your issue is to use !important on your print rules - making the print rules have a higher precedence.

Alternatively, have a look at this - it gives a pretty good explanation of rule precedence, and from this you should be able to figure out why your print rules don't have higher precedence

answered Feb 24, 2012 at 3:37

StanK

4,7702 gold badges24 silver badges47 bronze badges

2 Comments

Skindeep2366 Over a year ago

The link is a good one but your second paragraph brought back memories from html classes in college. I overlooked that I had no media type specified on my primary css and just as you mentioned it would definitely take precedence just because it is the first style sheet it comes to... Thanks for the insight its the little things that gets me everytime...

StanK Over a year ago

Hopefully it brought back happy memories. Actually, the rule that comes last wins, so the problem was probably related to specificity, unless you have some inline styles.

Collectives™ on Stack Overflow

Print CSS not working Correctly

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related