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.
Related
I am trying to set the left and top css properties for a span element. This works fine in HTML4 page but has issues on HTML5 page. The code has been posted on jsfiddle https://jsfiddle.net/arunn/pxxgtnqf/ which shows the behaviour in HTML5 page. I am posting the code here for HTML4 behaviour.
<!DOCTYPE>
<html>
<body>
<span id='hello' style='position:absolute;top:100px;'>hello</span>
</body>
<script type="text/javascript">
document.getElementById("hello").style.left = 100;
document.getElementById("hello").style.top = 100;
</script>
</html>
Make your left and top values a string including a measurment type like "px".
document.getElementById("hello").style.left="100px";
document.getElementById("hello").style.top="100px";
Your fiddle updated
I have text boxes that specify with inline CSS that their width should be 200px
<input type="text" name="xxx" value="yyy" style="width: 200px;" />
IE 10 presents them as below (highlighted where text is cut off)
As soon as that textbox receives focus, all the text becomes visible (and then after it has lost focus again, the text remains visible)
Anybody have the same problem and manage to fix this?
I'm 99% sure this has something to do with the "clear button" in ie10.
When a textbox gets focus in ie10 a little "x" appears on the right side that allows you to clear the text.
You can remove the x by adding this to the stylesheet
::-ms-clear {
display: none;
}
Chances are there is something messing with the style of the clear button. I would suggest adding the style I pasted above and see if that fixes your issue.
Here's a fiddle that kinda replicates your issue (with bad css)
http://jsfiddle.net/qDTWw/3/
Here's a fiddle with the fix
http://jsfiddle.net/qDTWw/4/
I am getting the same in a password box in ie10
This workaround seems to work for me ...
$('.password').blur(function () {
//work around for ie10 clipping text
$(this).val($(this).val());
});
*This isn't a true "answer", because I haven't solved it, but am posting here with additional information that won't fit into a comment very well. I have this same problem, and am hoping this helps someone else figure it out.
This jsfiddle is one way to reproduce the problem:
http://jsfiddle.net/tj_vantoll/2NGEQ/2/
Apparently, this was reported to Microsoft:
https://connect.microsoft.com/IE/feedback/details/767602/input-text-boxes-clipped-when-a-font-size-is-applied-to-a-parent-element#details
There is a reference to a reply from someone at Microsoft here:
http://bugs.jqueryui.com/ticket/8677
From Tony Ross (Microsoft):
Unfortunately I don’t think this will make our bar for a patch update since the issue automatically resolves itself when the user interacts with the control, but I’ll definitely make sure it stays on our radar for the next release.
As for code-based workarounds, there are various ways you can poke the input element itself to get it to it to update if you so desire (updating the value, changing the width of the element inline, assigning the width inline to begin with, etc).....
Posting code from jsfiddle because I have to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by tj_vantoll</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
input { width: 150px; }
form.on input { font-size: 1em; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('button').on('click', function(event) {
$('form').addClass('on');
});
});//]]>
</script>
</head>
<body>
<form>
<input type="text" value="Whatever" />
</form>
<button>Break It</button>
</body>
</html
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 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;
}
I want to display a google map in IFrame with scrollbar.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
A website
<br />
<iframe src="http://parkall.hu/teszt/parkolok/index.html"
style="overflow: scroll; width: 540px; height: 630px;"></iframe>
</body>
</html>
It works in the latest firefox (v17), but not in Chrome (v23), strangely enough Chrome displays scrollbars for a moment and hides after that. The scrollbar is still useable if you find out to grab an invisible thing....
Have you ever noticed this? Maybe it can be solved with a CSS but i was unable to find out, the scrolling="yes" attribute is not supported in HTML5. And of course if I change scr to wikipedia.org it displays scroll bar.
There is a decent chance that google maps tries to disable the scrollbar from its iframe with javascript. In that case you will need some javascript of your own to counter that a few seconds after pageload (by using setTimeout()).
What you need to change in your setTimeout depends on what is happening that hides the scrollbars. Since the example is not complete, I can't determine what happens exactly.
Please put your code in jsfiddle.net and reply with the link so we can check the exact problem.