IE6 doen't work with my site

[rafaelperrone]

I've just finished my new blog (http://fazendoacontecer.net). As I use a mac, I did everything with FF. Now that I've checked my site in IE6 I see it looks ugly!

From what I can see, images (in PNG) doesn't have transparency and DIVs and CSS looks messed.

I thought it should work as it validates as XHTML 1.0 Transitional.

This is my first site. Can anyone help me here? I'm desperate!

Thanks A LOT!

Rafael

[Mr. E. Cryptic]

IE6 doen't support alpha-layer transperancy, however, adding the following line to the head of your document will allow your png files to display with the illusion that they are transparent.

<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->

IMPORTANT: will only work on files that have names ending in -trans.png, so if you have a file named logo.png, you will need to rename it to logo-trans.png for the script to work.

[rafaelperrone]

Pardon my ignorance, but is there any other kind of transparency I could use to make it work?

What about the divs getting messed up? Any ideas?

Thanks!

[rafaelperrone]

IE6 doen't support alpha-layer transperancy, however, adding the following line to the head of your document will allow your png files to display with the illusion that they are transparent.

<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->

IMPORTANT: will only work on files that have names ending in -trans.png, so if you have a file named logo.png, you will need to rename it to logo-trans.png for the script to work.

Thanks, that really solved part of my problem. My site look better now.

But how can I fix the menu with the Home, FAQ and Sobre (about) links?

Also, the links got messes up with your tip. Is there any way around this?

[Mr. E. Cryptic]

Also, the links got messes up with your tip. Is there any way around this?
Can you elaborate please?

Sorry, I also should have mentioned that the code above wont work for tiled background images, they'll still block with a background-color in IE6.

There's a whole host of CSS properties that are either 'Buggy' or just simply not supported in IE 6 (and 7, and 8, and probably version 15 too - but I'll have to confirm that at a later date), a few simple examples:

The outline property isn't supported up to an including version 7 (possibly 8 too, not sure).

The float property has a few quirks, such as extra left and right margin space being added to the floated element. Also avoid witdh: auto for floated elements in IE, as well as the inherit value.

The list is pretty much endless. I love to provide a more specific debug for you, but I'm afraid I don't actually have access to IE6 at the moment.

Do a Google for 'IE6 unsupported CSS' or 'IE6 CSS Hacks' or something similar and you'll find a wealth of information on the subject. You can also have a look at IE Conditional Comments.

[robertbell]

Above replies are so much helpful and problem should solve.But if problem remain then u will create different css of FF and IE6. It is another solution of cross-browser problems.
You only add this line of code between head tags.
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" ><![endif]-->
Make seperate css for IE and test on different browsers time to time during creating your css.
I assume that using this technique your problem will solve

[rafaelperrone]

Can you elaborate please?



Sure. What I wanted to say is that the mouse icon is not changing from the arrow to the hand (supposed to appear when hovering over links.

[rafaelperrone]

Above replies are so much helpful and problem should solve.But if problem remain then u will create different css of FF and IE6. It is another solution of cross-browser problems.
You only add this line of code between head tags.
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" ><![endif]-->
Make seperate css for IE and test on different browsers time to time during creating your css.
I assume that using this technique your problem will solve

Yes, the problem is almost solved. The remaining problem is that images still display as blocks, messing with some menu bar positioning. Anyway, it's MUCH better now.

I'm not sure I'll make a special CSS for IE6. Site looks alright with IE7 and IE6 is dying (18%). I may leave it as is.

Thanks very much for the effective and quick answer.

Rafael Perrone
fazendoacontecer.net

[WebJoel]

"...What I wanted to say is that the mouse icon is not changing from the arrow to the hand (supposed to appear when hovering over links"

IE has/had a problem between

cursor: hand; and cursor: pointer;

One is IE-proprietary and the other standards-compliant. "hand" is meaningless to compliant browsers.

If you include both, you want "cursor: hand;" to come AFTER "cursor: pointer;" else IE fails. Compliant browsers will ignore "cursor: hand;"
Including both "hand" and "pointer" is done if the client expects there will be IE<6 user-agents visiting the site. It is a legacy thing. But IE6 is 'the problem child' and probably the worst InternetExploder version ever made.

I think this proprietary cursor problem pertained IE 5.5 and was resolved after that. Maybe this isn't the problem, but whenever I hear about "IE (any version) not showing the 'hand' on-hover", this is what immediately pops to mind.