Firefox print top alignment is not good in 2nd page - html

<html>
<head>
</head>
<body>
<div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
<div style="position: absolute;left: 204px; top: 64px;">
<h1>One</h1>
</div>
</div>
<div style="page-break-after: always"></div>
<div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
<div style="position: absolute;left: 204px; top: 64px;">
<h1>Two</h1>
</div>
<div style="position: absolute;left: 204px; top: 164px;">
<h1>Three</h1>
</div>
</div>
</body>
</html>
The above code displaying properly in brower, but in print/print-preview in firefox, the 2nd page css top is not working. Both the words "Two" and "Three" overwritten. Please help me to align it properly.

There is a tricky print-rendering bug in Firefox that causes this behavior. The top margin of the 2nd (or more) printed page in Firefox is 1px too high. Being inside what I will call the "y-pos dead zone" the y-positioning of elements is ignored, thus causing the text "Two" and "Three" to render on top of each other as if they both had the css definition top:0px.
The easiest fix/hack is to add a margin-top:1px onto any page past the first.
If you want a better visualization of this problem add a border onto the absolutely positioned divs.
(If you want some insight into how Firefox is doing the rendering try setting a negative margin-top:-80px which will still have the rendering bug. But if you go up to -85px suddenly the bug goes away. This begins to show that the bug has something to do with how Firefox is trying to render around the gutter between pages.)

I was fighting all day with this bug until I found this Question, thx a lot! That pointed me to the right direction. The fix from purgatory101 did not work for me, but at least I could see, that FF is not capable to print anything with absolute position. We changed it to relative and now it seems to work. There is still a bug, that when it comes out of the printer, it is moved to the right a bit (the preview is ok, the papers not), but this is a big success for me.
So my solution: put everything you need positioning to a div wrapper with absolute positioning and inside you can put relative divs with the same coordinates as you used earlier.
<div style="position: absolute;">
<div style="position: relative; top: ...">
blah
</div>
<div style="position: relative; top: ...">
bleh
</div>
</div>
Update: I realized that IE sufferfs with similar bugg - all absolute positioned elements loose the css styles from the 2nd page (eg. z-index or opacity), but at least they stay on right coordinates. Just chrome seems to me now doing everything right.

Related

A (really) fixed DIV in HTML/CSS

In my webpage, I have a header DIV, whose position is set to fixed. This means it should remain in the same position on page scrolling, shouldn't it?
On the bottom part of the same webpage, there is a footer DIV, which contains an input text. The position is set to fixed for it too. That should go without any problems, but unfortunately the fixed property seems not to work at all.
On my iPhone, when I click on the input field, the keyboard obviously comes up, scrolling the page... The same behaviour on Windows Phone's Internet Explorer. I've not tested it in any Android devices so far, but I'm sure it won't work.
So my question is: how do I make a really fixed position DIV? When the keyboard is opened, I want my header DIV to remain in the top of my screen.
Thanks!
<div style="border-bottom:1px solid #D3D3D3;text-align:center;background-color:#ff9e42;position: fixed;width:100%;padding-top:1px;padding-bottom:1px;">
<p>This is my DIV content</p>
</div>
<div id="Body" style="padding-top:50px;">
<iframe src="..." />
</div>
<div id="FOOTER" style="position:fixed;bottom:0px;background:#EFEFEF;color:gray;width:100%;border-top:1px solid #D3D3D3;">
<p>Footer</p>
<input type="text" />
</div>
Try this:
header {
position: fixed;
top: 0; // add this to set proper positioning
left: 0; // add this to set proper positioning
}

Negative Margin in Firefox Using Bootstrap

I am using Twitter Bootstrap plugin, mainly just the grid system currently.
I am trying to put one row on top of another doing some stuff for responsive design.
In Chrome this works perfectly:
<div class="container">
<div class="row">
<div class="content">
abcd
</div>
</div>
<div class="row" id="moveUpRow">
<div class="content">
efgh
</div>
</div>
</div>
CSS:
.row {
height: 200px;
}
#moveUpRow {
margin-top: -200px;
}
But in Firefox and IE they both ignore the negative margin. I have tried top: -200px, but that just moves up the row and not all of the elements below the row. Leaving big white space.
Any other solutions to this problem? Or any suggestions on how to "pull" up any content below the row?
I was having the same problem. In my case I had two floating elements in my first row, so when I placed a negative margin to the second one it would move the entire row. Weirdly it worked fine in Chrome but not in Firefox.
Try adding overflow:hidden; to the row if that's the case.
The HTML you posted and CSS looks good to me in Firefox and IE, see http://www.bootply.com/72944
Perhaps you could start by double checking the paths to your CSS files and make sure there isn't some other problem with the HTML on your page?
Good luck!

Some doubts related to the use of CSS clear property in a specifi case

maybe this is a stupid question but I have a doubt about CSS clear propery use.
I have this template: http://onofri.org/example/WebTemplate/
Why if I delete (you can try with firebug) the propery clear: both from the #footcontainer div I obtain that this div is placed at the top (it seems almost below the header and below the two columns)
My idea is this thing happens because the two columns #content and #sidebar are floated to the left and without setting clear: both on the #footcontainer div the browser try to put also this div on the right of the #content* div but have no space and put at the top.
Is this a right intuition or am I missing something?
Tnx
Andrea
This is happening because everytime you float an element, its container loses its auto height.
If you want to prevent that from happening, there are somethings you can do:
Set a given height to the container
Ex:
<div class="my-container" style="height: 100px">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
Be aware that if you have set a given height, the div won't resize as the content becomes higher than the container.
Append a div with style="clear: both" right after the floated elements
Ex:
<div class="my-container">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
<div style="clear:both"></div>
</div>
Yeah, it works. But only noobs do it like that. It's not elegant and pollutes your code.
Set overflow: hidden to the parent container
<div class="my-container" style="overflow: hidden">
<div style="float: left;">
Some very interesting text right here.
</div>
<div style="float: left;">
Don't read this and you'll be doomed.
</div>
</div>
This one is great, but you are in danger if you have someting positioned absolutely and have to move it outside the parent div, for example. You'll have an unpleasant surprise.
Use the ClearFix Hack.
This is the way I do it: easy to implement and works like a charm. Check this link out: http://www.positioniseverything.net/easyclearing.html;
If you mind about not having valid CSS (like me), you can target IE browsers with a different stylesheet and conditional comments, for example.
Further resources about the subject:
Quirks Mode Site: CSS Clearing
http://www.quirksmode.org/css/clearing.html
Chris Coyier's ClearFix Tutorial
http://css-tricks.com/snippets/css/clear-fix/
I see you code
your code is too complicated according to me but any way you can used to this css than your problem is solve
Used to this css
#c{position:relative;}
#c:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: -42px;
background: url('http://onofri.org/example/WebTemplate/images/footerRight.jpg') no-repeat -3px 0px;
height: 43px;
}
#footerRight{display:none;}
You have no height set on your container. If you change the height of container to the height of its' contents, which in this case is 596 px then when you take away the clear both property on the footer it won't move one iota.
I think it's because if you float an object, the parent object doesn't resize accordingly.
For example, if you had:
<div class="1px-border">
<div class="float">
<h3>TEST</h3>
</div>
</div>
The border would be completely flat, and not resize to the header. You could fix it by having overflow: auto in the container div.
That said, I could be massively wrong.

CSS position:fixed and IE7

I have a few div boxes that are using position:fixed and I use a margin-top and margin-left in order to put them where I want them to be.
Everything works very well with FF/Chrome, but IE7 seems to fail at displaying these boxes at all.
I've googled it and I understand that only IE7 bet2+ knows how to display position:fixed items properly.
I'm looking for a solution that will allow these boxes to be displayed correctly on all IE7 browsers. Can anyone assist?
CODE: (The two divs in question are the ones with the inline styling)
<div id="rn_PageContent" class="rn_Home">
<rn:widget path="search/ProductCategoryList" data_type="categories" label_title="#rn:msg:FEATURED_SUPPORT_CATEGORIES_LBL#"/>
<div style="float:right;width:310px;background-color:#000;border-style:solid;border-width:1px;border-color:#999999;padding:5px;position:fixed;">
<h2 style="border-bottom:1px solid #BBBBBB;margin-bottom:10px;padding-bottom:2px;">Most popular questions</h2>
<rn:widget path="reports/Multiline2home" report_id="#rn:php:$report_id#" per_page="5" />
<rn:widget path="reports/Paginator" report_id="#rn:php:$report_id#"/>
</div>
<div style="float:right;width:310px;background-color:#000;border-color:#666;border-style:solid;border-width:1px;padding:5px;margin-top:10px;position:fixed;">
<rn:widget path="standard/knowledgebase/PreviousAnswers2" number="3" />
</div>
</div>
Thanks,
position: fixed elements are positioned with the properties left and top (or right and bottom) not with margin.

css/html: vertical div-alignment-Problem (added live-demo)

I have a problem with aligning some divs in this case:
<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
<div id="content" style="position: relative; margin-top: 50px;">
Content
</div>
</div>
(Of course this is only an example that reproduces the behaviour I want to avoid.)
I would have expected the content-div to align from the container-div. Therefore there should be 150px alltogether between "Preamble" and "Content".
However, (at least in Firefox) this is not the case. The container-div is simply ignored and therefore the content-div's margin-top is ignored too, as long as it is not bigger than the margin-top of the preamble-div's margin-bottom.
What can I do? Is there an additional css-rule I would have to apply? I would like to keep position: relative aswell as the html-structure.
Thank you!
[edit2]
Hope you are still with me ;-)
Sorry for the delay... here's a live-demo. It's so live, I even did a small jquery-script to illustrate the problem - just try out the buttons.
Live Demo
Thank you!
[edit]
The way it is:
(source: 666kb.com)
The way I want it (without the borders)
(source: 666kb.com)
I hope the difference is obvious although the images are jerky ;-)
That's because overlapping vertical margins are collapsed.
The CSS2 specification says:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
In your case, because #preamble's margin-bottom and #container's margin-top overlaps, they get collapsed, so the effective margin is the bigger one (in this case, 100px).
If background color is not an issue, you can use padding instead of margin.
<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
<div id="content" style="position: relative; margin-top: 50px;">
Content
</div>
</div>
First of all, i recon making a stylesheet. It will save you time when you have alot of elements and also will keep your code cleaner.
What i see when i test your code is that the content div is showing inside of the Container with a margin on the top of 50px. What's wrong?
I think what you want to achiev is this:
<div id="preamble" style="margin-bottom: 100px; border: solid black 1px;">Preamble
<div id="container" style="position: relative; border: solid black 1px;">
<div id="content" style="position: relative; margin-top: 50px; border: solid black 1px;">
Content
</div>
</div>
</div>
Good luck! You didn't nest the Div inside the other one and therefore it wouldn't be a total of 150px together ;). Remember Margin is Outside the cell and padding inside the cell!
When i read now that you want to keep your html structure the same, that's not possible.
As soon as you give your first div a margin of 100px this means the next element will be placed 100px under that element. And because you a nested div next with a margin on the top of 50px this means you create more then 150px of total space...
Why did you wanna maintain your html structure?
I found a way out of this miracle: the good old overflow: hidden; trick...
When you add the property overflow: hidden; to #container, the behaviour is just like expected.
You can proove the difference here
Still I'm not completely convinced. Why does this trick solve my problem and are there other ways to do it?
Thanks for your help anyway!