Forum Moderators: not2easy
CSS
#skipNavigation {
text-align : left;
}#wrap {
margin: auto;
}
#sidebar{
float:left;
width:24%;
}
#intwrap {
margin-left:25%;
width:74%;
}
#navbar {
text-align : left;
}
#footer {
clear:both;
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<title>Temporary page for test purposes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Temporary page for test purposes">
<link href="testprint.css" rel="stylesheet" type="text/css" media="print">
<link rel="stylesheet" href="simplifiedtest.css" type="text/css">
</head>
<body>
<div id="skipNavigation">
Skip navigation bars here.
</div>
<div id="wrap">
<div id="navbar">
Main navigation bars here.
</div>
<div id="sidebar">
Left hand column here.
</div>
</div>
<div id="intwrap">
<h1>Test page only</h1>
<div id="main">
<p>This is a test page only</p>
</div>
</div>
</div>
<div id="footer">The footer goes here</div>
</div>
</body>
</html>
The testprint.css referred to above is:
#wrap {
}#navbar, #sidebar, #skipNavigation {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
#intwrap {
margin-left:-30%;
width:100%;
float:left;
}
I cannot get the main body of the text, inside #intwrap, to print at the left hand side of the margin. It is always postioned as though the side column was still there - even with margin-left given such an extreme negative value.
I have also tried:
#intwrap {
position:absolute;
left:0px;
top:0px;}
again no joy.
Oddly, if I change <div id="intwrap"> in the HTML to <div>
I get the print effect I want, though not, of course the screen display.
So, in testprint.css, I tried
#intwrap {}
But the left hand margin went back out.
Can anybody give me a steer on getting the stuff inside #intwrap printing at the left hand margin?
[edited by: SuzyUK at 11:22 am (utc) on June 18, 2006]
[edit reason] examplified [/edit]
<link href="testprint.css" rel="stylesheet" type="text/css" media="print">
<link rel="stylesheet" href="simplifiedtest.css" type="text/css">
haven't looked at your specific question, but the second stylesheet is overriding the first one by default as there is no specific media type declared in it, so it defaults to "all" - try adding the screen media to see if it helps
e.g. <link rel="stylesheet" href="simplifiedtest.css" type="text/css" media="screen">
Then your printed page should be completely unstyled, and if you want to hide the sidebar, nav etc.. simply declare it to be display: none; and style the other divs as required without having to override the margins and positioning in the screen stylesheet
for example
<style type="text/css" media="print">
#wrap {}
#navbar, #sidebar, #skipNavigation {
display: none;
}
#intwrap {}
</style>
Thanks.
Tell me, for compatibility issues, is it still necessary to put both media-dependent style sheets, that is:
<link rel="stylesheet" type="text/css" media="print" href="style_print.css">
<!-- AND -->
<style type="text/css">
@import url("'.$url_root.'eng/style_print.css") print;
</style>
<link rel="stylesheet" type="text/css" media="print" href="style_print.css">
<!-- AND -->
<style type="text/css">
@import url("'.$url_root.'eng/style_print.css") print;
</style>
I honestly don't know
Can't test back versions of IE as the print/preview doesn't seems to be working in my multi IE install, although IE7 is now honouring the @imported media
I would guess that there is no need to use both as you have it above, but I may have missed something (quite possble ;)) as I've not heard the recommendation to use both ~ as far as I can tell the linked method should do on it's own, is it not both forward and backward compatible?
Suzy
<style type="text/css">
@import url("'.$url_root.'eng/style_print.css") print;
</style>
doesn't work with IE6 and should be changed to
<style type="text/css" media="print">
@import url("'.$url_root.'eng/style_print.css");
</style>
Regarding using both, I'll continue to use both until IE7 is used by most users.. Safer
