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).
Related
I know the title of this post sounds strange, but it's exactly what's happening. While testing an email template with Email and Acid and Litmus I found that Outlook.com, in all browsers, was migrating styling from one DOM element to another. I thought at first it was an unescaped tag or other common issue with email, but that wasn't the case. I also thought it could be the button markup, which was pulled from Litmus's own Bullet Proof Buttons post. But after trying all four options, plus others I found online, it didn't make a difference.
To discreetly troubleshoot this I crafted an email template with only the bare minimum needed to reproduce the what's happening.
Email Template: https://codepen.io/anon/pen/bOQmzz
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width" name="viewport">
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<!-- BUTTON -->
<table>
<tbody>
<tr>
<td style="padding: 10px;">
<a style="background-color: #800080; border: 25px solid #EB7035;" href="#" >Button Label</a>
</td>
</tr>
</tbody>
</table>
<!-- TEXT -->
<table>
<tbody>
<tr>
<td style="padding: 50px;">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I sent a test email from Litmus to an Outlook.com account I have access to and pulled the actual markup it's generating. Here it is.
<table>
<tbody>
<tr>
<td style="padding:10px">Button Label</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="background-color:#800080; border:25px solid #EB7035; padding:50px">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
As you can see it's taking the styling from TD > A and applying it to the following TD. In the original email template I had, this happened multiple times throughout. See the examples below
Original Template: Each blue sections is broken
Testing Template: Outlook.com in multiple browsers
Testing Template: Examples of other email clients
This feels more like an Outlooks.com bug than an Outlook.com quirk. Can anyone explain what's happening and suggest ways to resolve this?
After writing this all up I realized it was also stripping the A tag. And that this was probably because it wasn't a resolvable URL. In the original template I had ESP codes {campaign-ID...etc} and it probably wasn't resolving those either. So it just stripped them for security reasons, cool. But then for some reason, it takes the styling of that A link, strips it, and applies it to an element further down in the DOM. WTF were they thinking!
Hope this saves someone else the trouble from having to go down the same rabbit hole.
tl;dr This is only an issue when testing links with unresolvable URLs as outlook removes them for security reasons, but then fumbles and applies the styling on the removed A link to another DOM element.
For some reason this little bit of HTML won't show up when I open the file in Chrome, or any other browser for that matter. The code is shown below:
<!DOCTYPE html>
<html>
<head>
<title>
#
<title>
<style>
</style>
</head>
<body>
<table>
<tr>
<tb>Home</tb>
<tb>About</tb>
<tb>Freelance</tb>
<tb>Contact</tb>
<tr>
</table>
</body>
</html>
With that, does anyone know how to make a better menu bar?
All of the other comments and answers are correct - there are multiple errors in the HTML you've posted.
However, any of those errors will still show SOMETHING on the page.
The error that is causing nothing to show up is simply that you haven't closed your <title> tag. You've got 2 opening tags rather than <title>#</title>
Corrected:
<html>
<head>
<title>#</title>
<style>
</style>
</head>
<body>
<table>
<tr>
<td>Home</td>
<td>About</td>
<td>Freelance</td>
<td>Contact</td>
<tr>
</table>
</body>
</html>
As #sideroxylon noticed, you did a major issue when you forgot to close <title> tag. After fixing it you should see all your content.
Additional points:
Your missing <html> surrounding tag.
You wrote <tb> instead of <td>.
You should also use indentation for more readable code.
From the comments, I can see three problems with your HTML:
You never closed your <title> tag (all credit to sideroxylon for that) so none of the other HTML will render outside of it.
You wrote <tb> instead of <td>, and <tb> isn't a valid HTML tag. It might function, but using invalid HTML tags is a very bad habit to get into.
You're missing <html> tags. You say that you have them in your actual code, so that's good, but when you post code, please post all of it.
As to a better way to make a header bar, it's probably a better idea to use an unordered list and CSS than a table. There are plenty of tutorials on how to do that -- a simple Google search brings up quite a few. Feel free to choose which is best for you. CSS tends to be easier to manage and customize, as well as producing better-looking results on the end-user's screen, once you get the hang of it.
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">
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.
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.