I've been trying hard, but I can't find the reason. Check www.kanionek.pl
How to get rid off the gap between the header and top of the window? There's .site: 15px auto, but even if I reduce it to 0 there's still 21px extra. Hope you can help.
I know I can use negative margin, but I would like to know the reason. Part of header:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'dream' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
Part of template:
<?php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
css fragments:
.site{
max-width: 960px;
margin: 15px auto;
border: 2px solid #808080;
border-radius: 10px;
overflow: hidden;}
Header margin and padding set to 0 do not help.
Body padding and margin are set to 0 and the only trace is that when I change css body section line-height to "0" that gap is gone.
Something is adding a zero width no-break space right after the <body> tag, forcing the following block-display <div> down one line. Probably one of the many scripts. I couldn't tell what, but there you go.
To see it, open the Firefox inspector, right-click on the <body> tag, and click "Edit as HTML". Right after the tag there is (at least in my Firefox) a red dot which is the placeholder for that invisible character. You can copy it and paste it into something that will tell you the codepoint etc.
I solved the problem - maybe it will help someone some day. I could not locate exactly zero-width char, but being almost sure it should be in header.php, I opened it notepad++ and saved using utf-8 without BOM encoding.
Related
THERE IS AN EDIT AT THE BOTTOM - look for "===== EDIT ===="
I am putting a fixed division at the top of the page. No problem with positioning it, but a problem comes up when I test the page by scrolling up and down.
Everything is fine with Chrome and IE but FF has a problem. The problem is that lines are "lost" under the fixed division. That is, the page is scrolled too far.
Here is the test page The entire source for the page is at the bottom of this question.
The division on the test page has width: 80%; margin-left: 50px; and opacity: 0.5 This allow you to see the lines underneath the division.
Go to the test page and highlight the last line at the bottom of the viewport. Highlighting the last line makes it easy to spot when you PgDn.
Now PgDn (or click the scroll bar - the bar, not the slider)
You can repeat the highlighting and PgDn and it should behave the same way.
With Chrome and IE, the highlighted line will still be visible, more importantly the lines following it will be visible.
With FF, the highlighted line, and one or two of the lines after it, winds up underneath the fixed division. The lines after the highlighted line are lost - not visible.
I've see this done successfully on other sites but I can't figure out what they are doing to make it work.
This page works correctly with FF, Chrome, and IE. There are others but I can't seem to find them right now.
Here is a page with the same problem as my test page It is different in that it "floats" the division until it is scrolled to the top and then it "fixes" it at the top. I've done this same float/fix thing and it also has the problem with FF. The test page I pointed you at, above, simply fixes the division to start with.
The funny thing about that page which has the same problem as mine is that it is a demo of how to put a fixed division at the top of the page and it doesn't work for FF
Another page with the problem of losing lines under the fixed division is yahoo.com. Lines are lost under the fixed division pretty much as is happening on my test page, but yahoo "loses" more lines than my test page.
Does anyone have any idea how to fix a division at the top and not lose lines underneath the division, lines which should be visible after the scroll? My test works for Chrome and IE but not for FF.
AND - wasn't there a code snippet link on the question page which you could use to provide demonstration code? I don't see it on this page where I'm typing the question.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Scroll Test</title>
</head>
<body style="margin-top: 0px;">
<div style="clear: both; opacity: 0.5; margin-left: 50px; width: 80%; background-color: red; top: 0px; position: fixed; height: 50px;"></div>
<div>
<script type="text/javascript">
for (i = 0; i <201; i++) {
document.writeln("*** " + i + "*************************************************************************************<br>");
}
</script>
</div>
</body>
</html>
By the way - the division (with the pink background) at the right hand side of this page has a problem when it get's fixed to the top of the viewport - the top is cut off. The only way to see the top is to scroll back up to the top of the page. This happens in FF, IE, and Chrome.
Where should I report this problem - about the "ask question page" - and provide the details?
===== EDIT ====
Thanks to user3137702, who told me to change the division to 100%. When I did that, the scrolling worked but initially when the page is loaded, lines #1 and #2 were under the fixed division.
I had the body set to margin: 0px; I changed that to margin-top: 50px; to make the first lines visible. I wasn't worried about the other margins - left, right, bottom, that's why I just changed the margin: 0px; to margin-top: 50px; - easiest to type.
but that through me back into the original error. After playing with it for a while, I found that unless margin-left: 0px; is set on the body tag, the scrolling won't work.
So, the complete solution is to have the fixed division set to width: 100%; and the body set to margin-left: 0px; and margin-top: nnpx, where nn is the height of the fixed division.
I'll add some JavaScript to set the body top margin based on the height of the fixed division so I don't have to mess around with it if the height of the fixed division changes.
I originally had width: 80px; on the division because I want the fixed division to show as less that the body width and centered.
I took the code that solves the problem and added a second division under the fixed division. The fixed division has background-color: transparent; and width: 100%. The nested div is where the content is and is set to width: 80% margin-left: auto; margin-right: auto to center it.
Now the it displays as I want it to and it scrolls properly.
Here's the new definition of the body down to the close of the fixed division's tag:
<body style="margin: 0px; margin-top: 50px;">
<div style="width: 100%; background-color: transparent; top: 0px; position: fixed;">
<div style="width: 80%; margin-left: auto; margin-right: auto; background-color: red; height: 50px;">
Contents of the child division within the fixed division
</div>
</div>
<div>
Here is a page incorporates all of the changes
Again, thank you user3137702, I'll select your answer.
Hold everything
I just played with the fixed page and have found that IE, FF, and Chrome all start to have problems with the scrolling as the viewport becomes shorter - as would happen if you resize the browser window or pull up something like FireBug.
I'm not going to spend any time figuring out the size that causes the browsers to start misbehaving, it would be a waste of time. Suffice to say IE and Chrome start having problems at larger heights than does FF. But the sizes are something that it is unlikely anyone will ever encounter. The viewport has to get pretty short to start the problems.
I can't explain exactly why it's happening, but it's the width that's messing up firefox; If you set the width of your fixed div to 100%, it works as you would expect.
<div style="background-color: red; top: 0px; left: 0px; position: fixed; height: 50px; width: 100%;">
</div>
I'm loading basic HTML into DOMPDF. In landscape mode, all the pages after the first are overlapping.
Here is my (basic) HTML which renders fine in the browser:
<div id="certificates-layout-1" style="<?php echo $styles['outer-container']; ?>">
<div style="<?php echo $styles['inner-container']; ?>">
<div style="<?php echo $styles['fullname']; ?>">
<?php echo $data['fullname']; ?>
</div>
<div style="<?php echo $styles['fullcouncil']; ?>">
<?php echo $data['fullcouncil']; ?>
</div>
<div style="<?php echo $styles['session_date']; ?>">
<?php echo $data['session_date']; ?>
</div>
</div>
</div>
Here is my DOMPDF render logic:
$filename = (isset($params['filename'])) ? $params['filename'] : 'ubcdet_report_' . date('YmdHis') . '.pdf';
$lib = $_SERVER['DOCUMENT_ROOT'] . '/sites/all/libraries/vendor/';
require_once($lib . "dompdf/dompdf/dompdf_config.inc.php");
$dompdf = new DOMPDF();
$dompdf->load_html($report);
$dompdf->set_paper('letter', 'landscape');
$dompdf->render();
$dompdf->stream($filename, array("Attachment" => false));
exit(0);
I tried with A4 paper as well, same result.
I also tried moving the render() BEFORE set-paper and the overlapping issue goes away, but it will ONLY render as portrait (tried A4 here as well).
I have not tried outputing as actual file before rendering in browser for download, but I will.
This is what the result looks like...
Any suggestions appreciated. Thanks.
====================================
UPDATE Per Request from BrianS
Thanks for your attention. Here is a dump of the rendered HTML:
<html>
<head></head>
<body>
<div id="certificates-layout-1" style="font-family: Times New Roman; font-size:33px; text-align:center; page-break-after:auto;">
<div style="height:672px; width: 906px; border: thin solid #666666;">
<div style="font-size:45px; font-weight:bold; margin-top:96px; margin-bottom:10px;">John Smith</div>
<div style="margin-bottom:125px;">Council of Councils</div>
<div style="font-weight:bold;">April 16 - 19, 2015</div>
</div>
</div>
<style>
#font-face {
font-family: TimesBold;
src: url('/sites/all/modules/ubcdet/ubcdet_report/fonts/timesbd.ttf');
}
</style>
<style>
}
#page {
margin: 0;
}
html {
margin: 72px 76px;
}
body {
width: 1056px;
margin:0;
}
.hint {
background: none repeat scroll 0 0 #6AEA91;
font-size: 13px;
padding: 50px 10px;
text-align: center;
width: 250px;
position: absolute;
}
#media print {
.hint {
display:none;
}
}
</style>
</body>
</html>
I don't think there's anything too unusual in there, but maybe I'm wrong. Let me know if you need additional information. Thanks.
Heights are a tricky thing in dompdf when you're pushing against the page boundaries. For full-page blocks I recommend using positioned content. If this isn't possible I'd set DOMPDF_DPI to 72 (the fixed "pixel" depth of a PDF) so that you get a one-to-one translation from HTML to PDF.
In general I suggest using percents to better place an element within the page boundaries, except that dompdf is a bit more fuzzy around the page margins so you have to give a few extra pixels there if you need to fit content to a page (this is why I usually go for positioned content for full-page elements).
In your case let's work with a paper size of A4 in landscape (since you mentioned it). That paper size/layout gives you a height of roughly 595 pixels. Adding up all the heights your document totally blows past that (>1100 in a rough estimate) which means paging will occur. dompdf is dragging the last line of the container to the next page. So this explains the text layout for the initial block.
As for why the layout breaks so horribly after that ... I have no idea. Usually a layout break is due to poorly-formed HTML, but yours is just fine. Were I to guess I'd say a parent element is lost on page break resulting in null positioning information. This is something we'll have to look at.
Before I continue some notes:
You only need to set margins on the page level. If I recall correctly that defines the margin for the HTML element. The body margin is not defined and so default to 0px.
body height and width is always the height/width of the page content area; no need to set that unless you really want the body to not fill the page.
dompdf does not yet support box-sizing (otherwise this would all be much simpler). height and width are defined by the content box and extra margin/padding is added to the content box to get the full box size (plus keep in mind the mysterious extra padding required around the page margins).
I changed up your HTML/CSS a bit to make it do what you want. Simpler is better, especially for dompdf.
<html>
<head>
<style>
#page {
size: a4 landscape;
margin: 72px 76px;
}
body {
font-family: Times New Roman;
font-size: 33px;
text-align: center;
border: thin solid #666666;
}
.certificate-name {
font-size: 45px;
font-weight: bold;
margin-top: 96px;
margin-bottom:10px;
}
.certificate-title {
margin-bottom: 125px;
}
.certificate-date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="certificates-layout-1">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
<div id="certificates-layout-2">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
</body>
</html>
When working with any tools you should always keep in mind it's strength and weaknesses ... and dompdf has its fair share of weaknesses.
I try to put a div 100% on top of the content of the page. The problem comes when the content has some margin. I illustrate here with a simplified case.
If I understand, position fixed: "The element is positioned relative to the browser window". So, why the div .trans is affected by what is behind? How to put the div transparent 100% of the page and on top of content?
Here is a good place to see the problem and try the solutions: http://jsfiddle.net/rdkAW/1/
CSS:
body { margin:0; }
.trans{
position:fixed;
width:100%; height:100%;
margin:0;
opacity:0.7; filter: alpha(opacity = 70);
background-color:red;
z-index:5;
}
#content {
position:relative;
margin:30px auto; /* is this the problem? */
width:95%; max-width:890px; height:1200px;
z-index:1;
background-color:blue;
}
HTML:
<div class="trans"></div>
<div id="content"></div>
The problem is solved if I use. top:0; left:0; It seems that position fixed needs that. I still do not understand very well why. If the fixed div is 100% and by definition fixed position is relative to the window, why is it need to specify top and left? I would appreciate if someone can explain it.
I'm updating an older html page with CSS, which I've just started getting into. The new version looks good, but there are huge empty spaces now at the bottom and right of the page when the user scrolls.
The nature of the page is several different content boxes, all of which have graphical backgrounds.
The old method I was using was to use a large table to organize the layout and give the table one large, solid background image. A colleague pointed out this was too old-school and suggested I try learning divs and css.
The newer version I produced broke each box up into separate divs and images and positioned them absolutely, but there was no way to keep the content centered if the browser window was resized.
I redid the whole page again, this time using relative positioning and one main container div that I could center. Everything looks good and stays centered, but now I'm getting big blank spaces on the bottom and right sides because of the positioning.
I've seen some people say they've fixed this by using a negative margin, but it doesn't seem to be having any effect on my page (unless I'm putting it in the wrong spot).
I need to know if there's a specific way to fix this that I don't know about or if I'm just going about the whole page completely the wrong way. How can I get my elements lined up correctly, centered, and with no extra scroll space? Should I just go back to using a table?
Here's a simplified version of the page with the content taken out (just the layout):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">
body
{
background-color: black;
margin-bottom: -2000px;
}
div.main
{
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: -2000px;
}
div.logo
{
position: relative;
left: 40px;
top: 60px;
z-index: 1;
}
div.window1
{
position: relative;
left: 320px;
top: -555px;
z-index: 1;
}
div.window2
{
position: relative;
left: 320px;
top: -580px;
z-index: 1;
}
div.window3
{
position: relative;
left: 680px;
top: -1250px;
z-index: 2;
}
div.window4
{
position: relative;
left: 25px;
top: -1570px;
z-index: 1;
}
</style>
<div class="main">
<div class="logo">
<img src="images/logo8.png">
</div>
<div class="window1">
<img src="images/window1_fullsize.png">
</div>
<div class="window2">
<img src="images/window2_fullsize.png">
</div>
<div class="window3">
<img src="images/window3_fullsize.png">
</div>
<div class="window4">
<img src="images/window4_fullsize.png">
</div>
</div>
</html>
You could use "em" or "%" values for top and left.
But the best be to handle this using JS.
Hope this helps.
I fixed this some time ago. I eventually did go back to using a table for the layout (which I understand is frowned upon) combined with a little bit of relative positioning, but I made sure everything was done with css and was w3 compliant:
http://www.burningfreak.com
The inherent problem, I think, is the way I designed my older pages, visually. They were highly graphical and usually made up of one contiguous background image, with a lot of art making up the section borders, etc. The general layouts tended to be unusual shapes, and I would then over-lay text and content on top on that. Unfortunately, it's very difficult to get looking right if the sections are separated.
I've since designed newer pages using only divs and css and it seems to work well, although it's a bit trickier to get working. The key, I think, is to come up with a look and style that I know is going to work using that technique from the start.
Update: I have found out that this is a very specific problem with <div>'s with the combination of overflow: hidden and anchors. There seems to be no solid way around it. I now deleted the overflow: hidden. This solves my anchor problem, but creates extra space below my columns. This is not such a big problem, but if anyone knows how to get rid of the overflow without using overflow: hidden, suggestions would be really welcome. End update
I have a fairly simple website with a header in a <div> over two columns. The header and the columns are in one container. The header is NOT fixed; when scrolling down, the header goes out of view.
Now, my problem is with the anchors I want to add in the right column. The anchor itself works properly; when I click on the link on the top of my page, it jumps to <h2> just fine. It puts the title in the top of the screen just like I want it to. The problem is, however, that when I scroll back to the top, the upper part of my content in the columns has shifted behind the header. At first I thought it shifted all the way up to the top of the page, but now I see that that is not the case. I don't understand what the amount of pixels corresponds to. The columns themselves seem to keep the proper length; there is now extra empty space below the text.
I have read several questions of others on this website, but they all dealt with fixed headers, and their problem was that the anchor tag itself disappeared behind the header. I have tried the solutions proposed to this problem, but that causes my anchor tag to appear too low on the page and doesn't solve the problem that the upper part of my columns ends up behind the header.
Does anyone know how to fix this...?
My HTML for the page-setup:
<div id="container">
<div id="header">
</div>
<div id="columns">
<div id="leftcolumn">
</div>
<div id="rightcolumn">
</div>
</div>
</div>
My CSS for the header and the columns:
#header {
width: 738px ;
height: 298px ;
padding: 0px ;
position: relative;
}
#container {
width: 738px ;
margin-left: auto ;
margin-right: auto ;
margin-top: 0px ;
margin-bottom: 0px ;
padding: 0px ;
}
#columns {
position: absolute;
margin-top: 0px;
margin-bottom: 0px ;
width: 738px ;
background: #b43232 url(fauxcolumns.jpg) ;
overflow: hidden ;
}
#leftcolumn {
float: left;
width: 254px ;
margin-top: 0px ;
padding: 0px ;
}
#rightcolumn {
margin-left: 254px ;
margin-top: 0px ;
padding: 0px ;
}
And, finally, my HTML for the anchor:
Text
<p>Text in between the top and the anchor.</p>
<a name="text"><h2>Text</h2></a>
<p>This is the text the anchor wants to take you to.</p>
So, to summarize: the anchor works, but when I scroll back to the top, the upper part of my content has now shifted behind the header. So I guess I want the content of my columns to align with the top of the column, instead of in some random place behind the header, but I can't imagine how to do it. Setting top or margin-top to either #columns or both columns separately doesn't work. I can't think of anything else...
Anyone have any ideas?