T
The Eclectic Electric
I'm having a great struggle trying to format my page for printing.
Specifically getting my divs to appear in the place I want them to. I have
3 divs: right, list and footer. When displayed on screen, they appear where
I want them:
L R
F
But when I print, they appear as
R
L
F
which really mucks everything up.
I've tried every imaginable combination of clear and float but to no avail.
I've been testing on Firefox 1.5, but it looks even more weird in IE6.
Is it even possible to do this when printing or should I revert to layout by
table?
Any help would be greatly appreciated. I've printed out the contents of the
relevant page here (it's made by PHP and not in a very eye-friendly format).
To recreate it, start at http://www.listyblue.com/main.php click on Create
List then on Format List for Printing.
The CSS:
http://www.listyblue.com/print.css
http://www.listyblue.com/css.css
+e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Listyblue ::: Your List</title>
<style type="text/css"> @import "css.css"; </style>
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<h1>Listyblue's shopping list</h1>
<div id="right"> <img class="fixedimage" src="/userimages/listyblue.jpg"
alt="mascot image" /> </div>
<div id="list">
<ul><li>Milk</li><li>Cheese</li><li>Eggs</li><li>Bread</li><li>Tomatoes</li><li>Onions</li><li>Mince</li><li>Chillis</li><li>Tacos</li><li>Cornflakes</li><li>Muesli</li><li>Orange
Juice</li><li>Ham</li><li>Salami</li><li>Mayonnaise</li><li>Nappies</li><li>Deodorant</li><li>Shampoo</li><li>Conditioner</li><li>Washing
up liquid</li><li>Washing powder</li><li>Red
wine</li><li>Beer</li><li>Chocolate</li><li>Take out rubbish</li><li>Do the
washing up</li><li>Buy Grandma present</li><li>Sort out taxes</li><li>Write
to my MP</li><li>Scalextric</li> </ul>
<div class="throwpb"> <h1>Listyblue's shopping list</h1> </div> <!--
throwpb -->
<ul><li>BMX</li><li>Playstation</li><li>TV</li> </ul>
</div> <!-- list -->
<div id="footer"><hr /><h3><a
href="http://www.listyblue.com/main.php">www.listyblue.com</a></h3></div>
<!-- footer -->
</body>
</html>
body
{
background: white;
font-family: "Century Gothic", Verdana, Helvetica, sans-serif;
color: #000;
}
h1
{
text-align: left;
font-family: "Century Gothic", Verdana, Helvetica, sans-serif;
font-size: 3em;
font-weight: normal;
color: red;
vertical-align: middle;
margin-bottom: 3em;
}
..fixedimage
{
height: 300px;
width: 200px;
display: inline;
margin-left: auto;
margin-right: 3em;
}
ul
{
list-style-image: url('bullet.gif')
}
#right
{
background: #777;
float: right;
width: 30%;
padding: 0.5em;
margin-left: 1em;
border: 0;
clear: none;
}
#list
{
background: #777;
/*float: left;*/
width: 60%;
margin: 3em 0 5em 3em;
/*clear: right*/
}
Specifically getting my divs to appear in the place I want them to. I have
3 divs: right, list and footer. When displayed on screen, they appear where
I want them:
L R
F
But when I print, they appear as
R
L
F
which really mucks everything up.
I've tried every imaginable combination of clear and float but to no avail.
I've been testing on Firefox 1.5, but it looks even more weird in IE6.
Is it even possible to do this when printing or should I revert to layout by
table?
Any help would be greatly appreciated. I've printed out the contents of the
relevant page here (it's made by PHP and not in a very eye-friendly format).
To recreate it, start at http://www.listyblue.com/main.php click on Create
List then on Format List for Printing.
The CSS:
http://www.listyblue.com/print.css
http://www.listyblue.com/css.css
+e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Listyblue ::: Your List</title>
<style type="text/css"> @import "css.css"; </style>
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<h1>Listyblue's shopping list</h1>
<div id="right"> <img class="fixedimage" src="/userimages/listyblue.jpg"
alt="mascot image" /> </div>
<div id="list">
<ul><li>Milk</li><li>Cheese</li><li>Eggs</li><li>Bread</li><li>Tomatoes</li><li>Onions</li><li>Mince</li><li>Chillis</li><li>Tacos</li><li>Cornflakes</li><li>Muesli</li><li>Orange
Juice</li><li>Ham</li><li>Salami</li><li>Mayonnaise</li><li>Nappies</li><li>Deodorant</li><li>Shampoo</li><li>Conditioner</li><li>Washing
up liquid</li><li>Washing powder</li><li>Red
wine</li><li>Beer</li><li>Chocolate</li><li>Take out rubbish</li><li>Do the
washing up</li><li>Buy Grandma present</li><li>Sort out taxes</li><li>Write
to my MP</li><li>Scalextric</li> </ul>
<div class="throwpb"> <h1>Listyblue's shopping list</h1> </div> <!--
throwpb -->
<ul><li>BMX</li><li>Playstation</li><li>TV</li> </ul>
</div> <!-- list -->
<div id="footer"><hr /><h3><a
href="http://www.listyblue.com/main.php">www.listyblue.com</a></h3></div>
<!-- footer -->
</body>
</html>
body
{
background: white;
font-family: "Century Gothic", Verdana, Helvetica, sans-serif;
color: #000;
}
h1
{
text-align: left;
font-family: "Century Gothic", Verdana, Helvetica, sans-serif;
font-size: 3em;
font-weight: normal;
color: red;
vertical-align: middle;
margin-bottom: 3em;
}
..fixedimage
{
height: 300px;
width: 200px;
display: inline;
margin-left: auto;
margin-right: 3em;
}
ul
{
list-style-image: url('bullet.gif')
}
#right
{
background: #777;
float: right;
width: 30%;
padding: 0.5em;
margin-left: 1em;
border: 0;
clear: none;
}
#list
{
background: #777;
/*float: left;*/
width: 60%;
margin: 3em 0 5em 3em;
/*clear: right*/
}