Content not displayed in IE6

HTML & CSS
1

I have the following code which works fine in IE7 but not in IE6. The image (CSS class: FeatureRightExecProfile) does not show up in IE6 at all.

<div class=“element”>
<div class=“bulletLinks2”>
<ul>
<li><a href=“myLink1.jsp”>Link 1</a></li>
<li><a href=“myLink2.jsp”>Link 2</a></li>
</ul>
</div>
<div class=“FeatureRightExecProfile”>
<a href=“myUrl.com” target=“_self”><img src=“myImg.jpg” width=“72” height=“92” border=“0” /></a>
</div>
</div>

Here is the CSS.

.element {
min-height:: auto; height: auto; background: #fff;
margin: 0px auto !important;
display: none;
color: #666666;
padding: 0px;
overflow: hidden;
}

.bulletLinks2 {
float: left;
margin: 5px;
}

.bulletLinks2 li {
background: url(…/images/bullet.jpg) left 6px no-repeat;
text-indent: 3px;
margin: 0px 0px 0px 0px;
}

.FeatureRightExecProfile {
float: right;
margin-top: 10px;
margin-right: 5px;
}

The element class applies to a toggler and I want to hide the content while the page is loading and so I have display: none defined on element class. When the user clicks on the corresponding tab , I am modifying the display style property value of the element to ‘block’ and it works fine in IE7. In IE6, element with class “bulletLinks2” is shown but element with class “FeatureRightExecProfile” is hidden.

2

Hi, I’m not seeing what you are seeing probably because I’d need the page to do full debuging

But try out this CSS :slight_smile:
Also I should note you had two :: before teh min-height property below. I fixed it. Unless you have a good reason there is no reason why you should declare the min-height/height:auto there. I removed it unless you need it, in which case you can put back :slight_smile:

.element { 
zoom:1;
background: #fff; 
margin: 0px auto!important;
display: none;
color: #666666;
overflow: hidden; 
}

.bulletLinks2 {
float: left;
display:inline;
margin: 5px;
}

.bulletLinks2 li { 
background: url(../images/bullet.jpg) left 6px no-repeat; 
text-indent: 3px;
margin:0;
}

.FeatureRightExecProfile {
float: right;
margin-top: 10px;
display:inline;
margin-right: 5px;
}
3

I made the code changes but still same issue. My page is on intranet so I cannot provide a workable link for you. Any other thoughts ? Thanks

4

Can you provide sample code where even we can see the issue? If I can’t see the issue it’s harder to fix it :).

I know you gave code above but using that and trying to fix it based off that code is a no go.

5

The issue is resolved. I don’t see the issue after I replaced the png image with gif. Not sure why IE6 is having a conflict with png image and CSS display attribute. (In the previous thread, the image was jpg but actually it was png).

6

IE6 has trouble with transparent PNGs so you would need to have used a PNGfix such as twinhelix :slight_smile:
http://www.twinhelix.com/css/iepngfix/