IE 6 Container Layout Bugs - Please Help

HTML & CSS
1

Good afternoon everyone,

I am having a bear of a time here…I am working up this new layout for a client and I have got the thing working in EVERYTHING except for you, yes you guessed it IE6.

The problem here is that the Header and Footer of the site look just fine, but it’s the main content that seems to be the issue here as it’s being shoved out by what looks like 20 pixels or so. Anyone have any ideas on how I can get this to work the way I want it to in IE6? I have included a screen shot from IE6 to show you what I mean…

Many thanks.

Matt

2

I’m not seeing that in IE6.

3

Hi, are you sure this is IE6? Make sure your cache is cleared because this effect is not happening for me :slight_smile:

4

Looks ok to me also (apart fom the transparent pngs of course).

5

Hi Guys,

Thanks for the replies! I actually ended up fixing the alignment issues I posted about before…but now I have the whole transparent PNG issue and the negative margin I have on the “HomeSlider” container isn’t working in IE6, any ideas about that?

Thanks,

6

I bet it was the double float margin bug (I noticed the issue would appear if the displayh:inline; there on the parent wasn’t there ;))
The PNG issue is because IE6 doesn’t even support transparency on PNG images :frowning:
http://www.twinhelix.com/css/iepngfix/

I’ll look into the negative margin issue :slight_smile:

7

Hi, if I manually set it in my local copy then it is working, it seems to not be reading the negative top margin for some reason :slight_smile:

8

You seem to be calling it wrongly (somehow?). If I do this

<link href="http://firsttracksmarketing.com/client/nedd/css/NEDD-Home.css" rel="stylesheet" 

type="text/css" />

Aka an absolute URI, it works. Don’t know what’s going on here as of yet :slight_smile:

9

Ok, so I tried to implement this PNG fix for IE6 and I followed the instructions and I just can’t get it to work…any ideas here? All I really need is to get my images to come through properly and it just doesn’t seem to be working…any help is much appreciated.

Thanks,

Matt

10

I tried to implement this PNG fix for IE6 and I followed the instructions and I just can’t get it to work…
Hi,
Did you get the [FONT=Courier New]blank.gif[/FONT] in your image folder and did you edit the .htc file with the correct file path?

That is step #3 of “How To Use”, people often miss that step.

11

Yes I did do that, and I also put in the correct path in my global.css file that has the call for the .htc file and still no succes…

12

Try adding the two periods before the forward slash of your file path since the htc file is in your css folder.


// CONFIG: blankImg is the path to blank.gif, *relative to the HTML document*.
// Try either:
// * An absolute path like:  '/images/blank.gif'
// * A path relative to this HTC file like:  thisFolder + 'blank.gif'
var thisFolder = document.URL.replace(/(\\\\|\\/)[^\\\\\\/]*$/, '/');
IEPNGFix.blankImg = '[SIZE=3][COLOR=Red][B]../[/B][/COLOR][/SIZE]images/global/blank.gif';
13

Made the change and unfortunately no dice…

Any more ideas? :slight_smile:

Thanks

14

Hi,
I was playing around with that “Twinhelix pngfix” a while back and I just put everything in one folder called iepng. Even the blank.gif

Dropshadow Demo with IE6 png fix

Then I just used a CC for IE6 and I had no problems with it.


[COLOR=DarkGreen]<!--[if IE 6]>[/COLOR]
<script type="text/javascript" src="[B]iepng/iepngfix_tilebg.js[/B]"></script>
<style type="text/css">
img, div { behavior: url([B]iepng/iepngfix.htc[/B]) }
</style> 
[COLOR=DarkGreen]<![endif]-->[/COLOR]

Then I left the image path in the .htc just like it was from twinhelix

// CONFIG: blankImg is the path to blank.gif, *relative to the HTML document*.
// Try either:
// * An absolute path like:  '/images/blank.gif'
// * A path relative to this HTC file like:  thisFolder + 'blank.gif'
var thisFolder = document.URL.replace(/(\\\\|\\/)[^\\\\\\/]*$/, '/');
[B]IEPNGFix.blankImg = thisFolder + 'blank.gif';[/B]

http://www.css-lab.com/demos/rc-shadow/iepng/blank.gif
http://www.css-lab.com/demos/rc-shadow/iepng/iepngfix.htc
http://www.css-lab.com/demos/rc-shadow/iepng/iepngfix_tilebg.js
[URL=“http://www.css-lab.com/demos/rc-shadow/iepng/iepngfix.htc”]

15

Hi,

I copied your page locally and it works straight away using my local htc file so I assume you haven’t set the htc permissions correctly on your server (AddType text/x-component .htc)

You could also try copying everything to a local folder to make sure it’s working.