According the "validator w3c", the scrolling attribute on the iframe element is obsolete. It means that for iFrame there is a Scrolling="no" CSS equivalent.
I have tried:
Overflow: hidden; but without success.
Here an example with:
1)Scrolling="no" (it works fine)
but w3c it does complain
2)Scrolling="no" CSS equivalent, (it doesn't work because it shows the scroll)
scroll: 'no'
Is not a valid CSS attribute.
IE is known to have problems with iFrames and the CSS overflow attribute.
Check out this page for a workaround : http://www.webmasterworld.com/html/3113793.htm
Or this one : http://www.codingforums.com/showthread.php?t=107457
Really, the best solution here is to use scrolling="no" inside of your iFrame tag. It's true that it doesn't meet the W3 standards - but no customer is going to run away from your site because it has W3 standards problems. The average person has no idea what a web standard even is, let alone W3.
below javascript worked for me in FF,chrome and IE
var el = document.getElementById("iframeid")
el.scrolling = "no"; //FF & Chrome
el.contentWindow.document.documentElement.style.overflow="hidden"; //IE
Related
I want to make scrollbar that overlaps the page. I wonder if there is a way to do it with pure CSS. I read an article about styling scrollbars with CSS (https://css-tricks.com/custom-scrollbars-in-webkit) but I didn't get a result I wanted. I think it would be possible to do it with some JavaScript and HTML element with fixed position, but I prefer to do it with CSS.
I have this same requirement in my project.
Here is the solution:
overflow: overlay
Hope it helps
As Anugraha Acharya said, the only CSS option is:
overflow: overlay;
But it is worth noting that this has been deprecated, so there is no telling how long it will work in Chromium / Webkit.
It is not supported in Firefox so, you will have to do the following to ensure Firefox can scroll too:
overflow: scroll;
overflow: overlay;
With this, Firefox will render like the "Normal" diagram in the original post and Chromium will render like "how I want scroll to look". Also, if Chromium ever drops it it will still be usable.
This currently works as of January 2022.
I believe, by deprecated, Mozilla means that it was never officially added rather than it was considered and has now been dropped. So, hopefully, it will be considered and made official. In the meantime, you take your own risk.
You can try changing the background of the Scrollbar to transparent-
::-webkit-scrollbar-track {background: transparent}
I am not sure if this is an issue with the Blogger template that I'm hacking up, or if I'm just forgetting a simple CSS property.
I'm working on a template for a friend, and am attempting to show the logo on the top right above the menubar div, and it works just fine in Firefox and Chrome, however it renders behind the div in IE9.
Here is the link to the demo:
Demo blog
Essentially, what I've done is created an absolutely positioned div, with an inside image:
<div id="logo2">
<a href="">
<img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
</a>
</div>
and the associated CSS:
#logo2 {
position:absolute;
top: -25px;
right: -50px;
z-index: 999;
}
I'd thought that the combination of an absolute position, plus the high Z-index would overcome any issues with IE's handling of the z-index, however I was wrong.
I've also tried adding in a position (relative) and z-index (1) for the menubar div, to no avail.
Per #Dubious' suggestion, I added the following without success (the image is still clipped):
.tabs-outer, .tabs-inner {
<!-- [if ie 9]>
z-index: -1;
<![endif]>
position: relative;
}
Old Answer "Try adding a z-index of -1 instead of 1 to your menubar div"
Edit:
Okay, after doing some fiddling around in IE9 Developer Tools I noticed that your source code was telling IE to render the page in Document Mode: IE7 Standards. As you can see, after opening dev tools (and making sure the dev tools frame is active) you can press alt + 9 to render the css as it should be rendered in IE9. After this occurs, the content displays just as it should in any current browser.
So why is the page loading with IE7 Document Standards? Well you need to use correct standards-compliant !DOCTYPE directives for each of your pages. To do this just read up on this page and make sure that your html files follow the very first example.
Conditional Comments
I should have given you a better example of IE conditional comments, so I will go a little more in depth here. An IE conditional comment can ONLY be defined in html as it uses <!--> which is html specific code. Therefore, in order to add ie7/ie9/ie specific css you would need to <link> a new stylesheet inside the comment field that would have ie specific code. Further reading here. Also note, that since this issue you are experiencing is because the page is rendering IE7 quirks mode css, you might need to use an ie7 comment as opposed to ie9.
I really hope this solves your problem, good luck!
I am trying to remove the iframes scrollbars and frameborder. I cannot use frameborder=0 and scrolling=no since they are no longer supported in HTML5. The seamless attribute throws a warning stating it isn't yet implemented according to the W3C Validator. I found a page online that said to use overflow:hidden to remove the scrolling, however it is not removing the scrollbars, at least in my google chrome. I haven't checked other browsers. Also the frameborder is still there, even though I used border:none. I also was trying to set the width and height of the iframe using css, however it didnt want to listen. Here is my current code:
#vidframe
{
width: 577px;
height: 358px;
overflow: hidden;
border: none;
}
<iframe name="videoframe" id="vidframe" src="video1.html"></iframe>
Yeah, I easily could add width=xxx height=xxx into the iframe tag, but my understanding that with HTML5 the goal is to get AS MUCH of the coding into CSS as possible... So shouldn't I be able to set the iframes width and height in the stylesheet? Again, overflow hidded didnt remove the scrollbars... and border: none didnt remove the borders...
The solution was to add overflow:hidden in the css of the file that was being loaded into the iframe. If the document is not something you can control the source code of, then use javascript to appent the overflow hidden attribute to it's body.
Remove iframe border and scroll bar using javascript,see the following link...
How to remove border from iframe in IE using javascript
I am creating a template for a website.
The example is at Framework Login Page
The main CSS sheet is at: master.css
I am trying to center the main parent div.
I am using
#body {
width: 100%;
background: url('pathtoimage.png');
}
#inner_body{
width: 800px;
margin: auto;
}
<body>
<div id="body">
<div id="inner_body"></div>
</div>
</body>
What could the issue be?
This is a (very) old IE bug.
Fortunately, it's been fixed since IE 6, but you do need to have a proper doctype on your page to cause IE to use "standards" rendering mode and respect your margin: auto style. On a page without a doctype, IE instead uses "quirks" mode, which falls back to old, non-standard behavior.
Quirksmode has a good page on doctypes and standards mode that explains why you want to make sure your pages have a correct doctype, including some nice tables spelling out what each browser will do differently in quirks and standards mode.
Set the CSS for your "body" div to include:
text-align: center;
And remove any text-aligns you may have on the "inner_body" div, it should inherit from body.
Here is the explanation why you should use the correct doctype.
Use the correct DOCTYPE ( Document Type Definition, or
DTD)
This defines which version of HTML or XHTML your document
is actually using. It's needed by browsers or other tools
to process the document correctly.
Using an incomplete, outdated or no DOCTYPE at all, throws
some browsers into “Quirks” mode, where the browser assumes
you’ve written old-fashioned, invalid markup.
This means that your web pages may not render well in all
the major browsers.
I am having issues embedding SVG into a webpage. I have found the simplest method to just use an image tag. For example:
<img src="my_graphic.svg" height="100"/>
Works in web-kit. I do not need to explicitly set the width and the browser will maintain the aspect ratio. Very nice!
This doesn't work in Firefox though - it's not cross browser. So how about embedding as an object?
<object type="image/svg+xml"
height="100"
width="554"
data="my_graphic.svgz">
<span/></object>
This time I'm using svgz and the mime type has been added and voila! It works in both firefox and webkit. However, in webkit I need to explicitly state the width or we get some nasty containing element scrollbars. But what's worse is the background is no longer transparent. It's rendered with a white background.
So one method works perfectly in webkit. The other works perfectly in mozilla. What can I do to get it working reliably in both?
Interested in a demonstration of this? See my link for reference:
http://sumocreations.com/demo/svg/new_dttg.html
I don't believe it's currently possible for the <object> to have a transparent background in WebKit. There's a bug filed for this problem. I don't know of a workaround.
The only work around I found was by detecting whether an img utilizing an SVG source is rendered properly. I do this by only specifying one dimension. Either the height or the width but not both. I can then test if the alternate dimension is greater than zero. If it is I hide the the object. If not I hide the image. Here is how to do it with jQuery:
<script type="text/javascript">
$(document).ready( function() {
if($('img.logo').width() < 1) {
$('img.logo').hide(); $('object.logo').show();
} else {
$('img.logo').show(); $('object.logo').hide();
}
});
</script>
See the demonstration: http://sumocreations.com/demo/svg/new_dttg.html
Place an <img> tag inside your object.
The object will render in firefox, and webkit should show the <img> tag.
Edit:
Also, what's up with the self closed span tag? <span> does not support self closing.