I have an unusual problem that's driving me crazy! I haven't found a question posted yet that pertains to this exact issue.
I have a page on my site where certain elements render incorrectly on random page loads. Using chrome for example, the page will render normally but after a number of refreshes a basic ul in the header will shift down into the body. Sometimes a carousel won't appear, or a navigation block will slide to the next row. I have duplicated this behavior on Firefox as well.
I can't really give a snippet of code for anyone to look at because I have no idea where the issue is originating from. The page with the issue is the index of www.Calibrus.com.
What's really amazing is that by using Chrome Dev Tools I can set display:none to the incorrect ul, then set display back to normal, and the ul renders where it should again. This suggests to me that the exact same html and css is somehow rendering differently (regardless of any scripts being used).
Also, this isn't an issue with the server. I have the same problem when running the code locally.
Does anyone have any idea whats going on here?
I believe the issue is tied to floats and the slideshow javascript.
Whenever I triggered the layout bug on the live site, it was accompanied by the first slide not rendering correctly. This would cause <div id="r1"> to have a height of 0 which in turn seems to aggravate the afore mentioned float bug. There seems to be some tension between the <ul> which is floated and the <a> which is not.
This is the solution that worked for me:
In index.html add a class (or ID if you prefer) to allow yourself to target the link within the CSS. In this example I have simply given it a class of logo:
<a class="logo" href="index.html">
<img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>
Then, in your CSS:
// target the link using your chosen selector
.logo {
display: block;
float: left;
}
Once I added those rules, I could no longer replicate the rendering bug.
Side note:
I would recommend declaring your character encoding just after the opening <head> tag with <meta charset="utf-8">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calibrus</title>
Also, the border attribute for images has become obsolete. So rather than:
<img src="images/Calibrus_logo.png" alt="logo" border="0">
Simply target the <img> with CSS and declare:
.logo img {
border: none;
}
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 project and having some trouble with IE7.
I've got that has an iframe that takes up the whole page and loads another page. Cut down, it looks something like this:
<html>
<head>
<title>Corporate Directory</title>
</head>
<body scroll="no" style="margin: 0;">
<iframe id="corpdir" height="100%" width="100%" frameborder="0" src="http://fullpath.to/corporate/directory" name="parent_frame">
</body>
</html>
Going to http://fullpath.to/corporate/directory works great in IE7, and there are no problems with rendering at all. But when it is loaded in the iframe like above, there are elements which get pushed to the left. All of these elements have a "margin-left" defined, but it seems like it's getting ignored. Not all elements with margin-left are being pushed over, just a few. I can't see anything in common about them that I could imagine would do this.
(Please don't ask why I was pretty much forced to load our webapp in a full screen iframe. Just accept that's it's pretty enterprisey and move on. Thanks.)
Fixed it like this:
<html>
<head>
<title>Corporate Directory</title>
</head>
<frameset>
<frame src="http://fullpath.to/corporate/directory">
</frameset>
</html>
Didn't even realize there was no reason to be using an iframe there.
I have a CSS class where I added a background image like this:
.my-class{
background-image: url(images/my-bg.png);
}
this applies fine and works properly in browsers, but when I see it in the iPad, the background image is not visible.
What could be the reason?
Without further information (i.e. how you're applying this class, and to which element), I can't help further. I can tell you however, that this snippet works just fine on desktop, iPhone and iPad:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.my-class{background-image: url(images/my-bg.png);}
</style>
</head>
<body class="my-class">
<p>Some content</p>
</body>
</html>
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I had this issue and finally after hours of apple bashing and toiling I made a div tag with an ID around my entire site. The iPad loves it :)
Problem solved.
CSS
<style type="text/css">
#bodybackground {
background:#999 url('http://mywebsite.com/images/background.jpg')
}
</style>
HTML
<div id="bodybackground">
entire site here
</div>
Add this meta tag to your page
<meta name = "viewport" content = "width = device-width, height = device-height"/>
I found that I was having the same problem, (ie: no background image shown on iPad specifically), the problem was the use of quotes, or lack thereof, when apostrophes were needed...
Problem (no apostrophes)
.my-class{background-image: url(images/my-bg.png);}
Fix (apostrophes added)
.my-class{background-image: url('images/my-bg.png');}
If you're saving the .png from photoshop, make sure you save it via 'save for web and devices' and select PNG24.
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);
}