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.
I'm using a podsnack mp3 player. However, every page refresh, refreshes random numerical div ID codes such as id="cover#some-random-number#
So it'll show up like this
covercontainer80191
covercontainer36190
And so forth. What I wanted to do is a display:none to hide the cover side and just display the song titles instead. Is there a way to do this in the CSS?
The code I'm using is actually an <iframe/>.
<iframe style="border:none;margin-bottom: 5px" src="http://files.podsnack.com/iframe/embed.html?hash=ah3fblli&t=1369709402" width="425" height="320" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe>
If it's in an iframe I don't think there's much you can do with only CSS. It's a separate document and won't inherit styles from the parent document.
However, in your case you can do a little trick to accomplish your goals. Wrap the iframe in another element with overflow:hidden, then position the iframe in a way that hides the unwanted content:
<div>
<iframe></iframe>
</div>
You'll have to tweak the numbers here, but this seemed good for your case:
div {
overflow:hidden;
width:199px;
height:260px;
position:relative;
}
iframe {
position:absolute;
top:-43px;
left:-200px
}
Demo, with just the playlist displayed: http://jsfiddle.net/sxyXF/
However, the "cover side" also contains the play button, so there's no way to play the tracks.
If i'm understanding your question you want to hide all of these instances...if that's the case you can do this in your CSS to hide them
div[class~="covercontainer"]{
display:none;
}
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
I am able to get an svg to show just fine when I use
<img src="../images/jte.svg" alt="Logo">
however, when I try and display via css using the following:
html
<div class="logo2">
</div>
css
.logo2 {
background-image: url(jte.svg);
}
Nothing is being displayed. Any idea why this is happening? I have tried multiple different path options "('../images/jte.svg') ('jte.svg) no avail though.
Use a defined width and height for the element in question, or simply attach it to the body. For example:
body { background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')
I have an iframe on www.example.com that points to support.example.com (which is a CNAME to a foreign domain).
I automatically resize the height of my iframe so that the frame will not need any scrollbars to display the contained webpage.
On Firefox and IE this works great, there is no scrollbar since I use <iframe ... scrolling="no"></iframe>. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out).
How do I hide the scrollbar for webkit browsers?
I just ran into this problem, and discovered that the fix was to set overflow: hidden on the HTML tag of the page inside the iframe.
You can hide the scrollbars and maintain the scrolling functionality (by touchpad or scroll wheel, or touch and drag in a mobile phone or tablet, by using:
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
Obviously, you can change iframe to whatever fits your design, and you can add the equivalent -mozilla- property to get it work in firefox as well.
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.
It's a bit of a hack, but I solved this issue by wrapping the <iframe> in a <div>, setting the <div>'s height, width & overflow:hidden, then setting the <iframe>'s width & height to actually overflow the wrapping <div>.
<style>
div {height:100px;width:100px;overflow:hidden}
iframe {height:150px;width:150px;overflow:hidden}
</style>
<div>
<iframe src="foo.html" scrolling="no"></iframe>
</div>
I'm assuming you've tried this, but have you set scrolling to no on the iframe?
<iframe scrolling="no">
To get rid of the greyed out scroll bars, put "overflow: hidden;" on the body tag of the page being displayed in the Iframe e.g. <body style="overflow:hidden;"> This worked fine for me in Chrome 8.0.552.215 and I also had "overflow: hidden" on the Iframe itself
Does this help? Works on Chrome, IE, FF...
<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>
<body scroll="no">
<div id="test">content</div>
</body>
Can you set the overflow-y CSS property for the IFRAME to either visible or hidden?
check if the scroll is realy from the iframe, maybe it's from the HTML or BODY.
For scroll in iframe
<iframe scrolling="no">
In css
iframe { overflow:hidden; }
or
iframe { overflow-x:hidden; overflow-y:hidden}
I just solved it on my blog with scrolling="no" after the style tag.
eg:
iframe src="asdf.html" style="overflow: hidden;" scrolling="no"
I left the style attribute in there because it's more proper and it worked fine on Firefox.
Using Chrome 8.0.552.224 beta under Ubuntu 10.10 is showing still the ghost scrollbars on this site: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling. I tried all tricks what works in all browsers but not in WebKit based browser. Therefore the bug seems not to be fixed completely.
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
this works, none of the others seemed to work including the e.preventDefault() for touchstart.
Try this...
iframe { overflow:hidden; }
Setting the iframe's scrolling attribute to "no" should fix this, but there appears to be a bug in webkit: https://bugs.webkit.org/show_bug.cgi?id=29240
Tim's work-around ( Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar ) seems to fix the issue -- as long as you have the ability to edit the document contained by the iframe...
hide iframe scrolling in chrome put body tag like this
<body style="margin:0px; padding:0px; overflow:hidden;"></body>
Do not use scrolling tag at-all on the iframe and add the style as
style="overflow-x:hidden;overflow-y:auto;"
this will remove the horizontal scroll and it should work the other way round too.
<iframe> <body style="overflow-x: hidden"> </body> </iframe>
1.when you change iframe's scrolling yes or no, the iframe's scrollbar dosen't show immediately, you must refresh the iframe.
2.the html tap overflow in iframe colud influence the iframe's scrollbar
3.in the IE,you must clear iframe's src,then refresh iframe ,it will be work
4.so, show you the code
html
<iframe id="main_ifrm" class="main" frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>
javascript
var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
$(ifrm).prop("scrolling","no");
$(ifrm.contentWindow.document).find("html").css("overflow","hidden")
var src = $(ifrm).prop("src");
$(ifrm).prop("src","");
$(ifrm).prop("src",src);
}