20 replies [Last post]
Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

Hello,

I am trying to have my rollover png in IE 6 but for some reason it is not. I am using the http://24ways.org/ {SuperSleight}. THe png is working where the blue gray background doesn't show. I can not seem to find the issue to this. Why it won't bump up the image up -95 px.

 
<div id="logowrapper">
 
<a href="index.html" id="logo"><span class="hide">Home</span></a>
 
</div>

a#logo {  
width: 335px;  
height: 95px;  
background: url('../images/logo.png') no-repeat;  
display: block;  
text-decoration: none;
}  
 
a#logo:hover {
background-position: 0px -95px;  
}

Thanks.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Is it moving the image in

Is it moving the image in all other browsers? cause I know when I'm doing image replacement and rollovers I often get the direction backwards. Meaning, did you try it with 95 instead of -95?

Another possibility (though i don't think so) is if it's only IE (both of them, 6 and 7) who don't roll over while everyone else does, you could try something else on the hover to test it (that :hover is doing something at all).

I'm no expert, but I fake one on teh Internets

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 34 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

If you are using any of the

If you are using any of the alpha filter methods, then you cant position a bg png in ie6.

You will need to write seperate styles for IE6 thats swaps the image instead of sliding it up/down left/right and then preload it using JavaScript or CSS, otherwise you will get a flicker effect.

the beta version of iepngfix.htc fixes the lack of support for background positioning and repeating in IE6 so use that (http://www.twinhelix.com/css/iepngfix/). Although most people, including myself, find that using a transparent gif for IE6 only is good ennough, depending if the image has any gradients or rounded edges.

Can you post a link to your page?

Many thanks,
Liam
www.liamsmart.co.uk

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You can't slide an image

You can't slide an image around with pngfix??? Damn. I like this less and less. IE users will have to use more asking time to get twice as many images as everyone else! : (

I'm no expert, but I fake one on teh Internets

Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

THe rollover works perfectly

THe rollover works perfectly fine on all browsers except for IE 6. So IE 6 doesn't like :hover? or what?

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 34 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

IE6 only supports :hover

IE6 only supports :hover (and other pseudo-classes) in links.

Many thanks,
Liam
www.liamsmart.co.uk

Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

well it is a link.

well it is a link.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

No, Liam said that IE6

No, Liam said that IE6 doesn't deal with rollovers that slide around when the images are going through PNGfix.

If they weren't getting PNGfix they'd apparently slide around just fine. Liam said if you keep this PNGfix, you'll have to use image substitution instead of Sliding Doors. So, the "slid" hover image is, for IE6, a separate image.

Or you can see if you can ditch the whole thing and use gifs, but that depends on the design.

Quote:

You will need to write seperate styles for IE6 thats swaps the image instead of sliding it up/down left/right and then preload it using JavaScript or CSS, otherwise you will get a flicker effect.

I just read in a thread somewhere about another way to remove flicker from replaced images in IE6... maybe I can track it down...

I'm no expert, but I fake one on teh Internets

Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

just try to gather up

just try to gather up information and list it hear to make sure i am getting this right.

1) There is no png fix that will work with the sliding doors method.

2) One options to do it is with a gif. (It doesn't work with my design because I have a drop shadow.)

Is that all right?

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 34 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

Right I'm home from work

Right I'm home from work now.

I thought the png was being used on a logo? why would that use the sliding doors method? Can you post a link so I can see myself whats possible so I know Im giving the correct info?

----------------------
Stomme Poes,
When I say flicker, I mean there will a pause whilst the new substitute image is loaded (since it will need to be 2 different images). there will always be loading time no matter what connection you have.

So that image does need to preloaded.
----------------------

so back to the main issue;

To solve the PNG transparency problem have a look at:

http://www.twinhelix.com/css/iepngfix/

In the 'downloads' paragraph there is a 'test area' link. That beta version of iepngfix WILL allow you to use bg positioning on PNG's. So download that. Follow the instructions then post back.

You will need to use an IE6 specific stylesheet though but I have explain this in an almost identical issue and heres the link:

http://csscreator.com/node/32604#comment-138017

I have posted the code and where to add it for using IE6 specific stylesheet in one of my replies.

Many thanks,
Liam
www.liamsmart.co.uk

Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

Here is the site;

Here is the site; http://mm214.com/kkashou/Online_Advocate/

I am doing the twinhelix method.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:When I say flicker, I

Quote:

When I say flicker, I mean there will a pause whilst the new substitute image is loaded (since it will need to be 2 different images). there will always be loading time no matter what connection you have.

So that image does need to preloaded.

Wrong flicker. I thought you were talking about the constant re-loading instead of caching IE6 (and nobody else) does when you have sliding doors or image replacement. Meaning, if I have an image on a link, and it slides on :hover, I'll get a flicker every time I hover instead of just the first one you mean (which I'll get on every browser if I don't preload).

In the initial post he said something about the image not going -95px so I thought this was a sliding doors thing, but I could have gotten that wrong.

I'm no expert, but I fake one on teh Internets

Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

I tried the other method

I tried the other method from the twinhelix. Along from the other site and it didn't work for some reason.

It is updated on the server. Can you please take a look it?

So what I did was use the filter method that you talked about in the other post and it works fine for me. Is that a good one to use? I know the css is not valid but its on ie6.css.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourpng.png', sizingMethod='scale');

But I would like to know how to do it the other method.

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 34 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

Yeah thats the one I use. As

Yeah thats the one I use. As you can see though, you cant position it. iepngfix uses that filter. But aslong as itsa in an ie6 only stylesheet, the validator wont see it so your page will still validate Wink

What the .htc file does is go through whatever elements you tell it to go through and applies that filter to it, and if it is being applied to a link, it makes the anchor tag 'position:relative'.

Stick an 'alert('ieongfix found');' after the 3rd line of code in the pngfix, upload it, and refresh your page. If you dont get a small alert in the middle of your screen, you know the path you are specifying to it is wrong.

Many thanks,
Liam
www.liamsmart.co.uk

Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

Its not showing the alert

Its not showing the alert message. It shows for the csshover.htc though. What is the .htc suppose to be link to?

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 34 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

Why are you using

Why are you using csshover.htc? I couldnt see by looking at your page why you would need it.Can you send a link to the stylsheet where you are calling these .htc files?

Many thanks,
Liam
www.liamsmart.co.uk

Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

Becuase you mentioned in

Becuase you mentioned in your other post so the hover portion would work. Right?

By the way they are both in be called. (right path.)

Here is the css file that is calling these .htc files.
http://mm214.com/kkashou/Online_Advocate/css/ie6.css

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 34 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

No mate, iepngfix.htc

No mate,

iepngfix.htc allows transparent png's ie6

hover.htc or csshover.htc allow you to put :hover on any element like li:hover, div:hover etc etc.

In IE6 you can only have :hover in anchor tags (which in your case, you do).

So your only problem is the lack png support which can be sorted with iepngfix.htc. So you say you are getting the alert? It still doesnt seem to be working :shrug:

Change your style to

*{
behavior: url('js/iepngfix.htc');
}

Anything happen?

Many thanks,
Liam
www.liamsmart.co.uk

Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

Updates. It gets rid of the

Updates.

It gets rid of the blue background now. But the hover does not work. How can I get that working? It is two separate images.

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 34 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

The reason I stopped

The reason I stopped replying to this topic as I cannot help anymore than I already have.

Did you even read the instruction on the 'iepngfix.html' file that comes within the zipped folder?

How to use step 4 reads:

If you want support for CSS1 background-repeat and background-position, make sure you include the add-on .JS file in your <head>:
 
    <script type="text/javascript" src="iepngfix_tilebg.js"></script>
 
Otherwise, background images will work but won't repeat or position.

Have you done that? I can see from your html you havent. I don't mind helping people, but Im doing all the work here?

Many thanks,
Liam
www.liamsmart.co.uk

Kash_Designer
Offline
Regular
Last seen: 13 years 45 weeks ago
Joined: 2007-06-21
Posts: 45
Points: 0

Got it solved.

Got it solved. Thanks.