Here's a description of the problem: for starters, I have a background logo image displaying on the webpage version (screen media) at the top of the page spanning the entire width of the page (basically a masthead).
Then I added a print stylesheet and have been hiding and showing certain parts to optimize the experience for users and their printers .
However, and here's the problem, I noticed that on IE in every page of the print preview the logo image is being added to the top of every page in the print out when the page content is enough for more than one page in the total number of pages. So if there's enough content for 3 pages then in all those three pages the logo image appears at the top every page in the print out, when it should only appear in the 1st one.
I've checked my CSS and I can't find whats going on. I don't have the section that contains the CSS class that defines the background image repeated more than once. This only happens on IE. Not on Chrome nor Firefox.
Here's an excerpt of the HTML:
....
<body>
<div class="repeating-bg-img">
<div class="container">
...
<!-- /.inner content that is long enough for more than one page -->
...
</div><!-- /.container -->
</div><!-- /.repeating-bg-img -->
</body>
</html>
and here's an excerpt of the CSS in the print.css stylesheet with media = print :
.repeating-bg-img {
background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}
Has anyone encountered this before on IE? If so, do you have a fix for this?
I ran into the same problem today. One solution is a structure like this:
<body>
<div id="background" style="position: relative;">
<img src="bkgnd.png" style="position: absolute; z-index: -1;">
<div class="container" ...>
...
</div>
</div>
</body>
The basic idea is to take the image out of the flow but position it relative to its containing <div>. The z-index pushes it behind other elements. So this can be used as any kind of column header.
One upside to this is that the background image will print even if the "background images" option isn't set in the print dialog. I'd like to see a proper solution as well though.
Edit 2013/07/23:
It looks like the CSS3 property will be box-decoration-break. This isn't going to help with older versions of IE but the spec is available here: http://www.w3.org/TR/css3-background/#box-decoration-break
If what you really want is a masthead, I also thought this might work:
#media print {
div#background { background: none; }
#page :first { background: url('bkgnd.png') center no-repeat;
margin: ...; }
}
But it looks like that is CSS3 as well. Chrome loads the image from the server but only honors the 'margin' attribute; Firefox and IE9 seem to ignore all of it.
Related
My website is www.rosstheexplorer.com.
The FB widget was to big for my widget area so I used the below code to adjust the width of the two sections of my page.
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
I also modified the Penscratch theme so the custom header and navigation menu extend across the whole page.
An unintended consequence of all these changes is now when I zoom out on my website there is a massive imbalance of white space on both sides of my site.
I want to try and center align the content - area and widget - area.
I have not tried any possible solutions because I have been unable to find any information on Google to point me vaguely in the right direction. All the information I found on Google was related to other themes or just related to centering individual pictures, text and headers.
Update -
I tried one suggestion below. Now my code looks like this -
<div class="full-screen-template">
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
</div>
#page {
margin: 0 auto;
}
<div class="mobile-template">
#primary.content-area {float: left;width: 100%;}
.widget-area{float:right;width:100%;}
</div>
Unfortunately it has not seemed to solve my problem.
Try this to center align the content and widget area:
#page {
margin: 0 auto;
}
UPDATE:
I think the reason it doesn't work is that you have HTML code inside .css file:
<div class="full-screen-template">
....
</div>
This probably stops the browser to go any further, so it never reaches the #page line.
I'm not sure what you try to achieve with HTML in css file but try to remove it to see if it fixes the issue.
I am making a tumblr theme which will have a pretty large image in the background (approx. 2000x1600px). However I need the page's content, the tumblr posts, to load relatively quickly. Which of these options would be faster?
<style>
body {background-image: "background.png"}
</style>
<body>
<div id="content">
/* tumblr posts go here */
</div>
</body>
or
<style>
img {z-index: 0}
</style>
<body>
<div id="content">
/* tumblr posts go here */
</div>
<img src="background.png">
</body>
The two don't really differ from one another.
If you open up Chrome Dev Tools and take a look in the Network Tab, the load times will be the same because the size of the image remains as is.
However, what you can do here, is leverage the power of CSS along with some Javascript. Apply the background image to a class, say .with-background, and then with some jQuery:
$(window).load(function(){
$('body').addClass('with-background');
});
This way, when everything else on the page (including other images, thus the listener on 'window.load') is loaded, apply this class, which will then load up the background image.
As a simple sidenote, if you don't want your body to remain blank while the content loads, what you can do is take that huge image, downscale it, and blur it (in Photoshop or other image editing software). That way "something resembling that image is back there" - all the while being very small in Kb. In turn, when the class is applied, you'll get your full-sized image.
Check out posts with images on medium.com - they do a similar thing. It is a design choice, more than anything else.
I'm printing fixed size index cards as 'DIV'. Two fit side by side on A4 with float=left. Works fine for the first seven pages, then on page eight, switches to single column. So I tried float=right and that works fine as well, except that on each page, the output shifts a little to the left and (you guessed) after eight pages, single 'column' again. Note that within each page, the DIVs all line up... they just move on successive pages. Can't show the HTML 'cos it is generated by Javascript.
The relevant CSS looks like this
#media print {
.card {
float: left;
width: 85.6mm;
height: 54mm;
page-break-inside: avoid;
}
}
The generated HTML looks something like this
<div class="card">
<h2>name</h2>
lines of stuff<br />
</div>
<div ...
</div>
and so on.
It would seem that the right margin is being increased with each new page.
I'm running Firefox and Ubuntu. Anyone encountered anything like this. Bug in Firefox ?
If text is positioned off display, is there any way to convince browsers to copy text only visible on the screen when user selects text using ctrl-a or select all. In the example that follows, I don't want to copy text for the absolute positioned div.
<html>
<body>
<div style="position:absolute;top:30;left:-300">This should not be copied</div>
<div>Only this should be copied</div>
</body>
</html>
Some more information:
Ideally I am looking for solution for webkit/gtk, but this applies to firefox/chrome as well. Both browsers exhibit same behavior.
I don't control the page getting displayed. Page is displayed in webkit window for automated tool which tries to analyse contents of the page. Part of the algorithm looks at the text available by select all/copy
I have access to full API webkit/gtk exposes.
Why not just do display: none; instead of moving it to the left?
<html>
<body>
<div style="display: none;">This should not be copied</div>
<div>Only this should be copied</div>
</body>
</html>
I see no reason why you need to move it off the screen.
User can always use firebug to copy whatever they want.
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements