Solved

How Do I Create Background Image Styles with CSS for IE6?

Posted on 2008-10-01
6
177 Views
Last Modified: 2013-12-08
The error that I need to solve centers on background image positioning with CSS in IE6.  The website looks fine in IE7 and Firefox.  Unfortunately, in IE6, background images that are displayed with code like this:

------------css/foundation.css-------------------------

#TopNav li.lastNav {
      margin-top:0;
      margin-bottom:0;
      padding-top:0;
      padding-bottom:0;
      padding-right:19px;
      border-right:none;
      background:url(../images/right_nav_corner.png) no-repeat right;
}

------------css/Spry/SprySlidingPanels.css------------------------

#spc2 {
      background-image:url(../../images/ohp_polaroid_balloons.png);
      background-repeat:no-repeat;
      background-position: 164px 15px;
}

-------------------------------------

...end up behaving as if there was no code to style the images at all.  You can see the error if you look at the last link in the horizontal navigation at the top ('contact us') or if you go the 'parade participants' page and click any of the green buttons in the horizontal slider widget:

http://www.futurewebstudios.com/clientspace/OMCC/ohpws_preview/parade_participants.php

Can you tell me how to make this work in IE6?  Right now I'm using pre-processing statements inside the head tags to display styles specific to IE6 (index page only); I'd like to continue with with format if possible.

0
Comment
Question by:JaeWebb
  • 3
6 Comments
 
LVL 5

Expert Comment

by:Rikus_Trent
ID: 22616344
It sounds like this is pretty much what you're already doing, but this is how I've handled the IE6 /IE7 layout issues in the past using IE conditional commenting:

1) create an IE6 version of the style sheet (or just the classes/elements that need to be overridden).

2) place the link tag for the new style sheet at the end of your head tag wrapped in IE conditional comments:

<!--[if lt IE 7]>
        <link type="text/css" rel="stylesheet" href="styles/ie6.css" />
    <![endif]-->


These comments will be handled by IE, but ignored by all other browsers as normal html comments. This particular comment means if the browser is an IE version less than 7.
0
 

Author Comment

by:JaeWebb
ID: 22616620
I've got that part down - that's what I'm already doing in the code that appears in the site:

http://www.futurewebstudios.com/clientspace/OMCC/ohpws_preview/index.php

What I'm saying is that I don't understand how to position background images using CSS in a way that IE6 understands.

Any advice?
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22618422
for IE6, why not just position the DIV containing the BG image and don't try to position the image.  If the DIV is big enough to hold the BG image, or if you need the repeat X or Y, then just state that and nothing else for the BG image.  

A statement like -- background-position: 164px 15px; -- could be what is fouling up IE6.  For IE6, you really need as little styling of the BG image as you can get.  It assumes you want the image to fill the entire BG, so start with nothing, and see what happens -- you might be surprised !!
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22618434
also -- display:inline -- can help IE6 with BG vs. foreground continuity.
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22618453
also, the paths like -- (../../images/ohp_polaroid_balloons.png);

could be a real problem for IE6, you may have to use backslashes or remove dots in some cases.  To test, just put the image into the root directory, and if it displays fine, it is your image path that IE is choking on.

0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now