Solved

broken in IE6

Posted on 2007-11-27
4
262 Views
Last Modified: 2012-06-27
I have a site I'm putting together that works great in all browsers but breaks in IE6 and earlier.

Specifically I lose translucency in my png images (full transparency works with js) and I lose the forced min height of a div.  

You can see the site at http://69.89.31.152/~pmasyste/pacificatechnologies/

Is this fixable?  Or, how could I setup my css to adjust (and look better) in IE6?  If I could make the areas that should be translucent the same color as the body (but only for IE6 and earlier) that might work.   Then I only have to address keeping the div at a minimum height.

Also, once I load some of my transparent images, if I reload them they lose their transparency...  Any way to fix that?

All help is genuinely appreciated!


0
Comment
Question by:marglar
  • 2
4 Comments
 
LVL 14

Accepted Solution

by:
B_Dorsey earned 250 total points
ID: 20360318
min-height, and png does not work in IE6, you can add another css sheet and in your html you hide it from the other browsers like.

<!--[if lt IE 6]>
<link href="my_IE6.css" rel="stylesheet" type="text/css">
<![endif]-->
0
 

Author Comment

by:marglar
ID: 20360710
would this make the new css in addition to the primary css or replace it completely?  

It would be cool if it were in addition to, then I could just replace the broken pieces with something that works...
0
 
LVL 14

Expert Comment

by:B_Dorsey
ID: 20362108
addition, I do it to fix min-height stuff, it just opens it if IE6 and applys the new updated css in addition to the original, as longas you put it after the original css in your HTML

0
 
LVL 18

Assisted Solution

by:Hube02
Hube02 earned 250 total points
ID: 20434580
You can also fix the min height issue by doing the following in s single CSS file:

// the following will set height in IE6 (ie six interprets height as min height)
.class {
  height: 100px;
}

// now add the following to alter the min height for browsers that use it
// IE6 does not understand the child selector(>)
// PARENT is the classes imediate parent element

PARENT>.class {
  height: auto;
  min-height: 100px;
}

you can also use this method to specify different images for IE6 and other browsers specifying a .gif image for ie6 and a png with transparency for other browsers. That way the image will appear in IE6, it just won't look as good.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

757 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now