background-image:url(yellow.jpg);
background-size:180px 180px;
background-repeat:no-repeat;
The above mentioned css works perfect on chrome but ie9 is unable to scale images + display images correctly
Are you sure your IE runs in IE9 mode? Your code works with any image I tried.
(F12 to open developer window)
I think the issue is based on scaling the image to the proper size. Have you tried this?
background:url(yellow.jpg) 0 0 / 180px 180px no-repeat fixed;
Basically what it does is:
background:background-image background-position(top) background-position(left) / background-size(height) background-size(width) background-repeat background-attachment;
That should work with IE9 (and all other modern browsers out there) ...
IE will open a page without the doctype tag in quirks mode in which background-size does nothing. To force IE to open the page in IE9 mode add <!doctype html> at the top of each html document.
Related
I have this CSS code:
body {
background-image: url("url");
background-repeat: no-repeat;
background-size: 100%;
} on content {width: 80%;}
Works fine on Chrome and recent IE, but breaks older IE. In the error case, the image does not go the full width of browser and thus shows up only on the left while the right side becomes blank. Appreciate your help.
It sounds like it's time to break out the conditional tags for shotty IE browsers.
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
My favorite is adding a unique style sheet for legacy browsers this chap covers it well.
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Good luck. Hope this helps you out.
My website appears different in firefox compared to chrome or safari, the logo image at the top of the page is placed higher towards the top of the page.
I have tried using vertical-align but had no luck. Any suggestions? (page is institute101.com)
header .logo img.standard {
display: none;
vertical-align: middle;
}
The page is even more messed up in IE, is there a general rule I should keep in mind when making a page compatible for all browsers?
The difference in layout is because Firefox is not honouring the 30px padding on your body element. Firefox seems to be ignoring that.
The problem is highly likely to be the dreaded Quirks Mode.
Many browsers will put the page into quirks mode if the site does not begin with a valid Doctype. The problem with quirks mode is that it works differently in different browsers.
Your page does have a doctype, but importantly, it is not the first thing in the page, and that is why it is going into quirks mode -- you have some rogue CSS and javascript tags before it; these need to be moved into the <head> section of your page.
Fixing this will definitely solve the problem as far as IE is concerned. It will probably solve the problem for Firefox.
Hope that helps.
The problem comes from this css file:
Last row of this file is:
body { margin:0; padding:30px 0 0; }
if you delete the padding you'll have the same appearance with Firefox.
I have this "web-site" -> http://www.krlja-ustvari.hr
It works 'perfect' in Google Chrome. By 'perfect' I mean that content is always 100% width and 100% height, overflown stuff is hidden and line breaks are made without <br /> tags. That's exactly what I need.
However, when I look at the same page in Firefox or Internet Explorer (didn't check with other browsers) I can see vertical scroll bar. That's exactly what I don't want.
My question is simple: how to make this page render in all browsers like in Google Chrome?
Thank you very much for any help!
if you do not need scrollbars in the body/document at all
<style type="text/css">
body { overflow:hidden; }
</style>
I believe that if you change the min-height:100% declaration on #content to just height:100%, you should be fine in those other browsers.
That worked when I edited your page in Firebug for FF.
I used "320andup" in order to make my first real responsive website. I managed to have a perfect adaptive environment except only one thing. The background image in Chrome and Safari is pushed down 18px. I can't explain why. Only thing I know is that when i add in the body tag "background-attachment: fixed;" the problem is solved but when I scroll I get an ugly experience that I don't want to have. I also tried this
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-image: url(../img/chrome-safari-img.gif);
}
}
with IE to completely break.
Firefox, Opera and IE8 are ok. Only problem is Chrome and Safari.
You can see exactly whats the problem and investigate the code in my localhost website -> http://www.demo.lollypop.gr/ffloor
I would like to avoid detecting chrome with PHP.
Just add position:absolute; in your body tag.
I'm using the HTML5 elements and in a project i'm working on and the css seems to be working fine in Chrome. However, it doesn't appear to be working in Safari or Firefox (I haven't tested IE, but I'd imagine it's the same), and the page layout is all over the place.
Any ideas why this may be? I know Firefox and Safari both support these elements, and Safari is webkit-based like Chrome, so I can't figure out what the problem is.
You can see the webpage here. {website link not available}
Safari and Firefox have the same level of ‘support’ for HTML5 sectioning elements (after seeing your demo page, I’m guessing these are the elements you’re talking about): they can be styled, but you have to set display: block; implicitly.
aside, article, section { display: block; }
Adding this rule to your CSS will solve the problem.
To make these elements stylable in IE, you just need to use the HTML5 shim/shiv. Put the following HTML in your <head>:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Which part isn't working exactly? The <canvas> element appears to be rendering correctly, your <article> container isn't being ignored.
I'm in FF3.6.2, btw. The only CSS errors I see are just that: CSS errors.
I had a problem with "figure" element, not showing background image. so i overcome the problem with this...
background-image:url("../img/login_bg.jpg");
background-position:center center ;
background-repeat:no-repeat;
background-size:cover;
This didn't work...
background: rgba(0, 0, 0, 0) url("../img/login_bg.jpg") scroll center center / cover ;