Solved

broken in IE6

Posted on 2007-11-27
4
265 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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 learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

808 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