here a minimum version to reproduce the failure:
<!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>
<title>title</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
.clear{clear:both;}
.col{float:left;}
.row{margin-bottom:30px;background-color:red;}
</style>
</head>
<body>
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
</body>
</html>
It is a Bug of Firefox or I misunderstand something.
Edit:
Forgot to explain the Problem. When im using margin-bottom for the .row in combination with a float in .col Then the element will be dropped down for the same value as the .row margin-bottom has
I'm not entirely sure why Firefox is behaving differently to other browsers here. It is something to do with collapsing margins.
However, you can easily fix it (no moving down in Firefox, consistency between browsers) by:
Adding overflow: hidden to .row as an alternate way to clear the float.
You can then remove the <div class="clear"></div> because it's no longer required.
Looks fine here:
JSFiddle
You will be wanting padding-bottom:30px; instead of margin-bottom:30px;
i think you are assuming that it should pad the red row 30px on the bottom? You want padding-bottom then. The margin-bottom will put a 30px gap between the .row and the next element underneath it.
check this fiddle for what I mean
there is no failure
make another div with class="row" underneath and you will see the margin-bottom:
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
<!-- here is 30px space -->
<div class="row">
<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
i think, the problem for him is, when you use firebug and make margin-bottom greater...then the body will go down.
If you use height then the body will not go down. Tested in FF 3.6.15
Or use padding with the margin...then the body do not move down.
Add to my comments here:
.row {
background-color: red;
margin-bottom: 30px;
padding-bottom: 1px;
}
The issue is related to floated elements being removed from the normal flow and you're expecting that element to act the same. Firefox is acting as it should. Sorry I don't have time to work this out.
thirtydot, you are right - this is because of collapsing margins. I was in a similar situation. However, you can't say that it's a bug of only FireFox. In fact, in Chrome, my margins didn't used to collapse even without the float being broken. In FireFox, on the other hand, the margins collapsed for me despite broken float (whether with overflow: hidden/auto, a cleared element between, or whatever). Funnily enough, the margins where collapsing between a child and a parent, which is not supposed to happen according to W3C specs. Moreover, a positive padding fixed this issue.
As a conclusion, I can say that no browser is 100% W3C/IEEE/ISO standards-compliant. However, I don't really care which browser complies to which exact standard. What matters is that they all comply to the same standard. This is not happening, and I doubt it ever will.
Related
I am using a two column layout with the navigation bar placed with float:left. The content div uses margin-left so it sits beside it.
All good, except when I use a div of width 100% inside the content div, it gets shifted down to the bottom of the navigation bar.
This only happens with IE6, every other browser is fine with it (IE7+/FF/Chrome). I wouldn't normally worry about IE6 too much, but this is a biggy because with a long nav bar it looks like the page is empty unless you scroll right down the bottom.
I'm assuming it's the request for 100% width on the inner div that causes the problem, and IE6 is incorrectly seeing that as a request for 100% of the page, not just the containing content div.
Any ideas on a workaround? Live demo at:
http://www.songtricks.com/Ie6ClearBug.html
<!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>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.left
{
width:300px;
float:left;
background-color:#CFF;
}
.left .navpanel
{
height:300px;
width:200px;
border:solid 1px black;
margin:10px auto;
}
.right
{
margin-left:300px;
background-color:#FFC;
}
</style>
</head>
<body>
<div class="left">
<div class="navpanel">navpanel</div>
</div>
<div class="right">
<div style="width:100%;">this should be at the top</div>
</div>
</body>
</html>
OK I found an answer. New users can't answer their own questions, so here it is.
Turns out the behavior can be normalised in IE6 by marginally reducing the width of the inner div just to 99% (or making it auto, but then you are at the discretion of the browser as to whether you get full width for the div or not, depending on what's in it).
So the lowest impact solution is to use:
<div class="right">
<div style="width:100%;_width:99%;">this should be at the top</div>
</div>
This leaves normal browsers unaffected, and puts a safe 99% in for IE6.
I'm sorry i don't understand very well your problem, i haven't IE 6..so i cant test your css...but: i can say something about your css.
First you'll need to add float: left to your .right class.
Second, if u set a margin on the same side of a float, IE doubled the margin.
I hope u understand my english..i'm sorry!!
Third: i dont remember exactly but some browser calcuate the border inside the div, other outside the div...so something if u set: div width 300px and border 1px, u can find your div total width is 301px
bye bye
I ran into the following problem:
how to make a general container (HTML + CSS; no javascript)
that is contrained vertically (it has a fixed outer height), so it may have a vertical scrollbar
but that can grow horizontally (as needed by the content of the container), so it never has a horizontal scrollbar
it has to work in IE8, FF, Chrome (no IE7 or earlier)
the solution semms to be be trivial at first
but I can not get rid of the horizontal scrollbar in IE8:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="display: table;" class="container-div-1">
<div style="display: table-cell;" class="container-div-2">
<div style="overflow-y: scroll; height: 19em;" class="container-div-3">
<div style="width: 30em; height: 30em; background-color: red;" class="example-content"></div>
</div>
</div>
</div>
</body>
</html>
in this example, we need a 19em high container, that can grow horizontally, as needed by the content (in this case, the "example-cotent" div)
please don't suggest to modify the "example-content" div, as it is just a sample content (any content could be there)
this problem is the generalization of this issue:
IE8 horizontal scrollbar problem
Floating will probably get the result you're looking for. Check out my example here:
http://jsbin.com/ivegi4/4/edit
I took away the containing divs, as I didn't think they were necessary, but I wouldn't see a problem adding them back in if you absolutely needed them.
Set position: absolute on the container-div-3 div. This will cause the div to shrink-wrap whatever is inside, and works fine in IE8.
I thought I was pretty knowledgeable about CSS but this simple problem baffles me.
<div><span>sample text</span></div>
results in the div's height being smaller than the height of the span if the span has padding.
I realize that there are ways to use "float" to make the div size correctly, but floats always seem to introduce undesired side effects.
Isn't there a clean simple way to tell the div to size to fit its contents? Seems pretty basic to me. Maybe I'm missing something.
In the basic case, just use display: inline-block on the span.
Here is my test case (works in FF, Chrome, and IE 6-8):
<!DOCTYPE HTML>
<html>
<head>
<title>Span padding test</title>
</head>
<body>
<div style="background-color: yellow; border: 1px solid red;">
<span style="padding: 50px; display: inline-block;">test</span>
</div>
</body>
</html>
The reason why adding float: left to the div and span fixes this is because floating an inline element implicitly converts it to a block element. If you are unfamiliar with the nuances between divs and spans (aka the difference between block and inline elements), reading http://www.maxdesign.com.au/articles/inline/ should help.
There are a few other ways to solve this but it is hard to say which one is best without know more about the rest of the markup and styles.
Add overflow:auto to the div.
I'm trying to get google chrome to do page breaks.
I've been told via a bunch of websites that page-break-after: always; is valid in chrome but I can not seem to get it to work even with a very simple example. is there any way to force a page break when printing in chrome?
I've used the following approach successfully in all major browsers including Chrome:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>
This is a simplified example. In the real code, each page div contains many more elements.
Actually one detail is missing from the answer that is selected as accepted (from Phil Ross)....
it DOES work in Chrome, and the solution is really silly!!
Both the parent and the element onto which you want to control page-breaking must be declared as:
position: relative
check out this fiddle:
http://jsfiddle.net/petersphilo/QCvA5/5/show/
This is true for:
page-break-before
page-break-after
page-break-inside
However, controlling page-break-inside in Safari does not work (in 5.1.7, at least)
i hope this helps!!!
PS: The question below brought up that fact that recent versions of Chrome no longer respect this, even with the position: relative; trick.
However, they do seem to respect:
-webkit-region-break-inside: avoid;
see this fiddle:
http://jsfiddle.net/petersphilo/QCvA5/23/show
so i guess we have to add that now...
Hope this helps!
I just wanted to note here that Chrome also ignores page-break-* css settings in divs that have been floated.
I suspect there is a sound justification for this somewhere in the css spec, but I figured noting it might help someone someday ;-)
Just another note: IE7 can't acknowledge page break settings without an explicit height on the previous block element:
http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/
I had an issue similar to this but I found the solution eventually. I had overflow-x: hidden; applied to the <html> tag so no matter what I did below in the DOM, it would never allow page breaks. By reverting to overflow-x: visible; it worked fine.
Hopefully this helps somebody out there.
I'm having this problem myself - my page breaks work in every browser but Chrome - and was able to isolate it down to the page-break-after element being inside a table cell. (Old, inherited templates in the CMS.)
Apparently Chrome doesn't honor the page-break-before or page-break-after properties inside table cells, so this modified version of Phil's example puts the second and third headline on the same page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
Chrome's implementation is (dubiously) allowed given the CSS specification - you can see more here: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en
Beware of CSS : display:inline-block when printing.
None of the CCS property to go to next page would work for me in Chrome and Firefox if my table was inside a div with the style display:inline-block
For example, the following doesn't work :
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
But the following work :
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
2016 update:
Well, I got this problem, when I had
overflow:hidden
on my div.
After I made
#media print {
div {
overflow:initial !important
}
}
everything became just fine and perfect
I faced this issue on chrome before and the cause for it is that there was a div has min-height set to a value.
The solution was to reset min-height while printing as follows:
#media print {
.wizard-content{
min-height: 0;
}
}
This did the trick for me (2021 Chrome):
#media print {
.page-break {
display: block; // <== this can be missing sometimes
break-before: always;
page-break-before: always;
}
}
If you are using Chrome with Bootstrap Css the classes that control the grid layout eg col-xs-12 etc use "float: left" which, as others have pointed out, wrecks the page breaks. Remove these from your page for printing. It worked for me. (On Chrome version = 49.0.2623.87)
It's now 2021 and this topic is the first result when searching for the exact issue with Chrome. I found this is a very simple solution that works and can be slapped into your without any additional effort to at least affect Chrome page breaking in the middle of a :
<style>
#media print {
tr, th, td {
page-break-inside: avoid !important;
}
}
</style>
Hopefully that helps save someone time.
Have that issue. So long time pass...
Without side-fields of page it's break normal, but when fields appears, page and "page break space" will scale. So, with a normal field, within a document, it was shown incorrect.
I fix it with set
width:100%
and use
div.page
{
page-break-before: always;
page-break-inside: avoid;
}
Use it on first line.
As far as I know the only way to get the correct page breaks in tables with Google Chrome is giving it to the element <tr> the property display: inline-table (or display: inline-block but it fits better in other cases that are not tables). Also should be used the properties "page-break-after: always; page-break-inside: avoid;" as written by #Phil Ross
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
I was printing 16 labels on A4 page landscape rotation, 4 labels per row, page was breaking in the last row and only 12 label were on one page in chrome only,
I was using display:inline-block; on a div, then replaced it with float:right; and it worked!
It was working for me when I used padding like:
<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>
I prefer working with CSS based design, but as more of a back end coder my CSS skills are a bit weak. When I get involved with layout, I tend to fall back on table based formatting because my mind has been warped by years of table based abuse. There's one particular problem that I always trip over. What is the best CSS alternative to:
<table width="100%">
<tr>
<td align="center">
content goes here
</td>
</tr>
</table>
I sometimes use:
<div style="width:100%; text-align:center">content</div>
But this doesn't seem quite right. I'm not trying to align text, I'm trying to align content. Also, this seems to have an effect on the text alignment of enclosed elements, which requires tweaking to fix. One thing I don't get is: why isn't there a float:center style? It seems like that would be the best solution. Hopefully, I'm missing something and there is a perfect CSS way to do this.
You are right that text-align is intended for aligning text. It's actually only Internet Explorer that lets you center anything other than text with it. Any other browser handles this correctly and doesn't let block elements be affected by text-align.
To center block elements using css you use margin: 0 auto; just as Joe Philllips suggested. Although you don't need to keep the table at all.
The reason that there is no float: center; is that floating is intended to place elements (typically images) either to the left or the right and have text flow around them. Floating something in the center doesn't make sense in this context as that would mean that the text would have to flow on both sides of the element.
I would recommend putting a <div> into your <td> and setting the style attribute to style="width: 200px; margin: 0 auto;"
The catch is that you must set a fixed width.
Edit:
After looking at the question again, I would recommend scrapping the table entirely. Just use a <div style="width: 200px; margin: 0 auto;> as I suggested and no need for a table.
Here is a good resource for centering using CSS.
http://www.w3.org/Style/Examples/007/center
This demonstrates how to center text, blocks, images and how to center them vertically.
Where do you find yourself commonly doing this? For me - I am most often trying to center the entire design of the site, so I usually do this:
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
body {text-align:center;}
#wrapper {margin:0 auto; text-align:left; width:980px;}
This will center the entire design on the page at 980px width, while still leaving all of your text left aligned (as long as that text is within the #wrapper element).
Use display:inline-block to enable text-align:center and center content without a fixed width:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Centering</title>
<style type="text/css">
.container { text-align:center; }
/* Percentage width */
.wrapper { width: 99%; }
/* Use inline-block for wrapper */
.wrapper { display: inline-block; }
/* Use inline for content */
.content { display:inline; }
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
<div>abc</div>
<div>xyz</div>
</div>
</div>
</div>
</body>
</html>
d03boy's answer is correct for the right way to center things.
To answer your other comment, "Also, this seems to have an effect on the text alignment of enclosed elements, which requires tweaking to fix." That's the nature of how CSS works, setting a property on an element affects all of its children, unless the property is overridden by one of them (assuming the property is one that is inherited, of course).