Please help,
The background image is not showing in IE, but everything is perfectly fine in safari.
I have checked with W3C CSS validation and html validation, everything is ok.
What is the problem?
http://www.applezone.com.hk/newrx/
body
{
/*background-color:#eee;*/
font-family:Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
background:url(images/bg_line.JPG);
background-repeat:repeat-x;
}
p
{
font-size:12px;
color:#999999;
line-height:160%;
}
#container
{
width:1050px;
background:url(images/bg.JPG) no-repeat;
margin-top:0px;
margin-left: auto;
margin-right: auto;
padding-left:150px;
padding-top:220px;
}
There's something wrong with the jpg files. IE8 is not able to render them. Maybe you are using a JPEG2000 format?
If you try to load "http://www.applezone.com.hk/newrx/images/bg.JPG" in IE8 you will get a broken picture icon only. I downloaded the file and opened it from the hard drive too, got the same result.
Try loading the pictures in an editor, like GIMP or PhotoFiltre and re-saving them (using save as)
I tried in PhotoFiltre and re-saved it using a 90% quality setting. The size went down dramatically (to about 8% of the original without visible loss of quality) and IE8 is able to open it now!
You should try to make image files as small as possible on the site because that largely affects the visitors experience.
It'd be help to know what version of IE you're using. Your code works fine for me in IE7. Anyway...
background:url(images/bg_line.JPG);
Try this instead:
background-image:url('images/bg_line.JPG');
You're using the background shorthand which is valid according to the standard, but it's possible whatever version of IE you're using doesn't support the way you're using it. IE may also expect the filename to be quoted, as I did for you.
Related
Wondering if anyone can help with an IE8 issue, I've searched high and low and tried many different things. On a WordPress site for a client, an input text box appears much smaller than it should, and off to the side of the page, as compared with all other browsers I've tested.
You can see a grab of how the page looks on IE8 (on Windows 7) here:
http://perfectitaliano3.fonterra.safecom.com.au/wp-content/uploads/grab2.jpg
If you compare that to the page http://perfectitaliano3.fonterra.safecom.com.au/recipe/potato-rosemary-and-speck-pizza/ in a modern browser you’ll see the width and placement of the search box and filter dropdown menu at the top right is all messed up.
I'm a bit a noob at IE8 issues, but I’ve tried changing the css, patching it with modern.js, html5 shiv, modernizr, all sorts of things, but nothing makes any difference!
If you have any suggestions please let me know, thanks.
Try this
#top #s{
height: 40px;
padding: 0px 47px 0px 5px;
}
Thanks so much for answering #Jenti. I tried your suggestion but it didn't seem to work, although because it's now live I tried it in the developer tools in a virtual machine version of IE8, so one can never be sure ;)
However I've since found a solution, I added the following:
#searchform > div {
width: 500px;
}
#s {
display: table-cell !important;
}
and that seemed to do it. Thanks again and appreciate it.
I am using jQuery mobiles v 1.4.2. Following is my code from my page.
HTML
<ul data-role="listview" class="ui-nodisc-icon ui-alt-icon">
<li><a href="#" >Bienes Raíces en San José</a></li>
</ul>
css
.ui-listview li
{
margin: 10px !important;
border-radius: 5px !important;
border-left:1px solid !important;
border-right:1px solid;
background-color: #C0DAE7;
}
.ui-listview li:hover
{
background-color: #EDF6FA;
}
.ui-listview
{
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
height:40px;
}
When page first loads on mobile it is not taking any change in css like background-color or border. If it refreshed two or three times then it worked.
Note: it is not working in Firefox for mobiles.
what could be the cause/reason behind this behavior. Please advise.
There could be a couple reasons why the changes aren't showing.
Not all browsers interpret html the same way, and can calculate things like borders, margins, padding etc. differently than you might expect.
The browser has not detected a change in the html because you have only changed the data in the .css and thus the html has not changed; so a it may think a cached version will suffice.
You accidentally saved the new css file in the wrong spot via ftp so the changes you think you made don't show because it is looking at the old file which hasn't changed. (this has happened to me)
The server simply hasn't finished saving/overwriting the old file, and takes a minute to finish the operation; which would also explain the lag in changes showing up.
Another thing I do sometimes is pop over to the w3schools HTML validator and the w3schools CSS validator and let them take a quick peek at my code to make sure I haven't accidentally missed anything; because misplaced tags and other small error can cause a big difference in your output.
Sometimes cache is the reason for such kind of behavior. Press alt+ctrl+Delete to clear the cache of the browser and check it.. Hope this will works..
This css style is working perfectly on all browsers when the site is on LOCALHOST.
but when I uploaded the site to a live server, It also works on all browsers except IE.
The background-image don't show.
.button {
font-family:Arial, Helvetica, sans-serif;
display:inline-block;
position:relative;
background:url(../images/button-bg.gif) 0 0 repeat-x #3b3d3e;
border:1px solid #3b3d3e;
font-size:11px;
color:#fff;
font-weight:bold;
text-decoration:none;
padding:1px 9px;
margin-right:7px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
behavior:url(js/PIE.htc);
}
NOTE: as you can see I use the color #3b3d3e with the background, and when the page loads I see this color for a part of a second, and then it disappears.
what is wrong with this?
I believe background should be written out in this order:
background: color position size repeat origin clip attachment image;
Maybe IE is the only browser that cares?
If that doesn't work maybe try adding each background value you need seperately:
background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.
Also as a side note you might want to try commenting out the last line in the css "behavior:url(js/PIE.htc)". I know sometimes these things like to conflict with other properties. I have never used PIE myself, but its worth a shot commenting out.
Color first:
background: #3b3d3e url(../images/button-bg.gif) 0 0 repeat-x;
Try adding zoom:1 to .button
This triggers the hasLayout property on IE7.
Detailed explanation here:
On having Layout
I think I got it fixed but still don't know what is the reason...
I removed the
behavior:url(js/PIE.htc);
from it, and it worked perfectly...
I'm pretty sure that the file PIE.htc is there but I don't know what is wrong.
anyone??
I haven't tried this on my site yet, because the server has been down but it might be worth looking into Modernizr http://modernizr.com/
I had a hard time getting background images to show moving from local to my server, and what I ended up having to do was use the full path of the image.
If it is infact a browser confliction problem, this should help solve it.
Also, have you tried commenting out behavior:url(js/PIE.htc);?
This could be what's giving it fits.
When i put a background-image in my CSS, I type it like so:
background-image: url("path/to/image.img"); background-repeat:no-repeat;
background-color:#color;
I see you tried this, and I'm trying to think of several options, would working with the Z-index affect what you are trying to do?
Give Modernizr a look over
It may be a relative path issue between localhost and server environment. See the detailed explanation on the CSS 3 PIE known issues page.
http://css3pie.com/documentation/known-issues/#relative-paths
Was PIE working at all? — Were there rounded corners on the button on IE 7?
This may be helpful too.
http://css3pie.com/documentation/known-issues/#z-index
body {
margin:0px;
padding:0;
background: #777 url(foodwine.png) center fixed;
background-repeat:no-repeat;
text-align:center;
}
I can't seem to get this background image to show up on IE7 (I'm not sure about other IEs).
I've tried all different kinds of variations and spacings but it just doesn't want to show up in IE.
Any help would be much appreciated!
Edit: I'm using rails to serve the image and it works in firefox/chrome. I tried specifying the directory with '/images/foodwine.png' but now it doesn't show up on any browser.
http://afternoon-samurai-9254.herokuapp.com/ This is the page I'm working on.
Try this:
body {
margin:0;
padding:0;
background: #777 url(foodwine.png) no-repeat center fixed;
text-align:center;
}
I'm guessing that the image is in a directory called images or something similar? If so, calling it from your root web directory is the safest way to make sure it is referenced properly:
background: #777 url('/images/foodwine.png') center fixed;
Try to use margin:0, instead of 0px.
As Cole said add quotes around the image url. I suppose the image exists 'cause you are pointing out explorer, so i think you tried other browsers.
You need to have strict doctype for fixed positioning to work on IE7.
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
It seems that ie7 have a weird behavior (bug?) rendering heavy images (2.3MB in this case), try using jpg image format instead, a png is normally used to support transparency which I dont see it in this case.
In chrome my website is cramped at the bottom.
I have used a clear float to clear it and it works in Firefox but in Chrome, the bottom is all cramped? (I'll not mention IE because haven't tested yet but can fix for IE just don't know how to for Chrome)
http://justbedroomdesigns.com/
Try to change css to this,
.post-block {
width: 370px;
height: auto;
float: left;
clear: none;
padding: 5px 2px 2px 2px;
}
Perhaps you should correct the errors in your HTML first. For instance, decide if it should be HTML or XHTML, never reuse ID values, etc. If the problems still occur, ask again.
Take a look at this short post:
http://www.minitek.gr/tutorials/css-tutorials/item/12-how-to-fix-google-chrome-css?.html
More about Chrome rendering can be found here http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
One problem that I had with Chrome CSS is that when page is loaded locally (using XAMPP) it looks different
than when it's loaded from server.