6 replies [Last post]
bkdark
Offline
Regular
Brooklyn
Last seen: 16 years 48 weeks ago
Brooklyn
Joined: 2004-03-29
Posts: 11
Points: 0

I had a white background image that worked fine until I discoverd that in IE 6 I needed to add a (background-attachment: fixed:) tag in doing so it solved my IE 6 problem but has now caused the background image to disapear all together in Safari and IE 5.2 (mac). I tired several combinations of writing the CSS code and none seem to work with out flip floping between the original and newer problem. Can someone help?

Link to Site wawamitz.com/look.htm[/url]

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Background Image Disapearing in Safari and IE 5.2 (mac)

Hi

Why not feed the background-attachment only to IE6?

/* \*/
* html body {
bac\kground-attachment:fixed;
/* the comment before the style hides it from Mac IE, this
comment closes that hack. You MUST have a comment here
to do this, but it can be empty! The * html hack means only IE
sees it, so with the Mac hack only IE/Win sees it. The backslash
before the k means only IE6 sees it, not IE5.x Win */

Will that do it?

Trevor

bkdark
Offline
Regular
Brooklyn
Last seen: 16 years 48 weeks ago
Brooklyn
Joined: 2004-03-29
Posts: 11
Points: 0

Background Image Disapearing in Safari and IE 5.2 (mac)

This is the CSS I entered is this correct? I've never seen what your taking about before:

/*\*/
#text{
float: left;
width: 590px;
height: 275px;
padding-left: 90px;
margin-right: 90px;
color: #60247F;
bac\kground-image: url(../Site_Images/text.png);
background-attachment: fixed;
background-position: 75px 0px;
background-repeat: no-repeat;
overflow: auto;
}

I uploaded this and it had no effect in Safari and destroyed the IE 5.2

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Background Image Disapearing in Safari and IE 5.2 (mac)

Hi

That code you gave makes it easier for me to help you.

Try this (exactly, don't miss anything out!):

#text{ 
float: left; 
width: 590px; 
height: 275px; 
padding-left: 90px; 
margin-right: 90px; 
color: #60247F; 
background-image: url(../Site_Images/text.png); 
background-position: 75px 0px; 
background-repeat: no-repeat; 
overflow: auto; 
}

/* \*/ 
* html #text { 
bac\kground-attachment:fixed; 
/*  */

Trevor

bkdark
Offline
Regular
Brooklyn
Last seen: 16 years 48 weeks ago
Brooklyn
Joined: 2004-03-29
Posts: 11
Points: 0

Background Image Disapearing in Safari and IE 5.2 (mac)

Trevor your the man, could you please explain how this fix works.

THANKS,

Will

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 17 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Background Image Disapearing in Safari and IE 5.2 (mac)

bkdark wrote:
Trevor your the man, could you please explain how this fix works.

THANKS,

Will

Hi

Well, I'm not sure why you wanted to do what you did, but, IE has bugs (ie it doesn't follow the proper css rules), and we can use this knowledge.

In the code I gave, I used three of IE's bugs.

First, the Mac escape character bug. In style sheets, comments are like this:
/* comment here */
and all browsers should ignore what's inside. But IE Mac doesn't. If it finds an escape character, it interprets it, so this:
/* \*/
is a valid comment in all browsers except Mac IE, where it only sees it as the START of the comment, because the end asterisk has been escaped, so what it sees is:
/* (\*) /
which isn't a completed comment. So it keeps treating the code as a comment until it finds the *\ sequence, which it does after the style. We can use this to hide a whole style or just part of a style. So IE Mac doesn't see any of the style.

Starting a style with a '* html' should hide it from all browsers, but IE still sees it. Great, so put that in front of the actual style name and you get

* html #text which only IE can see. Mac IE can't see it because of the first hack, so only Win IE sees the style.

Great. But how to hid it from Win IE 5.x?

Well, browsers are supposed to ignore an escape EXCEPT when it is in front of a valid hex digit (0-9, a-f), but Win IE doesn't.

So, the style:

bac\kground-attachment:fixed;

is seen by all browsers as

background-attachment:fixed;

except for Win IE 5.x, which sees it as an invalid attribute and ignores it.
The only browser left that can see this attribute is Win IE 6.

Done.

If you look around there are some excellent sites documenting these bugs.

Trevor

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 6 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Background Image Disapearing in Safari and IE 5.2 (mac)

Why do we need all these hacks when IE has a perfectly good 'conditional statement' system such as ~

<!--[if IE 5]>
<style type="text/css">
@import "foo5.css";
</style>
<![endif]-->

or

<!--[if IE 5]>
<link rel="stylesheet" href="foo5.css" type="text/css">
<![endif]-->

Using this it is possible to target any or every version of IE.

Is there any problem with using this method ?

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk