I'm having problems formatting my content so that it will fit on a page when it is printed (it runs off the edge right edge). I have two style sheets, one that defines style for the web page, and another that defines style when the page is printed. Both style sheets are linked to the web page as follows:
<link rel="stylesheet" href="content.css" type="text/css">
<link rel="stylesheet" href="print_content.css" type="text/css" media="print">
In the first style sheet I define two divs, one for navigation and one for content:
#Content {
height: 639px;
left: 150px;
position: absolute;
top: 0px;
width: 550px;
z-index: 1
; font-family: Arial, Helvetica, sans-serif; font-size: 80%
}
#Navigation {
height: 550px;
left: 0px;
position: absolute;
top: 0px;
width: 150px;
z-index: 2
}
When I print the page, I want the #Navigation div to disappear and the content included in the #Content div to move to the left.
In my style sheet for printing I define the divs as follows:
#Content {
height: 639px;
left: 1px;
top: 0px;
float: none;
z-index: 1
; font-family: Arial, Helvetica, sans-serif; font-size: 80%
}
#Navigation {
display: none;
}
However, when I print, the content still appears on the page as if it were positioned 150 pixels from the left, as is defined in the first style sheet.
Does anyone have any suggestions as to what I might be doing wrong?
Thanks!!
<link rel="stylesheet" href="content.css" type="text/css">
<link rel="stylesheet" href="print_content.css" type="text/css" media="print">
In the first style sheet I define two divs, one for navigation and one for content:
#Content {
height: 639px;
left: 150px;
position: absolute;
top: 0px;
width: 550px;
z-index: 1
; font-family: Arial, Helvetica, sans-serif; font-size: 80%
}
#Navigation {
height: 550px;
left: 0px;
position: absolute;
top: 0px;
width: 150px;
z-index: 2
}
When I print the page, I want the #Navigation div to disappear and the content included in the #Content div to move to the left.
In my style sheet for printing I define the divs as follows:
#Content {
height: 639px;
left: 1px;
top: 0px;
float: none;
z-index: 1
; font-family: Arial, Helvetica, sans-serif; font-size: 80%
}
#Navigation {
display: none;
}
However, when I print, the content still appears on the page as if it were positioned 150 pixels from the left, as is defined in the first style sheet.
Does anyone have any suggestions as to what I might be doing wrong?
Thanks!!