background-image not working in IE 7

By manfromochie on 8 Jul 2009 at 04:00 UTC

Have a problem that is consuming too much time trying to find the reason. As usual my web pages work fine in Firefox but fail under IE. I have had very few issues with IE 7 but this one stumps me. i am using Drupal 6.12 with Panels 2. I have a page developed using Panels 2. I have specified a CSS id for the page and in the CSS either specified under page specifications or in my theme css file I have specified a background image that renders fine in firefox but not in IE 7. I also noticed that the background image will only render in Firefox when it is speciffied in my theme css.

Anyone have any idea why this would be happening?

Comments

Would it be possible to give

Alan Cooney commented 8 July 2009 at 08:05

Would it be possible to give a link?

Here is the css snippet

manfromochie commented 8 July 2009 at 18:55

Initially the image was a png thought that may been the issue, changed to a jpg smae result. Used background-image and background-repeat all that worked in firefox but not on IE7. I have used firebug extensively to debug my page errors but dont have a similar tool for IE7. Anyone know of a similar tool?

the link http://ablakedemo.eyecandytours.com/index.php?q=myblog/60

This link reders a blended black/white background in firefox, not in IE7

#myblog {
padding:5px;
width:950px;
margin-left:1%;
margin-right:1%;
height:auto;
min-height:800px;
color:#000000;
background: transparent url('/sites/all/themes/cmould/background_blog.png') repeat-x 0% 0%;
text-align:left;
font-size:small;
}

Seems to be an error in another part of the css

manfromochie commented 8 July 2009 at 19:05

Based on comments here I removed all css from the views2 panel and went with the code for the background only and the background image showed up in IE7 so I imagine that IE7 was choking on an error elsewhere in the script will look for that now.

It'll be a path issue to the

i-sibbot commented 8 July 2009 at 09:09

It'll be a path issue to the image, when you put it into your theme css file.

Also, you'll have to provide the css for the style. But I recon you've done a classic and used two styles that should be one. As a pre-emptive strike, I'll explain, if it's not this then apologies for wasting your time.

#blah  {
  background:url("../your image.jpg");
  background-color:#fff;
  background-repeat:none;
}

IE doesnt like that. The "background" style should have everything in it. Like so.

#blah  {
  background:url("../your image.jpg") #fff none;
}

Firefox is more forgiving than MSIE, it'll let you get away with stuff that IE wont. I know it sounds stupid, but I always design and test in IE. This way, I know that FF will be fine what ever if you know compliant css and you get to see the IE bugs straight away!

embedded css in panels

manfromochie commented 8 July 2009 at 19:38

Based on your comments I have tried every variation of background & background-image in the panels page settings (where you specify css) and it wont display the background image. When I put this in my theme css it works. I have broken the code down to its simplest form (removed any other offending css code) and left this
div#myblog {
background:url('../sites/all/themes/cmould/collage.png') #fff none;
}
div#myblog {
background:url('/sites/all/themes/cmould/collage.png') #fff none;
}

and then this

div#myblog {
background:url(/sites/all/themes/cmould/collage.png);
}

In all cases no success..does css used in panels recognise background images? Other css directives work.

CSS works with everything.

i-sibbot commented 9 July 2009 at 08:58

CSS works with everything. XHTML, HTML etc. Visual stylig. Your on the right track.

Check to make sure your background attribute is not being overridden by a previous style with FireBug.

Also, if you have the availability to show your site then send me a link and it'll have a look at the markup and css.

If your style sheet is in the root of you theme, and you have an image folder on the root with all your images in, then the path would just be "/images/target-image.jpg"..... "../" takes you one step up, out of the theme folder, if your css style sheet is in the root.

Sorry, just saw your link

i-sibbot commented 9 July 2009 at 09:03

Sorry, just saw your link above. http://ablakedemo.eyecandytours.com/index.php?q=myblog/60

Also, Internet Developers Tool bar is Fire Bug fro IE. BUT Theres also a javascript emulation of Firebug for all browsers called, FireBug lite.

Checked that link out in IE7 and it works fine???????

Got it working partially since the original post but...

manfromochie commented 9 July 2009 at 21:49

It works when the background image is put in the theme css. Not in the panels page setting dialog area. Also I have a simple view on the page of taxonomy items when that is enabled it fails in IE but not Firefox. I assume some deep embedded css in the views module for taxonomy titles as a block is causing IE to choke as well. So it will be a few hours looking for that. I did find the developers toolbar from Microsoft so that helped.

Background images in the panels page setting will not work in either Firefox or IE 7 gave up on that I will opt for the theme css rather than try to figure that one out.

Look at that link again views css is choking ie7

manfromochie commented 10 July 2009 at 03:30

Something in views is choking ie7. I have a view defined as a list of titles in a block display. No custom css. If I include that view in my panel page, ie7 chokes but not firefox. I have been using Developers Toolbar but cannot spot the specific offending css error. Any help appreciated.

works well inopera too

manfromochie commented 10 July 2009 at 03:46

Downloaded Opera and it works. i am about to put a message on the site that indicates the user should switch browsers if they are using ie

Found the source of the error but..

manfromochie commented 10 July 2009 at 04:56

Ok I commented out the print styles statement and brought in the css links one at a time. I was able to isolate the file that caused the css to break IE 7; it was the ctools css, the contents of which I paste here. I ran it through the css validator and it passed, but including this content in the page causes the IE redering to not include the background images and probably other items. i cant see the error so I paste it here....it seems to be a generated css by ctools, I have not made a change to the page so I expect that the contents of the file are what are presented to the browser

.panels-flexible-column-9-main {
float: left;
width: 99%;
}

.panel-flexible-9-inside {
padding-left: 0px;
padding-right: 0px;
}

.panels-flexible-region-9-headercenter {
float: left;
width: 34.4520115556%;
}

.panels-flexible-region-9-headerright {
float: left;
width: 64.5479884444%;
}

.panels-flexible-row-9-1-inside {
padding-left: 0px;
padding-right: 0px;
}

.panels-flexible-region-9-left_col {
float: left;
width: 25.6398176292%;
}

.panels-flexible-region-9-center {
float: left;
width: 73.3601823708%;
}

.panels-flexible-row-9-main-row-inside {
padding-left: 0px;
padding-right: 0px;
}

is number of css file a bug in ie 7

manfromochie commented 10 July 2009 at 05:36

Folks still trying to figure this out. Of interest is that it seems that this is related to the number of css files linked in the header. After not seeing an issue with the css snippet in the ctools generated script I opted to put a background directive tied to a non existant id and it resilted in the same error no background-images; with that result I started down the path of eliminating other css files from my linked css list. Any time I deleted a css file from the list such that the list drops below 33 the page renders fine. Here is my list that works

If I add the test.css which has 1 directive to a non existant id at the top of the list as show below the ie7 fails

33 external style sheets.

i-sibbot commented 10 July 2009 at 10:33

33 external style sheets. Man, no wonder you had this issue.... :).... Maybe next time, remember to state that you all a herculian amount of style sheets being linked :) Good luck with the developement dude.

hey just turned on modules that would be used

manfromochie commented 10 July 2009 at 13:31

Not using the book module so now it works when deselected from the modules list. But is this a known limit? Thickbox, ubercart are among the modules that bring in these css files

Straight from the horses mouth, as it were

i-sibbot commented 10 July 2009 at 15:20

http://support.microsoft.com/kb/262161

ubercart is a contributor to my 33 stylesheets in a bigway

manfromochie commented 10 July 2009 at 23:37

Ubercart generates 9 css links, thickbox 2. Perhaps we need to provide a mod to the development guide that can result in more efficient css link usage

this is just a comment not actual solution

m13 commented 9 July 2009 at 11:48

I can't help myself, I seriously need to tell this:

somebody has to destroy IE and all its versions and make it DISAPPEAR from the face of this UNIVERSE.

God I hate IE!!
it ALWAYS ALWAYS has incompatibilities with every single thing on this earth.

My sentiments also

manfromochie commented 9 July 2009 at 21:43

This little hitch has cost me 3 days of productive time. Has anyone thought of a class action suite (we seem to sue for everything this seems justified).

I concur, but professionally

i-sibbot commented 10 July 2009 at 10:31

I concur, but professionally you need to account for IE. I hate it, especially IE6, but accounting for these browsers over time actually makes your skills far better than they would have been without them.

Peopl that leave messages on there site saying "Dont use IE, Use FF" are only showing there lack of Knowledge...... even if I hate having to have that knowledge. :)

Possible solution

Ontwerpt commented 18 December 2009 at 07:19

I was having the exact same problem - very frustrating!

What helped in my case was to enable the bandwidth optimalisation of CSS-files in admin/settings/performance.

Double posted.

Anonymous (not verified) commented 17 February 2010 at 13:13

Double posted. My bad. See below for correct post.

Had similar problem The

Anonymous (not verified) commented 17 February 2010 at 13:17

Had similar problem

The background CSS image was not showing for some sections of li's in IE 7. It was showing in Firefox, Safari and Opera. I am using a sprite CSS and the image was working in other parts of the layout for all tested browsers.

The problem in the part not showing was this:

<ul class="links">
<li class="category"><a href=""> </a></li>
</ul>

The CSS had the parent ul set with background:none, so the code read:

ul.links {
....
background: none
}

.category {
background: url(...) no-repeat scroll 0 0 transparent;
....
}

Removing the background:none made it work in all browsers including IE 7. So if a background image is not working in IE 7, but it is working in Firefox 3.6, Opera 10.10, and Safari 4.0.4 check the hereditary trail. The problem might be there.

background image in IE6 and IE6

wschaepe commented 10 October 2010 at 23:10

I found that if I use "background", the image does not show but if I use "background-image" it does show.

This does not work in IE6 and IE7, even if I remove the color, it still does not work. However, it works in all other browsers, including IE8:
background:url(../images/dk/left-panel-complete-238W.gif) left 30px, no-repeat;
background-color:#a74dc3;

This does work in IE6 and IE7:
background-image:url(../images/dk/left-panel-complete.gif);
background-repeat:no-repeat;
background-position:left 20px;

Add zoom:1

ChristinaB commented 30 September 2012 at 21:12

This is for people finding this old thread:

Just add zoom:1 and it works in ie 7