Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2008-10-01
6
Medium Priority
?
187 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…
Suggested Courses

610 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