The problem is this - in Chrome, this page is saved as PDF correctly on one computer, and have issues on another.
I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
margin:0; padding:0;
}
.fullscreen
{
width:1156px;
height:893px;
float:left;
background:url(2.jpg) no-repeat;
}
.firstpage{background:url(1.jpg) no-repeat;}
.lastpage{background:url(3.jpg) no-repeat;}
#media print {
body {
width:1156;
height:893;
}
}
</style>
</head>
<body>
<div class="fullscreen firstpage"></div>
<div class="fullscreen"></div>
<div class="fullscreen lastpage"></div>
</body>
</html>
It's just 3 div's with 3 different background images (same size - 1156x893). On my home computer, everything is ok. There's no difference if I place #page{size:1156 893;} or size:auto, or (as in this case) I don't place it at all.
The problem is on my office computer, where no matter what I do, the size of the page in printing mode is always 1286x909, and the content is zoomed and goes out of the page. Am I missing something here or the problem is not in the page code at all? And if it's not in the code, where do I have to change something to make it right? If necessary, I can provide the 2 PDF files as well.
I'm using Windows 7 with last version of Chrome on both computers.
You need to implement a full css style for printing.
The code you wrote for printing is just for the body.
#media print {
body {
width:1156;
height:893;
}
}
Due to the absence of that css style, the browser is taking default values for the pdf. So it would be better if you create a whole css style for
You can check at this post to know how to do that.
https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
Please, let me know if that worked out for you :)
Related
I don't really know how to approach this. I need to send some emails, with some design.
In my email.html.haml i have
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
:css
#backgroundTable {
border-left: 1px solid #FFFFFF;
/ background: #FFFFFF url("\#{root_path + asset_path('page-bg.gif')}");
background-image: url('../assets/page-bg.gif')
}
...
I tryied both versions, but none seem to work. Chrome's developer console doesn't report any errors, like it does when i miss something in the image name or similar.
I have multiple images from css and html img tags, but the ones from css work.
Thanks
CSS for HTML emails must be inline, and many email clients cannot display all CSS entities.
MailChimp has a tool to help bring your CSS inline - http://beaker.mailchimp.com/inline-css
And Campaign Monitor has this great list of CSS elements and where they are supported - http://www.campaignmonitor.com/css/
I have been working on a tab menu without adding the doctype statement. It works perfectly in my eyes but when I do place the <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> or any other type of Doctype, my layout completely messes up. Below are three pictures which describe
1.) Expanded Window (without doctype)
2.) Contracted Window (without doctype)
3.) Contracted Window (WITH doctype)
I'm using the :after pseudo to place the right side of the "sliding door" with the code snippet:
#nav li:after {
width:10px;
content:"";
background: url('tabRight.png');
position:absolute;
height:100%;
top:0;
right:-10;
}
I'm pretty new to web development so I have no idea what could be causing this. Any help at this point would be appreciated. Thanks!
HTML:
<div id="nav">
<ul>
<li id="dead">
<a href='javascript: toggle()'>
<div script="padding-left:5px;">
<img class="navImg" src="dead32.png" />
<p class="navTxt">Deadlines</p>
</div>
</a>
</li>
<li> About</li>
<li> Address</li>
</ul>
</div>
EDIT:
The right:-10; is causing the problem. If I set right:0; The layout is restored, however then this makes the "sliding doors" not work for me. The transparent edge from the right sliding door shows the grey background when it overlaps the left sliding door, which is not what I want.
No doctype == quirks mode. The layout behavior in the quirks/strict modes at times differs drastically.
IF you have written your code and css without adding DOCTYPE in you header. It means by default your browser is in quirks mode that means browser dont know how to render the elements. It is always necessary to add doctype in header because some browser like IE will messup your entire layout.
My suggestion is to add doctype transitional and start the code/css, this will be suitable for you and it will always helpful to solve browser compatibility issues.
Here is example by default dream weaver is creating when you create new HTML template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
The Document Type Definition defines how certain tags have to be interpreted by the browser. XHTML as a XML-based markup language is very strict and requires you to open and close your tags appropriately (also it is case-sensitive).
Probably your website doesn't follow the strict DTD rules, hence the differences in display.
As per my comment, I would recommend adding a Strict DTD (as you always should anyway) and code against that. Also, using a CSS reset selector is always a good rule of thumb
*{
margin: 0;
padding: 0;
}
I looked around and decided to use a CSS approach rather than rely on JS... I figure the kind of corporate users stuck with IE6 might also have JS disabled by IT departments.
So In my HTML I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css"><![endif]-->
</head>
<body>
<img src="media/logo.png"/>
</body>
Then my ie6.css consists simply of:
img
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
However none of this makes the slightest difference, no transparency. I commented out all the rest of the page so it is literally that one and still no luck. I removed the default.css stylesheet and still no difference.
EDIT:
I now got it working, using the .htc method, loading that file in a conditional IE6 test block. It turned out the problem I was having was that Windows 7 had 'locked' the file (I don't even know what this means) and this blocked IE from loading/using it.
If I'm not mistaken, you must use
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png')
for every and each image, you can't make it just work for all images.
I am using the solution of following page: IE PNG support
Following the online demonstration online demonstration step by step, your pngs will be transparent also in IE.
In the HTML page you have the path to the image relative to the HTML file (media/logo.png) in the default.css you have an entry with behavior: url(iepngfix.htc); (path to the iepngfix.htc is relative to the HTML file) and in the ie6.css you have an entry with filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='media/logo.png', sizingMethod='scale'); with the path to the image relative to the CSS file. And at least you need to change the path in the iepngfix.htc (IEPNGFix.blankImg = 'media/blank.gif';)
You need to have following folder structure:
HTML file
iepngfix.htc
ie6.css
default.css
/media/logo.png
/media/blank.gif
You would probably like to take a look at http://www.dillerdesign.com/experiment/DD_belatedPNG/
It also allows you to use pngs with alpha-channel with CSS background-position property, which you can't usually, when using AlphaImageLoader.
Are unused CSS images downloaded by the browser or ignored?
Eg. in CSS rules which don't match any elements.
.nothingHasThisClass{background:url(hugefile.png);}
Or would this be browser-dependant?
This would be browser dependent, since it's how they decide to implement the spec, however in a quick test here:
Chrome: Doesn't
FireFox: Doesn't
Safari: Doesn't
IE8: Doesn't
IE7: Doesn't
IE6: Unknown (Can someone test and comment?)
No, they are not downloaded, not at least in Firefox, IE8 and Chrome.
An easy way to test this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nonexistent {
background: url('index.php?foo');
}
</style>
</head>
<body>
<?php if(isset($_GET['foo'])) {
file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
</body>
</html>
If test.txt is populated with the browser's user agent, then the image is downloaded. This was not the case in any of my tests.
A quick test proved it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"><!--
.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}
--></style>
</head><body>
<div class="hassomething"></div>
</body></html>
The 2nd image, tumblr_kxytwr7YzH1qajh4xo1_500.png, was downloaded but not the other one. This was proven true in Chrome (Developer tools) and Firefox (Firebug).
Firefox and Chrome (Ubuntu 9.10) don't download images for classes/ids that aren't applied in the DOM.
This may be both platform and browser dependant, though.
Sometimes, it depends just exactly what "unused" means. Different browsers define it differently. For example, in Firefox, styles applied to the <noscript> tag are deemed "unused" and thusly, any images won't be downloaded.
Chrome 26 (possibly all of them, not sure), does download CSS images if they are applied to the <noscript> element, even when JS is enabled. (It isn't immediately clear to me why though, perhaps this is a bug?).
It does not download CSS images applied to elements within the <noscript> element, though. (this is expected behaviour, of course).
Example:
CSS:
noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }
HTML:
<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome. Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>
In this case, if the user has JS-enabled, both always.png and otherbg.png are downloaded in Chrome. If the user does not have JS enabled, then only nojsonly.png is downloaded in Chrome.
I use this technique for measuring traffic-levels from non-JS-enabled users, as Google Analytics fails us here. I prefer using the background CSS image rather than a normal <img...> tag, because I'm working under the (untested) theory that bots are less likely to grab a CSS image than a <img...> image, leaving more accurate counts for the human-visitors.
Almost all browsers do lazy-loading. If an image is not required, it does not download. Use firebug (add-on in Firefox/Chrome) to see load time for resources.
Interestingly, though, Chrome (at least) will download unused.png in the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.unused {
background: url(unused.png) no-repeat;
}
.used {
background: url(used.png);
}
</style>
</head>
<body>
<div class="unused used">
hello world
</div>
</body>
</html>
I want to fit my website in IE .I want to know how i give the name of css selector in IE like firefox.Please help me!
i did'nt undersatnd your question "name of css selector in IE",but if you have to assign the css on selector p use like (<p>hello everyone</p>) this
p {
border:1px solid red;
font-size:24px;
}
always call your ie css file AFTER any other css so it overwrites any previous methods.
if you're still having problems, you can force a css definition to take priority with !important.
Without important, the div background would be blue, because that's the last declaration made
#mydiv{
background-color:green;
}
#mydiv{
background-color:blue;
}
now, using !important, you can force priority. the background will be green regardless of the order of declaration:
#mydiv{
background-color:green !important;
}
#mydiv{
background-color:blue;
}
if you're looking for css hacks for IE (not recommended, though sometimes essential), you can get more information from this excellent article.
hope this helps!
There is nothing wrong with the CSS code that you have shown so far, so repeating it in a style sheet specific for IE will not make any difference at all.
Generally you don't need a separate style sheet for IE. There are some rendering bugs in IE that you may have to circumvent, but that can almost always be done by tweaking the current CSS and HTML.
To find out what you need to do to make it work in IE, you should try to find the reasons for the differences. Most CSS is exactly the same, so if you don't see the effect in the page it's usually because the element is not where you think it is or doesn't have the size that you think it has. If for example the height of an element is zero, you will obviously not see it's background color.
First make sure that the page has a proper doctype, so that it doesn't render in quirks mode. This is important to make it work as close to the standards as possible in IE.
Open the error console in Firefox and view the page. It will tell you if you have any errors in the CSS code. There are standards for how to render correct code, but there is no standards for how to handle incorrect code, so if you have any errors you will get widely different results between browsers.
The plugin FireBug in Firefox is useful for seeing exactly which styles affect each element in the page, and you can even edit the CSS and see the result immediately. There is a similar tool built into IE 8 called Developer Tools. For IE 7 you can install Developer Toolbar that gives you some of this functionality. Each tool will allow you to select an element in the code and shows you exactly where it is on the page.
To fix your website in firefox and IE you can use the below methods.
Method 1:
You can use the "if condition" that you have used. You need to mention the version of IE in the if statement. See the code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browser Detection Example</title>
<style type="text/css">
body{ background:blue}
</style>
<!--[if IE 6]> <!-- for ie 6 browser -->
<style type="text/css">
body{ background:red}
</style>
<![endif]-->
<!--[if IE 7]> <!-- for ie 7 browser -->
<style type="text/css">
body{ background:red}
</style>
<![endif]-->
</head>
<body>
</body>
</html>
Method 2:
You can use the css hack inside the css code itself. No need to use a separate css file. You can code in the same css. See the example below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{ background:blue; _background:orange;}
</style>
</head>
<body>
</body>
</html>
Note : prefix "_" before the css code it will get render in ie6...
Check out !!!
regards,
Logesh Paul