Before I start...Let me just say I know what I'm thinking of, I just can't manage to put it into words exactly...



Aren't their some websites that use a separate, "dumb-downed" style sheet for IE6 viewers so they still acquire the information, but it just not as fancy-smancy (yeah, I know...real technical there)?

I'm trying to consider probable solutions to the IE6 issue without having to resort to hacks (and wasting hours for a handful of people)...I could live with providing an extremely basic website to IE6 users (with a warning at the top recommending a browser upgrade, that the website is not being viewed as it was intended because of their browser choice, etc) and using a redirect...I could have sworn that I read somewhere that Yahoo did this?

there is no need for hacks. just use conditional comments

AND to be perfectly honest there is very little need for those, I think I have used them once in about 4 years and NEVER used any "hacks" to make IE "behave".

All you need to remember is there is nobody plus you going to look at the site in more than one browser side by side, on the same machine, at the same window size/resolution.

provided the site works and isn't completely FUBARed, no one will notice the couple of pixels extra width here and there, a font that is slightly larger/smaller, a 1% colour difference etc etc.
Don't worry about them, you will simply make grief for yourself "fixing" a problem that doesn't really exist to anyone but you.

Thanks for the response.



It's a lot more then just font size, color difference, etc that I'm worried about...

As an example, I'm working on a redesign for my website (temporarily available here) and as you can see their are some major issues in IE6. I'm on a Mac, so finding a work around for even IE7 is difficult (if you look at it now in IE7, it ate my text menu and Flash...haven't figured them out yet), let alone IE6.

I consider adding conditional comments hacks as I have to find and do extra work to make one crap browser work (which less then 10% of my viewers use). I'd honestly be much happier with the whole thing redirecting them to a page that says "update your frickin' browser already." But I know that's not the best thing to do.



I had to look up what FUBARed stood for...

OK, I see the huge block pushing your right content down. I can't remember the specific bug that is, but check positioniseverything.net. There's nothing that can't be corrected with a couple conditional comments, nothing drastic. While this likely is not causing your problem, while I was looking at the code I noticed your opening anchor elements are using self-closing endings that shouldn't be there. Also, you might want to check out SWFObject for embedding your Flash content; you'll be a lot happier if you do. Didn't know what FUBAR meant, huh? You haven't been around a lot of military people then.

tim

Thank you for the link, I'm going to investigate it tonight.

The other malfunction with IE6 is that don't read transparent PNGs...I guess I can just do some sort of conditional comment to nix the trans PNGs in the layout?



I actually have military running all through my family. My Dad's side is Navy, my Mum's side is Army...and then my Mum married a Marine...Guess I never paid close enough attention to the lingo.

Ok, I looked on that website and nothing is point and blank telling you what to do. Just a lot of long-winded articles that are confusing. I just need told what to do so it can be done.



I've tried:

<!--[if IE 6]>
<div style="clear:both;"></div>
-->
inside the float container.

div.hpheader hr {
display: block;
clear: left;
visibility: hidden;
}
in an IE6 specific stylesheet.



I'm still thinking an IE6 specific "dumbed-down" stylesheet for an alternative website is going to be the best bet so I stop wasting time.

I've been trying to find that bug myself, but it's escaping me. I'm pretty sure, though, that if you put overflow:hidden; for that container in conditional comments for IE6 you'll find what it's doing. I'm pretty sure what you've got is one of those pernicious IE6 float bugs with div width. Might have to change your padding slightly or something just for that browser. But you shouldn't have to do a "whole 'nother" sheet.

tim

The only thing I could guess is it's a "ie drop float" issue. I've tried pages upon pages of solutions (wasted hours of time) I found on here and on Google and NOTHING will fix it. I think I'm just going to stick with my redirect page that says "Perhaps you weren't aware, but you are using an extremely outdated version of Internet Explorer. We apologize, but due to changes in browser standards, security issues and general Internet abilities, we must strongly suggest you update your browser." I am so tired of trying to make simple things work for a browser that only a handful of people actually use.

Try floating #hpcontentright right, removing its left margin, and making .hpcontent have overflow: hidden;

Originally Posted by wayfarer07

Try floating #hpcontentright right, removing its left margin, and making .hpcontent have overflow: hidden;

Nope, nothing.
Thanks for the suggestion though.

1- remove the 381px left margin on the right content box. You've floated that box right, so there's no need for the left margin.

2 - remove the 15px padding on the left and right of the left content box. Put the padding on the elements INSIDE the box, not on the box itself.

4- your nav box is too wide, it's pushing the right side out, narrow it to like 510 and that will stop.

Obviously, you make all these 'adjustments' in the separate CSS file called by the conditional comments.

Originally Posted by LadynRed

1- remove the 381px left margin on the right content box. You've floated that box right, so there's no need for the left margin.

I tried this...
I think you might have looked at it when I was fudging with it...

Originally Posted by LadynRed

2 - remove the 15px padding on the left and right of the left content box. Put the padding on the elements INSIDE the box, not on the box itself.

Did not do this. Thanks.

Originally Posted by LadynRed

4- your nav box is too wide, it's pushing the right side out, narrow it to like 510 and that will stop.

I also tried this already...
Narrowed to 500 and it hadn't done anything...



I'm guessing you can't see the IE6 specific stylesheet that this is linked to?

Here's the CSS:

/******************HEADER******************/
.hpheader {
    height: 128px;
    background: url(images/swatch_drkgrey.png);
}
.hpheaderleft {
    width: 381px;
    margin:0px;
    padding:0px;
}
#hpheaderright {
    width: 500px;
    float:right;
    padding-top:70px;
    text-align:center;
    color: #FFFFFF;
    font-size: 110%;
}
#hpheaderright a:link {
    color: #FFFFFF;
    text-decoration: none;
}
#hpheaderright a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
#hpheaderright a:hover {
    text-decoration: underline;
    color: #FF0066;
}
#hpheaderright a:active {
    text-decoration: none;
    color: #FFFFFF;
}

/******************CONTENT******************/
.hpcontent {
    width: 900px;
    background: url(images/hpr2_bckgrnd.png);
    overflow: hidden;
}
.hpcontentleft {
    width: 381px;
    margin:0px;
    padding:0px;
}
#leftcontenttext {
    padding:0px 15px;
    color: #FFFFFF;
}
#leftcontenttext a:link {
    color: #FFFFFF;
    text-decoration: underline;
}
#leftcontenttext a:visited {
    text-decoration: underline;
    color: #FFFFFF;
}
#leftcontenttext a:hover {
    text-decoration: underline;
    color: #FF0066;
}
#leftcontenttext a:active {
    text-decoration: underline;
    color: #FFFFFF;
}
.hpcontentright {
    width: 519px;
    float:right;
    background: url(images/hpr2_02.png) no-repeat;
}
#rightcontenttext {
    padding:30px 33px 0px 45px;
}
#rightcontenttext a:link {
    color: #333333;
    text-decoration: underline;
}
#rightcontenttext a:visited {
    text-decoration: underline;
    color: #333333;
}
#rightcontenttext a:hover {
    text-decoration: underline;
    color: #666666;
}
#rightcontenttext a:active {
    text-decoration: underline;
    color: #333333;
}

Well, if that hasn't done it, once again, in your conditional comments, put overflow:hidden; on that content box and put different colored borders on your containers so you can more easily see what IE6 is doing. But as of right now you still have the box pushing your content down. Did you remember to put the conditional comment page link after your main CSS link?

tim

Originally Posted by serandfae

Did you remember to put the conditional comment page link after your main CSS link?

Yup. It's reading the IE6 stylesheet just fine...Just the CSS isn't working how I thought it was supposed to. It's really weird too because this is far from the first 2 column layout I've done...I just can't get this one to work.


And again...I got to say it...Why is this even worth it for a handful of viewers?

OK, try defining a width for your right content text, and make sure it's slightly under 519px including the padding. That's why I suggested the overflow: hidden; to see what was going on. I think this is the bug where IE6 pushes the content down because it thinks that your content is overflowing the box even though it isn't.

tim

I can't see what the hpcontent looks like as netrenderer cuts it off, so I'm actually trying to get the hpheader to work and then hoping once that's fixed whatever it is will also fix in hpcontent. I did your border thing and for some reason hpheaderright isn't reading CSS width:500px?

Ok...I think I figured it out...

In the regular stylesheet I had:

#hpheaderright {
        width: 519px;
        padding-left:388px;
        padding-top:70px;
        text-align:center;
        color: #FFFFFF;
        font-size: 110%;
}

In the IE6 stylesheet I had:

#hpheaderright {
    width: 500px;
    float:right;
    padding-top:70px;
    text-align:center;
    color: #FFFFFF;
    font-size: 110%;
}

Note padding-left was missing in the IE6 stylesheet. I didn't know it would still read the padding-left from the regular stylesheet.



Jeeze...I can't believe that's all it was...

Thanks everyone for your help! I'm going to tuck my tail between my legs and hide under the bed for not realizing it was something as silly as that!

Originally Posted by LadynRed

1- remove the 381px left margin on the right content box. You've floated that box right, so there's no need for the left margin.

2 - remove the 15px padding on the left and right of the left content box. Put the padding on the elements INSIDE the box, not on the box itself.

4- your nav box is too wide, it's pushing the right side out, narrow it to like 510 and that will stop.

Obviously, you make all these 'adjustments' in the separate CSS file called by the conditional comments.

LnR had it right, but let me add this: When you narrow the nav box, you'll also have to narrow the background image. That's what I missed. Again, make sure that TEXT has a defined width, and that its width plus padding is less than the nav box. That's what IE6 is most likely choking on, thus pushing the box down.

EDIT: Oh! Did you get it? OK, then, cool!


tim

Originally Posted by TripleMoons

I didn't know it would still read the padding-left from the regular stylesheet.

That is why most alternate stylesheets are very very small. It usually takes only a few different and/or overriding rules to make a difference in IE.

Originally Posted by wayfarer07

That is why most alternate stylesheets are very very small. It usually takes only a few different and/or overriding rules to make a difference in IE.

Not too sure what that has to do with it reading the code from the main stylesheet. I know the alternative stylesheets are going to be very small...It is very small in this case...I just removed a line of CSS thinking that I didn't need it...and evidently you do or it'll read it from the main stylesheet anyway.