EDIT: I just noticed this works in IE9, but not IE10 and Chrome.
We receive HTML formatted PO reports from one of our suppliers electronically. We usually print these and before it would put 1 PO per page, but now it is not adding the page breaks. I checked the html and I can't see why it wouldn't work all of a sudden. This is the (poorly formatted) html:
<HEAD>
<STYLE TYPE='text/css'><!--
BR.breakhere {page-break-after: always}
.tb1{font:10pt Arial;}
.tb2{border-left:1px solid #000000; border-right:1px solid #000000;border-top: 1px solid #000000;border-bottom: 1px solid #000000;}
.tb3{font:10pt Arial;border-left:1px solid #000000; border-right:1px solid #000000;border-top: 1px solid #000000;border-bottom: 1px solid #000000;}
.tb4{font-size:8pt;}
--></STYLE>
</HEAD>
The page break is suppose to occur here:
<BR class=breakhere>
It occurs immediately after a TABLE element, the TABLE has an HR after the last TR (ugh).
<BR><HR style = "width:100%;height:10px;color:#000000"></TABLE><BR class=breakhere>
I want to contact them and mention this but I'm not sure if it is the code or something on our end? I've tried every browser, multiple printers and workstations, but can't get it to break pages.
Thanks!
page-break is not enough for internet explorer by own. If u try this, you can see the result. I have same problem but I solved by this way.
<div style="page-break-after: always;"></div>
<div>
</div>
I've been dealing with this too. It appears that using the page-break-after property in a break line is a no-no in IE10. According to Internet Explorer’s current documentation supporting CSS 2.1 Section 13.3.1, the page-break-after property does not support line break or header elements. See the remarks in this link: http://msdn.microsoft.com/en-us/library/ie/ms530842. I had to switch my code to use a div with the break after class but that doesn't seem to work in IE9 which is awesome.
I fixed the issue I was having by adding the CSS below:
.new-page {
page-break-after: always;
page-break-inside: avoid;
display: block;
}
Related
I have a div that is supposed to display a file input and a submit input.
This is fine, however I keep receiving an unwanted empty line at the bottom.
Photo of issue:
Here is the HTML code for my div:
<div id="change_pp">
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="pp_file"/>
<input type="submit" name="pp_submit" value="Upload Photo"/>
</form>
</div>
Here is the CSS:
#change_pp
{
background:#f9f9f9;
border-bottom: 1px dashed #ccc;
border-left: 1px dashed #ccc;
border-right: 1px dashed #ccc;
width:18%;
margin-left:3.5%;
padding:0;
}
#change_pp input[type=file]
{
width:100%;
}
Also, here is a Fiddle with my entire CSS, to show that my previous CSS is not effecting this https://jsfiddle.net/bmp3my4c/
As you can tell, the Fiddle works fine and the code should work fine, however in all major browsers I am receiving the unwanted white space.
NOTE: I know the fiddle is working properly, in the browser the div is still appearing with the white space though. That is the weird part.
You are missing a doctype based on your comment. This is what is causing the problem. Add a proper doctype, <!DOCTYPE html> on your very first line and the problem will go away without modifying what you originally had.
All modern web pages are required to have a doctype. Without one, you are in quirks mode and using an incorrect box model. Add the doctype to be put into standards mode.
Add the following CSS rule and it should solve the problem:
form {
margin-bottom: 0;
}
Edit: As Rob pointed out, this fixed the issue but was not the cause of the problem. The issue was a missing Doctype, as shown in his answer.
It seems logical that if you want a 1px wide black border around an iframe, you apply same rule as if you want the border around anything else. But this code doesn't work:
#myiframe{
border:1px solid black;
}
The border goes on the left and top of the iframe, sometimes (unpredictably) the bottom of it, but never the right of it. Why would it not just apply it consistently around the iframe??
I only have this problem in Google Chrome.
Try to add this..
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
outline:none;
outline:none and appearance:none will delete default browser appearance.
As pointed out in the comments on the question, I was on an out-of-date Chrome version. On the latest stable version, there is no bug.
try to wrap a DIV
html
<div class="wrapper">
<myiframe>
</div>
css
.wrapper {
float:left;
border:1px solid #000;
}
We can get unique border around our iFrame, by using attribute frameBorder.
So try <iframe src="" frameBorder="1"/>
I have used font-size: 0; on the parent element and that's how I got the links to have no spaces but the space is still there in Firefox.
Please test this in Firefox and then any other browser and you'll see that Firefox is showing a space (albeit 1px) between the links where as no other browser is doing this... well IE6&7 but lets not talk about them...
http://jsfiddle.net/uZMzA/
Does anyone know why? And how I could go about and solving it without using javascript to determine the browser?
The reason why this is happening is because there is a text-node with a line-break in between the a-tags. And since you have set letter-spacing: 1px; and the firefox coders have chosen to implement letter-spacing the way they have, you get 1px of letter spacing after or before that textnode.
The solution, as already hinted at elsewhere, is to change the rule for div#navigation to not have the line letter-spacing: 1px in it, like this:
div#navigation {
position: relative;
padding: 1px 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-family: Georgia, Serif;
margin: 0 auto 2px auto;
width: 400px;
font-size: 0;
text-shadow: 0 1px #fff;
}
You can see a working version with the fix applied here: http://jsfiddle.net/uZMzA/10/
maybe you mean:
letter-spacing: 0
This cause your "bug"
Edit:
If you want the letter spacing at 1px, this is a good solution, fiddle up
Just adding:
display: inline-block to the Div container css and float: left to the a element.
Read this post. You will find all available techniques on its body and comments, as well as their tradeoffs.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
The "remove the spaces" option is mentioned first, as it's the easiest to implement. But it's also "a bit funky".
The "letter-spacing - based" option is listed in the comments, but notice that you will have to include additional css if you want to make IE < 8 happy.
Simply remove the white space from your code like this jsFiddle example.
HTML:
<div id="navigation">
Link1Link2Link3Link4
</div>
This is silly and I can't really explain the "why" of that occurrence but here are two ways to correct the display.
FF doesn't like the space in the code. Either remove the carriage returns between your <a> tags or comment them out, like this:
<div id="navigation">
Link1<!--
-->Link2<!--
-->Link3<!--
-->Link4
</div>
My problem looks similar to the question I have found here:
chrome vs FF/IE/Opera in calculating table cell width ? (table-layout:fixed)
I simplified the page. The page contains a table, that looks the same in all browsers, but Chrome. I beleive the problem is padding (don't know how to fix it) or doctype (I don't know too much about doctype)... Please help me make Chrome view the same as in any other browser. Thank you.
Below is my html-page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Looks different in Chrome vs FF, IE, Opera</title>
<style>
table.maintable {
background-color:yellow;
border: 1px solid red;
border-spacing:0;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}
table.maintable th, table.maintable td {
border: 1px solid red;
margin:0;
padding:14px;
}
</style>
</head>
<body>
I want the date look like 05/10/2011, in 1 string. Chrome cuts the date into 2 parts. All other browsers are OK. The problem is style <u>padding:14px;</u>, but we need some padding in cells. <br>
Also <b>table-layout:fixed;</b> and <b>word-wrap:break-word;</b> are needed because any long text without any spaces will not destroy the table size in this case. How to make Chrome look like any other browser?
<table class="maintable" style="width:510px;"><tbody>
<tr><th style="width:57px;">number number</th><th style="width:75px;">date</th><th>current info</th><th style="width:90px;">more</th></tr>
<tr><td>40</td>
<td>05/10/2011</td>
<td>2 lines in Crhome but 3 lines in other browsers. Also check the date.</td>
<td>more...</td>
</tr>
</tbody>
</table>
</body></html>
If you believe my first string (doctype declaration) is wrong, please show me a proper one. The web-site in one of Cyrillic languages. No xml is used.
Thank you.
I wonder if the padding is causing the date to wrap due to available space.
You could try to put a span tag around the dates with a .no-wrap class and give the class the property white-space: nowrap to prevent dates from wrapping.
.no-wrap {
white-space: nowrap;
}
...
<td>
<span class="no-wrap">01/11/2014</span>
</td>
...
I have the following HTML:
<DIV class="foo bar"></DIV>
I'm trying to create a CSS class declaration that matches said element. Looking through the specs on section 8.2.3, I imagine this should've work:
DIV.foo.bar { border-color: black; }
But I've tested on IE and Safari, both doesn't affect the element. Any tricks how to make this work?
There are three issues here potentially.
1. Is your expression and HTML correct?
Your div doesn't have a border width (from what you've posted) so you might not get a border. Try:
<div class="foo bar"></div>
with
div.foo.bar { border: 1px solid black; }
2. Does you div have any height?
Your div (based on what you've posted) has no height. Now on some browsers that'll render as a solid line of the border thickness. Depending on neighbouring elements and border collapse settings (particularly on Firefox more than IE/Safari though), that border may disappear in some circumstances.
3. IE6 doesn't support multiple class selectors correctly
Multiple class selector does not work (correctly) in IE6. See multiple classes and the browser support table.
Usually the trick here is to nest the divs:
<div class="foo"><div class="bar"></div></div>
and then of course:
div.foo div.bar { ... }
Not the same thing obviously but you don't have much choice. The other alternative is to combine the classes manually:
div.foo { background: red; }
div.bar { border: 1px solid black; }
div.foobar { background: red; border: 1px solid black; }
<div class="foobar"></div>
Again, far from ideal. But there's only so much you can do on IE6.
I think it's because you're specifying "border-color: black" without a border-width or border-style. Try setting "border: solid 1px black" and see if that works.
IE6 doesn't support selectors with multiple classes on the same element. The IE-7.js script supposedly fixes that.
Your selector should work fine in IE7+ and recent versions of Safari.