Hi I have written a Perl cgi script that prints a calendar. It works fine in IE10, Firefox and Chrome but not in IE8 and also not in IE Tab+ pulgin of Firefox. The page is displayed partially and the rest is clipped off...
The webpage also has embedded Javascript in it.
Has anyone faced this problem before? Any solutions??
I can't put the screen shots but I can say that I have 5 columns in my table, two and half columns are displayed, the java script attached to those cells work but the rest 2 and half columns are missing.
*this may not be pretty but this reproduces the problem.
*I tried this example in jsfiddle, there i saw that the two columns were overlapping over one other.
<html>
<style>
#today
{
color:red;
}
table
{
table-layout: fixed;
text-align:center;
width: 800px;
height: 500px;
}
td
{
padding : 0px 0px;
width: 80px;
height: 80px;
text-align:center;
font-size: 20px;
}
</style>
<body bgcolor="#COCOCO">
<h1>my blah blah blah Calendar</h1>
<table>
<t><td>
<table color="black" bgcolor="white" border="1px">
<tr>
xfgvfsd
</tr>
<tr>
<td>Su</td>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
</tr>
</table>
</td>
<td colsize="5">
edsafsdg
</td></tr>
</table>
</body>
</html>
If your document does not have a doctype or has blank space before the doctype, it will render in compatibility or quirks mode. This will cause the browser to use an older rendering engine with all the weird layout bugs included.
To verify this, press F12 to open your MSIE Developer Console and check the browser rendering mode.
If IE is rendering in quirks mode, you should add a doctype like <!DOCTYPE html> immediately before the <html> tag to ensure that it isn't triggered automatically.
You should also add a meta tag to your <head> to force IE to render the page with the latest rendering engine:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This should prevent IE from using compatibility mode. There are other server-side steps you can take as well. Take a look at this MSDN blog post for all the specific details.
Related
This one is stumping me, as I've searched and searched through similar issue topic threads on this site but none of them are helping me resolve the issue.
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<link rel="stylesheet" type="text/css" href="./main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>© Mystwood Publishers Limited</p>
</body>
</html>
and the below CSS file code in my main.css file in the same directory as my HTML file (C:\HTML)
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
The text formatting works correctly when I open the code in IE, but not in Chrome or Firefox, what might I be missing about these two browsers that could be causing the issue?
Presentation (css) can appear different in different web browsers because each web browser has their own default and user configurable settings. You will always see differences between browsers because of differences in the default settings. eg. In the screen shot below using your sample code you can see that on my computer IE and other browsers display the page 'more or less' the same.
To make browsers display the same web pages 'more or less the same' you need to configure each of them with the same default settings for presentation (fonts, font sizes, color, background colors etc)
To debug rendering differences between browsers you need to use the DOM Explorer tab of the Dev tool in each browser(screen shot above) and compare the applied rules.
To help you further we would really need a screen shot from your computer, showing the browsers side by side. As you can see by the screen shot on my computer different browsers display the page 'more or less the same'. That's because I have configure all of my test browsers with the same user settings for presentation/accessibility (text size, zoom, color, background-color, font family, link and hover color etc).
The best way to test between browsers is to use https://www.browserstack.com/ because you are using virtual instances of vendors' browsers that have the 'factory' default settings. Comparing browsers on your own computer you should expect that the best result is that they will display the same web page "more or less the same", but not exactly the same.
To debug presentation, you need to use the DOM Explorer tab of your browsers dev tool.
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
</style>
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>© Mystwood Publishers Limited</p>
</body>
</html>
This also stumped me for a long time - Page looks okay in Edge\IE11 but not Chrome or Firefox. Eventually found there was nothing wrong with the HTML or CSS syntax. The fix was simple. The HTML file was encoded in UTF-16. I overwrote the file saving it as UTF-8. It now works fine in all four browsers.
Can anybody identify a solution for this.
IE10 is adding a border around table columns in the print out. They don't appear on the screen or the print preview but only when it's printed on paper or print-2-pdf. Additionly, it only happens when a border is applied that is 2px or larger. See my test code below.
<!DOCTYPE html>
<html><head>
<title>Sample</title>
</head>
<body>
<table style="border-collapse:collapse;table-layout:fixed;">
<tr>
<td style="border-bottom:2px solid black;">test</td>
</tr>
</table>
</body></html>
This will render this when printed to pdf. http://i.imgur.com/ttIdlPu.png
Thanks for all the help.
Are you only in standards mode? Try switching your Document Mode in Developer Tools (F12).
I have an asp.net web page. It has a fieldset to it.I visit this page in safari on my iPad. In portrait mode it is correct. As in, I can see the fieldset and functionality of page is also correct. I tilt the ipad to Landscape and the fieldset disappears.
Snapshot of how the page looks in POTRAIT MODE
When in landscape mode I noticed that the fieldset is present but very light. Here is a link for landscape mode.
Snapshot after moving it into LANDSCAPE mode.
If you look closely for landscape there is a faint line on "Filters" And "Customer Info Panel". How can i correct it to get the page to have the field set in both modes?
The code where I have fieldset is:
<table style="background-color:#EFEFEF; border-collapse: collapse; border-spacing: 0;width:100%">
<tr>
<td style="vertical-align:top; width:510px;">
<fieldset style="border:solid;border-color:brown;" onclick="">
<legend style="text-align: center">FILTERS</legend>
<table cellspacing="5" style="text-align: left; table-layout:fixed;" >
<tr>
.....
EDIT: This also happens on Chrome browser on iPad.
If you need more info,please let me know. Thanks
here the solution for tag fieldset:
<meta name="viewport" content="maximum-scale=1.0, user-scalable=no"/>
if you add other property (eg width=device-width, initial-scale=1.0) into content attribute it won't work properly..
Perhaps your problem can be solved by defining a viewport:
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0">
We are using web pages with no or old DOCTYPE as in an excerpt like this:
<html>
<head>
<title> TEST </title>
</head>
<body background="../images/dummy.gif" bgcolor="#FFFFFF" text="#000000" alink="#001080" link="#001080" vlink="#801080"
marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" >
<div id="mainbody">
<table width="980" border=0 cellpadding=0 cellspacing=0>
<tr>
<td height="20" align=left>
<font face="Arial" size=-1 color="#101010">
The quick brown fox jumped over the lazy dog
</td>
<td>
</tr>
</table>
</div>
</body>
</html>
On IE9 the text is a crisp Arial font, pretty much the way the system displays the font.
If I change the doctype to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
the font rendering changes sightly but noticeably, the font becoming a little more weight/bolder with less crispness (if you try this, save two versions of the demo html, one with the old and one with the new doctype). This happens regardless of zoom factor.
What would I have to do in regard to font tags or css styles to get the same rendering as before?
In “Standards Mode” (which you trigger with a standards-conforming doctype), IE 9 applies more advanced font rendering technologies than in Quirks Mode. There is no way to avoid this, except by staying in Quirks Mode. The modern rendering works generally better on modern display devices, but it affects text width a little, among other things, so it may ruin attempts at pixel-perfectness.
I have an html page which renders an html page in an iframe where my page adds a topbar to the whole content. Inorder to render the whole page seemless, I had to rely on quirksmode rendering of the page to display the following:(similar to the way google image results page(page u get on click of an image with a top frame)-
<table>
<tbody>
<tr>
<td>
<!-- Top bar content -->
</td>
</tr>
<tr>
<td>
<iframe src="http://anysite.com/"/>
</td>
</tr>
</tbody>
</table>
The problem here is that there are pages which donot render properly in quirks mode. So they do not come out properly in the iframe. How will I overcome this? Can I render just the iframe in standards mode while the whole page is rendered in quirks mode(which I cannot compromise) .
Is there an alternative solution?
Delayed answer... but if you use an object tag instead of an iframe tag, in IE it will change the rendering mode.
<html>
<head>
<title>Quirks mode + iframe test</title>
</head>
<body>
<object type="text/html" data="http://stevesspace.com/test/quirks/modern.html" style="width: 300px; height: 500px;"></object>
</body>
</html>
Unfortunately, in IE10 this doesn't work if the outer page renders in IE8 mode using
<META http-equiv=X-UA-Compatible content=IE=8>
Which I'm still searching for a solution to...
See also iframe not rendering in ie9 mode when containing page is in quirks mode
According to this article (http://css-tricks.com/ie-iframe-quirksmode/), a page in an iframe who's parent page is in quirks mode will also render in quirks mode.
According to the author there's nothing you can do except build your page sturdy enough to withstand the brokenness of quirks mode.