[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 188
  • Last Modified:

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

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
JaeWebb
Asked:
JaeWebb
  • 3
1 Solution
 
Rikus_TrentCommented:
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
 
JaeWebbAuthor Commented:
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
 
scrathcyboyCommented:
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
 
scrathcyboyCommented:
also -- display:inline -- can help IE6 with BG vs. foreground continuity.
0
 
scrathcyboyCommented:
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now