CSS Drive forums | Background image probs in IE6

Background image probs in IE6

double_agent

Posted: 06 July 2006 03:43 AM

[ Ignore ]

Newbie

Total Posts: 1

Joined 2006-07-06

Hello -

I’m just learning CSS and I’ve been developing a site for my friend. I have it in a test environment in a subdomain on another friend’s website. I’m a Mac user and everything seemed hunky-dory until I went to show it to my friend in IE6 on her PC. Wow. Talk about embarrassed. The repeating background which had been so lovely on my Mac was completely absent, as was the background image of her masthead. Now I could fix this if I were to throw the CSS out the window, but I’m trying hard to do this right. So far as I can tell, everything validated OK.

Can anyone shed some light on the situation? The page background is simply that red image I’m using as an image holder. The masthead background is a black-to-gray gradient.

The page URL is http://nancy.djflip.com/ and the CSS is at http://nancy.djflip.com/global-v3.css

Please don’t be too hard on me!! I’m teaching myself.

Many Thanks!

Profile

jalapenomultimediadesigns

Posted: 10 July 2006 02:53 PM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 8

Joined 2006-02-28

Darn IE! As you venture in farther with CSS you will realize it’s one of the biggest pains. I would recommend when using a mac, check your site using an emluator. I have found one that worked quite well but since then they have updated it to show you IE7. You might want to try one of the following. Both you have to pay for but it may be worth it if you plan on doing this often and is much cheaper than buying an other “test” computer:

Browsercam.com (http://www.browsercam.com)
NetMechanic.com (http://www.netmechanic.com/browser-index.htm)

As for your problem at hand, you may want to look back over how you have presented the body modifications in your CSS. IE will sometimes flip out over the smallest of things. You state the following:

body{
background: #FFFFFF;
margin:10px 0px 0px 0px;
padding:10px 0px 0px 0px;
text-align:center;
font-family: Georgia,Arial,Verdana,Helvetica,sans-serif;
background-image: url(/../img/deepred.jpg);
background-position: center top;
background-repeat: repeat;
} 

Because you tell the background to be white, I have a feeling that IE is only seeing that then thinking it’s job is done. However, later in the statement you clarify that you want an image. I would try 1 of 2 things.

1. Either break it all down: background-color, background-image, etc.
or 2. CSS shorthand: background:url(/../img/deepred.jpg) repeat center top #fff;

The good news is, it looks good in IE7 :)

Nice start to the site by the way. You are doing great with just starting out on CSS! Keep it up :) Good luck!

Profile

vladimirallen

Posted: 10 July 2006 09:20 PM

[ Ignore ] [ # 2 ]

Newbie

Total Posts: 19

Joined 2006-05-22

double_agent::

It appears that you have an issue with your call to url ...
You are calling the image from your css document, not your html document.

Here are a couple of quick fixes:

http://webterra3.com/textindex/corset.html

The CSS file is in the same directory as the html file and calls the BG image from a directory called “images”.

http://webterra3.com/textindex/corset2.html

In this case, the CSS file is in a directory called “CSS” and calls the BG images from a directory called “CSS/images”.

I also did an @IMPORT thing here:

http://webterra3.com/textindex/corset3.html

All cases work well for Ffox mozilla 1.5.0.4 and MSIE 6.0 and Opera 8.54.

Also, on IE 6.0, your SIDEBAR drops out (below the CONTAINER2) !!!

You can resolve by widening your container/container2 to 720px and reducing the sidebar to 180pixels or to 760pixels and maintaining your 200pixel width sidebar.

760 will snug into an 800x600 resolution nicely.

Gosh, the no-right click was by-passed in about 3 seconds :-)
Do people still do that!?!

You also have a untrimmed just below your copyright statement which TIDY sez ... oops!

Lookin’ good Double_agent and tell Nancy to hold onto her corset! Things will be just fine!

Kind Regards,
Al Toman

Profile

‹‹ Browser display problem Layout not rendering properly in IE ››