Solved

broken in IE6

Posted on 2007-11-27
4
271 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

688 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