Solved

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

Posted on 2008-10-01
6
178 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add animation to your css 12 32
Using a 16 / 12 column Grid - Can't get columns to display correctly 4 19
CSS z-index issue 3 22
Why my select dropdown does not work? 8 27
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

896 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

12 Experts available now in Live!

Get 1:1 Help Now