I want to set margin-top and bottom to my print page for writing header and footer.
I did it in Firefox. But it doesn't work in chrome and internet explorer.
When I used #page code it works in chrome. But I cant write header on the top and footer on the bottom. How can I solve this problem?
Here is my code
pagination.php
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
</head>
<body>
<table class="header" cellpadding="0" cellspacing="0">
<tr>
<td>header
</td>
</tr>
</table>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
content
</td>
</tr>
</table>
<table class="footer" cellpadding="0" cellspacing="0">
<tr>
<td>footer
</td>
</tr>
</table>
</body>
</html>
pagination.css
#media screen{
.header{
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:10px;
margin-bottom:10px;
height:1000px;
}
.footer{
width:768px;
height:100px;
border:2px solid #000;
}
}
#media print{
.header{
position:fixed;
top:0;
left:0;
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:120px;
margin-bottom:120px;
height:1000px;
}
.footer{
position:fixed;
left:0;
bottom:0;
width:768px;
height:100px;
border:2px solid #000;
}
#page{
margin-bottom:150px;
}
}
IE screenshot:
Firefox screenshot:
Chrome screenshot:
Related
I'm getting a 2px unwanted margin/padding/border, but can't for the life of me see what's causing it. It comes out the same way in both FF47 and O 36.0.2130.80
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
padding:0;
margin:0;
border:0;
}
BODY {
background-color:#555577;
color:#CCCCCC;
font-family:"Verdana","Arial","Helvetica";
font-size:9pt;
text-decoration:none;
border:0;
padding:0;
margin:auto ;
}
</style>
</head>
<body>
<table width="400" style="background-color:white;margin:auto;padding:0;border:0">
<tr>
<td>
<table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
<tr>
<td>FOO</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Add
border-spacing: 0px;
To the table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
padding:0;
margin:0;
border:0;
border-spacing: 0px;
}
BODY {
background-color:#555577;
color:#CCCCCC;
font-family:"Verdana","Arial","Helvetica";
font-size:9pt;
text-decoration:none;
border:0;
padding:0;
margin:auto ;
}
</style>
</head>
<body>
<table><tr><td height="50"></td></tr></table>
<table width="400" style="background-color:white;margin:auto;padding:0;border:0">
<tr>
<td>
<table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
<tr>
<td>FOO</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/
Add "border-collapse: collapse;" to your table element, you can see a pic here:
You can archieve your goal more clean and professional using divs instead tables:
BODY {
background-color:#555577;
}
#progress-containes {
margin-top: 50px;
width : 400px;
height: 30px;
background-color: #fff;
}
#progress-bar {
background-color:#780000;
font: 400 9pt/1 "Verdana","Arial","Helvetica";
width: 50%;
color: #fff;
padding-top: 8px;
padding-left: 6px;
box-sizing: border-box;
height: 100%;
}
<div id="progress-containes">
<div id="progress-bar">
FOO
</div>
</div>
I'm currently working on a website for a friend of mine who runs a little hotel in Hungary. Here it is.
So far I´m quite pleased with the result. My problem however is, when viewing it on my laptop at 1440x900 or zooming in on my desktop PC the background of the "box" container gets clipped and won´t extend to the bottom of the page.
I fiddled around with all sorts of values but for the life of me, I can't find the error I made. Perhaps someone will spot it instantly.
Here's the html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.kaiserapartman.hu</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body class="pagebody"><img class="bg" src="img/bg.jpg"/>
<div id="main">
<div id="header">
<div id="flags"><table width="90" border="0" style="text-decoration:none">
<tr>
<td><img src="img/hu.jpg" width="28" height="18" alt=""/></td>
<td><img src="img/de.jpg" width="28" height="18" alt=""/></td>
<td><img src="img/uk.jpg" width="28" height="18" alt=""/></td>
<td><img src="img/ru.jpg" width="28" height="18" alt=""/></td>
</tr>
</table>
</div>
<div id="content">
<div id="buttons"><table width="90" border="0" style="text-decoration:none">
<tr>
<td><img src="img/taxi.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/email.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/facebook.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/skype.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/maps.png" width="90" height="90" alt=""/></td>
</tr>
<tr>
<td><img src="img/booking.png" width="90" height="90" alt=""/></td>
</tr>
</table>
</div>
<div id="logo"></div>
<div id="menu">
<div id="navbar" style="width:644px; float:left; clear:both;">
<li>Kezdőlap</li>
<li>Galéria</li>
<li>Árak</li>
<li>Szolgáltatások</li>
<li>Elérhetöség</li></div>
</div>
<div id="box">
<div id="images"><table border="0">
<tr>
<td><img src="img/00001.jpg" width="340" height="225" alt=""/></td>
</tr>
<tr>
<td><img src="img/00002.jpg" width="340" height="225" alt=""/></td>
</tr>
</table></div>
<div id="text"><table border="0">
<tr>
<td><h1>Üdvözöljük a hévízi Kaiser Apartman weboldalán!</h1>
<h2>Apartmanházunk csendes fekvésű helyen, Hévíz főutcájában, a hévízi termáltótól 200 méterre található.<p>Önellátó apartmanokat kínálunk, ingyenes Wi-Fi internettel és kábeltévével, valamint privát parkolási lehetőséggel.<p>A közelben reggelizők, éttermek, kávézók, üzletek találhatók.<p>Házunktól a buszmegálló 200 méterre, Keszthely (Balaton) 7 km-re, a Hévíz-Balaton Airport repülőtér 15 km-re helyezkedik el.<p>Taxi transzfer szolgáltatást biztosítunk távolabbról érkező vendégeink részére.
Kérjen árajánlatot!</h2>
</td>
</tr>
</table>
</div>
<div id="header"></div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
And here´s the CSS:
#charset "utf-8";
/* CSS Document */
.pagebody {
margin:0px;
}
.bg {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
#main {
width:100%;
min-height:100vh;
position:absolute;
font:Verdana, sans-serif;
font-size:24px;
font-weight:bold;
z-index:1;
}
#header {
width:100%;
height:70px;
position:absolute;
background-image:url(img/header.jpg);
z-index:3;
}
#flags {
position:absolute;
z-index:3;
padding:0px;
}
#footer {
width:100%;
height:19px;
background-image:url(img/footer.jpg);
position:fixed;
z-index:6;
bottom:0px;
}
#content {
width:1100px;
min-height:100vh;
z-index:2;
position:relative;
left:50%;
margin-left:-500px;
}
#buttons {
width:100px;
height:500px;
left:1000px;
top:70px;
position:absolute;
z-index:5;
}
#box {
width:1000px;
min-height:100vh;
height:auto;
z-index:1;
position:absolute;
background:url(img/content.png);
}
#images {
top:275px;
position:absolute;
z-index:3;
left:10px;
padding-top:5px;
width:356px;
height:255px;
}
#text {
top:70px;
left:370px;
position:absolute;
z-index:3;
font-size:19px;
font:verdana;
font-weight:bold;
color:#4F1700;
width:620px;
}
#logo {
width:356px;
height:250px;
position:absolute;
z-index:4;
background-image:url(img/logo.png);
}
#menu {
width:644px;
height:70px;
background-color:gree;
position:absolute;
z-index:4;
left:356px;
}
#navbar {
width:644px;
height:70px;
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
z-index:5;
position:absolute;
line-height:70px;
color:#FFF;
}
#navbar li {
padding-left:21px;
padding-right:20px;
margin:0;
list-style:none;
float:left;
position:relative;
width:auto;
display:block;
text-align:center;
vertical-align:middle;
color:#4F1700;
text-decoration:none;
z-index:5;
}
#navbar li:hover {
background:url(img/hover.jpg);
z-index:5;
font-style:italic;
color:#4F1700;
}
What You Did
you played with zindexes of the divs and played it wrong..
Lets look at your code:
your div with id = "box" has a z-index 1 while its child div that contains all the text has its own z-index as z-index:3 in that case when the height of the text div will increase then the height of its parent div id = "box" wont increase with it... I have removed the z-index of your "text" div and gave it a margin-left:350px; and its perfect now ... Now you can open it at any resolution zoom it in or out ... It wont clip or break ... as a matter of fact try adding more text and the size of the div will increase ...
add this to your text div
style = "min-height: 30px; word-break: word-wrap; float: left; margin-left: 350px;"
and remove its z-index and absolute property ..
Always be careful when you are changing the z-indexes of the divs ...
You must fit the body to the viewport. you can do this by assigning the below css to body.
body {
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
I know, that's not the best way to do this, but this is what i could come up with over a quick glance. Hope this helps
The problem is the width of #main is 100% which can be less than the width of #content when the window is sized down. #content has a left margin of -500px, so when the width is less than 1000px, it get moved off to the left.
Add min-width:1000px to #main and you'll establish scrolling at anything less than 1000px.
I have a simple div, here the code:
<html>
<head>
<title>Head</title>
<style>
div.ex {
height:700px;
width:150px;
padding:10px;
border:1px solid gray;
margin-bottom:10px;
float:left;
text_color:#ffffff;
}
</style>
</head>
<body>
<div class="ex">
</div>
</body>
Now, I have a table, and I want to use all the space just for that. How can I do it?
If i got you properly try this...
<html>
<head>
<title>Head</title>
<style>
div.ex {
height:700px;
width:150px;
<!--padding:10px;-->
border:1px solid gray;
margin-bottom:10px;
float:left;
text_color:#ffffff;
}
table{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="ex">
<table>
<tr>
<td>
test
</td>
</tr>
</table>
</div>
</body>
</html>
Since, entire div space is to be used so remove padding from div..
I currently use the following HTML to render the image shown below. This however does not work in Outlook as background images are not supported. I have been tipped to use tables to render elements correctly in outlook, but have no idea how to go about this. 200 bounty to the person who provides the html that will render the image below correctly in Outlook 2007/2010"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
div, p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
div.box {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color:rgb(255,232,0);
}
div.box div.inner {
height:100%;
background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<p class="name">John</p>
<p>XYZ Company</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
table {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color: #fee800;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<table>
<tr><td>John Smith</td><td></td></tr>
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr>
</table>
</body>
</html>
For emailer You should have to use table and don't use CSS in head or different CSS. Try to use and inline CSS.
<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;">
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td> </td>
</tr>
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td>
</tr>
</table>
I have a very stupid problem: I want a field inside a table, which has 100% of the Table-Cell height. The Problem is the IE-Browser, which won't do that. On Chrome etc. it works (Firefox too I think). Here is a sample html-File:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
body {
background-color: #ffffff;
font-size: 12px;
font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
color: #000000;
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
border: medium none;
}
table.subTable td {
border-width: 0px;
padding: 0px;
margin: 2px;
}
.ui-slottable table {
height:100%;
width:100%;
}
.ui-slottable-slot {
width:100%;
height: 100%;
border-radius: 5px;
border-width:1px;
border-style:solid;
border-color: #cccccc;
background-color:#eeeeee;
border-collapse: separate;
}
</style>
</head>
<body>
<div class="ui-slottable">
<table>
<tbody>
<tr>
<td>
<div class="ui-slottable-slot">
<table class="subTable" style="margin:2px;">
<tbody>
<tr>
<td>T1 Hallo</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div class="ui-slottable-slot">
<table class="subTable">
<tbody>
<tr>
<td>T2 Hallo</td>
</tr>
<tr>
<td>Halloggggggggggggggggggg</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In this File The Field T1 should have the same height as T2.
I've tested a lot of different way's, but nothing worked...
Hope someone can tell me how IE makes this...
Attempting to set height usually does not work.
You can get the same height for the fields by using 2 lines in the innermost table for T1, too. (Use nbsp as contents of the extra line.) Then remove the style="margin:2px;" inside the table html tag.