Are these properties not considered standard CSS?
I'm using something like this, which works properly on Chrome 12, FF4, Opera 11, and Safari 5, but on IE9 the min-width is not respected if width < min-width.
<span style="float:left; width:11%; min-width:150px;">
...
</span>
Edit: a little annoyed at the liberal editing and migrating of my question, but w/e. Here's a fuller example that shows a clear difference in IE9 vs other browsers.
<html><body>
<p style="width: 600px">
<span style="float: left; width: 11%; min-width: 150px">Hello.</span>
<span style="float: left; width: 11%">World.</span>
</p>
</body></html>
Edit 2: As noted in Kevin's comment below, adding <!DOCTYPE html> to the beginning solves the IE issue.
If what you are saying is true, IE9 would be deviating form the spec. However, I cannot duplicate your complaint. Using your example, IE9 respects min-width if width is less than 150px per this jsfiddle.
EDIT:
NOTE: Quirks Mode follow different rules and does not comply with standard CSS in any browser. If you add a doctype to the page, this should resolve the problem (add: <!DOCTYPE html>).
To expand on the issue, Quirks Mode is not standardized. There are some things that most browser implement, but new features are undefined in those defacto standards. Thus, some browsers are allowing new CSS to be used (as you have observed), but IE9 is ignoring new css values, as they have no place in Quirks Mode.
I found that <!DOCTYPE html> was insufficient — I had to go strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Try following code:
#limit-size
{
min-width: 998px;
width: expression(this.width < 998 ? 998: true);
min-height: 250px;
height: expression(this.height < 250 ? 250: true);
}
//html:
<div id="limit-size"></div>
Related
I have a header element with the following CSS. IE7 and 8 are ignoring the max-width property. If I change the header to be a div then it does work.
.header {
display: block;
width: inherit;
max-width: 1200px;
position: relative;
margin: 0 auto;
float: none;
}
This isnt working:
<header class="header">
//stuff
</header>
This is working:
<div class="header">
//stuff
</div>
It's not max-width that's being ignored. It's header, which is an HTML 5 element and, therefore, not supported by IE 7 & 8.
Check http://www.caniuse.com for browser compatibility.
Consider modernizr.com as a workaround. From the website:
All web developers come up against differences between browsers and
devices. That’s largely due to different feature sets: the latest
versions of the popular browsers can do some awesome things which
older browsers can’t – but we still have to support the older ones.
Modernizr makes it easy to deliver tiered experiences: make use of the
latest and greatest features in browsers which support them, without
leaving less fortunate users high and dry.
you can always check this site for browser compatibility - http://caniuse.com/.
The New HTML 5 tags are not supported in IE8, so it will not work.
I forgot I needed a javascript polyfill to make HTML5 elements work properly on old IE. The following works or you can use modernizr.
<script>
'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})
</script>
A third party product outputs a webpage with iframes and I'm not in full control of the content. The main iframe is missing doctype declaration and this forces IE8 into quirks mode.
I'm maintaining a javascript application that adds several buttons to the right edge of the screen. The problem is that the layout is off in IE8 quirks mode. The buttons are not visible (probably due to incorrect IE z-index behavior) and their position is off.
I was thinking about creating a separate CSS for IE8. How should I go about tuning the CSS for quirks mode?
If you do have control over the (separate) Javascript files, and presuming that a JS file is already called in the head, you could set a conditional class on the html element, like this:
<html>
<head>
<title>Demo Conditional Class Quirks Mode</title>
<script type="text/javascript" src="folder/js_file.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 100px;
}
.ieQM div {
left: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
While adding this to the js_file.js:
if (document.documentMode == 5)
document.documentElement.className += ' ieQM'; // IE in Quirks Mode
.
By the way, I wonder whether it is just a problem in IE8, the document not having a doctype? Don't all IEs revert to quirks mode without it?
a little css problem that i cannot quite find on SO - although I assume it has been asked before, apologies.
So, here is the html:
<html>
<body style="color:white">
<div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
<div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
<div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
</body>
</html>
lovely.
If i open this in ff, i get three vertically stacked divs - but with space in between them! This is not what i wanted! Drama-rama!
ie renders this as i'd expect, which raises some alarm bells.
ie is 9, ff is 11
cheers,
andrew!
UPDATE a lot of mentioning the "p" tag - why/how is the p tag affecting anything? Isn't it wrapped by the div, and the div has the background color applied? Shouldn't, in fact, the div just be internally bigger, but with no space between adjacent divs?
UPDATE:
So i tried this html instead:
<html style="margin:0px; padding:0px;">
which didn't fix the issue, and also this:
<body style="color: white; margin:0px; padding:0px;">
which also didn't fix the issue - shouldn't the css be inherited by the "p" tag in both cases? Interestingly, i also examined the resultant css with firebug, and the p tags all have a margin and padding of 0...
ideas?
UPDATE: a lot of responses asking me to set padding to 0. This doesn't work. Any more answers stating that and i'll down vote 'em.
UPDATE: the question is really specific about using inline css. I don't actually care for inline css myself, but why is everybody providing css stylesheets for their answer?
UPDATE: somebody mentioned -webkit, and while i'm not using a google chrome at all, it is an interesting idea. I cannot see any ff related extra css that might be causing this problem, anybody have any ideas?
I tried it with Chrome and saw the same behavior. After looking at the underlying CSS (F12), Chrome is applying the following two lines to the <p> tag:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
If I add the following to the css the blank lines go away:
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
Hope that helps!
Basically the P tags are by default taking margin. Add css
p{margin:0px; padding:0px;}
This is because of the auto-generated margin of a <p> element.
Firefox (and others) do this differently than IE.
You can "reset" this simply by doing a p{margin: 0} in your css.
You can do the same for all elements at once (which I recommend) by simply adding * { margin: 0; padding: 0;} in your css.
Small tip: Install a browser extension to inspect the behavior of your elements such as Firebug.
Your <p> tags have vertical margins. Vertical margins in CSS collapse, so that child margins can sometimes apply to parents. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
I resolved this be specifying a CSS 'line-height' I just set it to the same as the font size and then I got consistent DIV spacing across all browsers.
I have a div set to overflow: auto, max-width of 250px.
Inside the div I have a paging control, which allows users to pull back 10, 20, 50, or 100 results. If they pull back enough results, the inner content (table) will grow larger than the div and should then be scrollable.
This works fine in Firefox 3.5 and IE8, however in IE7, the scrollbar only shows after the first postback that requires a scrollbar (e.g. user selecting 20). If the user then selects another amount that requires the scrollbar (50, 100), the bar in IE7 will disappear.
If the user goes back to 10 results (no scroll needed), then proceeds to 20 results (scroll needed) the scrollbar will once again show up in IE7.
I can still scroll the inner content with my mousewheel, there is just no scrollbar.
Anyone know what the issue could be? I'm stumped... can provide details if needed.
Clarification: The scrollbar is disappearing even when the content is overflowing the Div.
Change the CSS property overflow from auto to scroll
See http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
I had a similar issue and managed to resolve it. Now, understand I had the width of a table set to 100%. I believe the problem is related to the doctype. I tried setting the doctype to
<!DOCTYPE html> <!-- HTML5 -->
and I still had the same problem. It was only after removing the doctype declaration that the IE7 bug went away (quirks mode, which I wouldn't recommend). I have also tested it using XHTML 1.0/1.1/HTML 4.01 doctype declarations (Strict, Transitional, Frameset) and the same problem occurs. It appears this issue arises because using a doctype declaration tells the browser to use standard mode. IE7 and less does not handle standard mode browsing very well.
To resolve it for IE7, I set the width to 99%.
Here is working sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#Content
{
overflow-y: auto;
overflow-x: hidden;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="Content">
<table width="99%" border="1">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</tbody>
</table>
</div>
</body>
</html>
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>