We help IT Professionals succeed at work.

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

JaeWebb
JaeWebb asked
on
200 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.

Comment
Watch Question

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.

Author

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?
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 !!
also -- display:inline -- can help IE6 with BG vs. foreground continuity.
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.