I have identified a strange problem in Internet Explorer and Chrome: I have a simple HTML table with no layout CSS, 2 columns, no styles, and width set to 100%. When I attempt to print this table in Internet Explorer (all versions) and Chrome, the first cell on the 2nd page and later is dropped.
Snippet of the HTML:
<html>
<head></head>
<body>
<table width='100%' cellspacing='0'>
<tr><td align='left'>Date</td><td align='left'>Order No.</td></tr>
<tr><td align='left'>5/24/2011</td><td align='left'>287426</td></tr>
<!-- SNIP :: Many more rows -->
</table>
</body>
</html>
The entire table can be found at:
https://gist.github.com/1000367
The output in the Print Preview on Internet Explorer, for page 2 looks like:
I have added the colored lines and circle to highlight that the left cell is missing.
Any ideas?
I've tried adjusting cellpadding and margins on the outside of the table, with no luck. As suggested, I have also added the following css rules with no effect:
BODY { margin: 0px; padding: 0px; }
IE has issues printing when the doctype isn't set correctly. Try adding a doctype at top of the page. In my test adding <!DOCTYPE html> to the top of your sample fixed the issue.
Just a thought, but you may want to investigate a different css file for print media. This is a common practice, but I am not sure exactly off the top of my head what to suggest for your specific issue. Its been a couple of years since I had to do markup for printing in detail.
I use Blueprint CSS for my sites now and it has a separate css file for print. http://www.blueprintcss.org/ Could be you just need a print specific resent like blueprint offers.
I have a feeling it is because of the 100%. It might be better to set a fixed size link 400px for the table.
I have the same issue. The web page I am trying to fix is not HTML 5, and has the following DOCTYPE...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
... but even changing to HTML 5 ...
<!DOCTYPE HTML>
... did not help. I found that a META tag was also causing this problem...
<META content="IE=5.0000" http-equiv="X-UA-Compatible">
... when I removed this meta tag even with the HTML 4 DOCTYPE it displayed correctly.
Related
I need some help. While I was working on a project in Chrome, I wanted to test it in Firefox and was puzzled as to why it looked so different.
Can anyone explain to me why the green div containing the image doesn't adjust its width relative to the child? Is it a bug? Is it a feature? Is it a bugfeature?
Research
It works, as I expect in Chrome, where it looks like this:
But in Firefox, there is a lot of weird white space (this is the same image as the first):
Also, here is a screenshot of the following browsers (starting from the left) Firefox, Opera and Internet Explorer 11:
As you can see, it works like I expect in Opera, but not in FF and IE11. It doesn't work in Edge either.
My findings
It looks to me like Firefox forgets to recalculate the parent's width after the image has been resized.
Here is a screenshot without height constraints (100% of the parents 200px height):
If I readd the height constraint, it looks like this:
As you can see, the width is the same. Note that the green div's width is 510px. That is the the same as the image (500px) + the padding (5px + 5px).
The code
I tried to add a jsFiddle, for your convenience, but curiously, I were not able to reproduce the error there (it worked as it was supposed to).
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.wrapper {
height: 200px;
}
.div1 {
float: left;
background-color: green;
}
.div1 img {
height: 100%;
padding: 5px;
}
.div2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<img src="http://placehold.it/500x500">
</div>
<div class="div2">
<h1>Heading</h1>
</div>
</div>
</body>
</html>
I'll answer my own question in hope of helping someone else
TLDR:
I was missing the HTML5 doctype declaration, which looks like this: <!DOCTYPE html>.
Longer version:
While writing this question, it suddenly struck me that it could be caused by the lack of a doctype declaration. A quick test confirmed my suspicion. All I was missing was the <!DOCTYPE html> declaration!
It's safe to say that I'll update my snippet to include a doctype. I used Visual Studio's doc snippet and never gave it another thought. Note that the html snippet already includes a doctype. (In VS: If you type html or doc and hit tab in an HTML document, a quick HTML template will appear)
Why
Without a doctype declaration, the browser renders the page as best it can, in the so called quirks mode. In quirks mode the browser has to guess how the page is supposed to look with primary focus on backwards compabillity. Therefor the result naturally deviates from newer specifications.
The doctypes was invented to differentiate legacy sites from those using newer specs back when IE and Netscape was a thing. You can read more about it on MDN here:
Doctype
Quirks mode
Nice to know:
Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.
-MDN
In HTML5, the only purpose of the DOCTYPE is to activate full standards mode.
-MDN
How to see which mode is being used
On Windows, click alt to bring up the good old toolbar, then go to Tools ➡ Page info
I made a site that has an ordered list, for which some items on the list are links, and others are not. Everything renders fine on a PC. On my iPhone, however, the numbers in the ordered list show up smaller than they are supposed to if the list item is a link.
To make sure that it wasn't just some obscure issue with my particular html, css, etc., I made the following html document, called test_1.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol>
<li>here.</li>
<li>here.</li>
</ol>
</body>
</html>
The issue persists even with this extremely minimal example.
Does anyone know how to fix this?
Thanks!
I stumbled onto a fix for this issue here. The solution was the following CSS code:
body {
-webkit-text-size-adjust: 100%;
}
Incidentally, this also fixed an issue with the site on my iPhone where one of the fonts on the page would not always load at its assigned size, but would seemingly randomly change sizes sometimes when I refreshed the page. E.g., it would sometimes load at its assigned font-size: 34px;, but other times load at e.g., 14px.
I'm having an issue in Google Chrome on Windows only (tried IE11, FF, Opera, Safari) with printing. The issue only occurs when using the system print dialog. Using the Chrome Print Preview renders expected results, but it's just when using the system print dialog that I get the issue.
The first image below is the expected result (printed using the normal Chrome Print Preview window):
And this one is what I get (using the system print dialog):
I think it's pretty self explanatory what the issue is - all the text has a white highlight.
The other possibly related issue is that none of my fonts are correct - the PDF is rendering using Arial, instead of the correct fonts I've declared.
These were printed to a PDF printer, however the results are exactly the same when printed on paper, and I've tried two different manufacturers of printers.
I would post CSS (as I suspect that's the issue) but I'm not really sure what to post.
I've tried changing heaps of different CSS values from various elements (too many to name), but I've tried the obvious ones: background-colors and backgrounds, tried removing opacities etc.
Any ideas would be greatly appreciated!
Edit: A live URL with an example is at: iNewsletter
Edit: Just wrote a simple test case which also fails:
<!DOCTYPE html>
<html>
<head>
<style>
#bg {width: 500px; height: 500px;}
#text {margin-top: -500px;}
</style>
</head>
<body>
<div id="bg"><img src="http://inws-cache-dev.s3.amazonaws.com/3-resize-1024-768.jpg" width="500" height="500" /></div>
<div id="text">This text will have a white highlight</div>
</body>
</html>
Which leads me to think it's a Chrome bug
The problem is in your CSS like you guessed. Search for #media print in your CSS, that controls the printing style. The live site you provided, doesn't allow any print at all so you get a totally white document as it sets the print style display:none.
My website http://www.matejkadesign.com is having trouble displaying consistently styled outer table borders across Chrome, IE, and Firefox. The styling I want is in Chrome, but is different both in the other two browsers. I've looked for fixes but find none. I don't style my tables in CSS, I do it in html like this:
<table align="center" cellspacing="5" cellpadding="5" border="4" bordercolor="#3c2610" width="310px" >
This appears to produce three different effects. How can I make the styling the same across Firefox and IE as in Chrome?
Is there any particular reason why you need to use inline styling?
You can fix those behaviors by defining exact border style for both table as well as td tags, by doing this you prevent browser from applying its own styling.
Try this:
table {
border: 4px solid #3C2610;
}
td {
border: 1px solid #3C2610;
}
You have an HTML <!--Comment--> before your doctype which will trigger IE to go into quirks mode (equivalent to IE5). IE basically parses your document as if it had no doctype. Nothing should precede <!DOCTYPE html>
Secondly you're using deprecated table attributes from HTML 4.01 yet you have technically declared an HTML 5 doctype .. these two reasons most likely explain the discrepancy amongst browsers.
You're also using the deprecated align attribute several times throughout your site .. if you insist on using HTML 4.01 attributes at least change your doctype to match it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I just finished designing a webpage for my photography. I used Chrome as my test browser.
But opening my page on IE, nothing was visible. After some trouble, I isolated the problem to the fact that I'm using percentages. I searched online for solutions but everything is about minor variations (related to padding and percentages).
Here is a simple HTML file that works perfectly in Chrome, but not all in IE (the div is a pixel-less box, slightly expanded by the presence of text). Your help is greatly appreciated. If I can't solve this issue, I'll have to completely redesign my site.
<html>
<head>
<title>A test HTML</title>
<style type="text/css">
#currpage
{
position: absolute;
bottom: 18%;
right: 10%;
left: 35%;
top: 15%;
border:2px solid green;
z-index: 240;
}
</style>
</head>
<body>
<div id="currpage" style="visibility: visible; opacity: 1;">
This is just a test.
</div>
</body>
</html>
Have you tried... actually making a well-formed HTML file?
Without a DOCTYPE, the browser renders the page in Quirks Mode. In the case of IE, it renders as it would in IE5.5, which didn't support a lot of now-basic stuff.
Add <!DOCTYPE HTML> to the start of the file.
EDIT: While you're at it, always include a Content-Type <meta> tag (such as <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> so that the browser knows what the encoding is. Also consider adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to force IE to use the strictest standards mode it has. These appear on every single one of my pages, even the blank template. The DOCTYPE and Content-Type are required (if you want it to actually work), and the Compatible header is optional (I mainly use it to get rid of the Compatibility Mode button that is annoyingly close to the Refresh button...)
Well, I'm on mac, so I can't check it, but it seems that you don't have a doctype in your HTML, so the IE might be in trouble because he doesn't know how to parse your code.
At the very first line (even before the <html>-Tag write the following:
<!DOCTYPE html>
This is for a HTML5 document.
Edit: ....edit.... forget that point.
Set height and width of the containing element explicitly. I had a similar issue with one of my old pages (worked fine in Firefox and Chrome, went to hell in IE) and what I found that that in that Firefox and Chrome will automatically set the dimensions of the containing element if none are explicitly assigned and then base those percentages off those assumptions. IE makes no such assumptions so when it looks at the percentages it basically says "um 35% of what?"