Grow your CSS skills. Land your dream job.

need quick help – small IE6 issue

  • # January 5, 2009 at 2:03 pm

    http://www.patchwarehouse.com/index2.html

    On nearly all of the pages right before the footer starts there is a small gap which you will notice between where the left and right borders end and where the footer begins. Can’t seem to understand how to remedy that. It’s fine in FF2 and IE7. This is the only thing preventing launching this one.

    Feedback like in like the next couple of hours would be very ideal.

    # January 5, 2009 at 2:31 pm

    I had this issue and took me forever to fix it…

    On your container layer (in your case mainContainer) its expanding more than it should in IE6…

    Try to put an IE6 only hack in your css

    * html #mainContainer {font-size: 1%; overflow: hidden;}

    in some cases it will work with just overflow: hidden… in my case I had to have both the overflow and the font-size in order for my footer to collapse to my content wrapper..

    # January 5, 2009 at 2:54 pm

    thanks Polonel – I tried your suggestion but unfortunately it didn’t resolve the issue. there’s still like about a 10-15px separation between where the bottom of those borders and where footerWrapper starts. weird…

    # January 5, 2009 at 3:03 pm

    I’m sorry.. I checked my CSS and i have mine set:
    font-size: 0;

    for my main wrapper not 1%. sorry I didn’t have it right in front of me. Try that and let me know what you get..

    # January 5, 2009 at 3:20 pm

    hmmmm….doesn’t seem to help any – tried adjusting that font size down and still getting the same result.

    this is what I added to my CSS

    Code:
    * html #mainContainer {font-size: 0; overflow: hidden;}

    any other ideas?

    # January 5, 2009 at 4:04 pm

    Okay after testing your site through many different areas I have come to the Solution…

    THE FIX
    The image at the bottom is throwing it off in IE6. So the changes i made to your CSS to get it to work are as followed: (All changes were made to style2.css)

    Code:
    img.display {
    float: right;
    margin: 10px 0 10px 10px;
    display: inline;
    }

    And at the VERY VERY bottom of your style2.css you have to add these lines to get the footer to push up!

    Code:
    * html #wrapper {font-size: 0; height: 1%}
    * html #mainContainer {position: relative; overflow:hidden;}

    I have it running no problem so i know this should fix you up…

    # January 5, 2009 at 4:41 pm

    Polonel,

    Sure do appreciate the assistance. I did take what you suggested and made those changes to style2.css and unfortunately still not getting any resolution with that. In IE6 on the front page – index2.html I get like the last two characters of the last word ‘service!’ down at the bottom on the left – that’s very puzzling to me. The other pages ‘custom patch pricing’ and ‘embroidered patch gallery’ all that have that gap as well.

    # January 5, 2009 at 5:12 pm

    I get the same problem with the 2 letters… I’m looking further into your issue…

    Another note:
    Take the javascript out and put it in a serpate .js file and call it in the header.. its making your code very invalid…

    # January 5, 2009 at 5:21 pm

    Just did that (.js in separate file) – thanks Polonel – again appreciate the assistance

    Below are some screenshots of the three issues

    http://www.patchwarehouse.com/images/index2.jpg
    http://www.patchwarehouse.com/images/pricing.jpg
    http://www.patchwarehouse.com/images/gallery.jpg

    Thanks

    # January 5, 2009 at 5:25 pm

    To fix the border….
    Move the border off the #mainContainer and put it on the #Wrapper in Style2.css

    That worked for me to get the border to space down.. but still getting those 2 letters on the Home page.. other pages look great just those 2 letters bugging me..

    Your problem has become my problem cause now i’m mad this thing is stomping me.. :)

    # January 5, 2009 at 5:37 pm

    All good now on the border issue. Thanks. Yeah…those last two characters are absolutely baffling me… :?

    # January 5, 2009 at 5:47 pm

    Okay I have your fix.. you might not like…

    This is a bug known as Ghost Text in IE6.. its caused by the HTML comments inside the document
    <!– COMMENT –>
    I removed all HTML Comments on the page and the 2 letters went away…

    Here is a source to help you better understand it.. as I myself hadn’t seen this before on my work (but i don’t use comments)

    http://www.impressivewebs.com/ie6-ghost-text-bug-with-multiple-solutions/

    # January 5, 2009 at 5:52 pm

    My first thought is that you’ve got to be kidding me. It figures…

    I do a decent bit of commenting just to provide a little code organization not only for me but for any coming behind me. This is a first and am glad to know what this occurs.

    Again, you’ve been a huge help this afternoon and feel like I can leave today with a little load off my shoulders.

    The folks on this forum might be the best I’ve been around – very helpful, patient, thorough, etc.

    Many thanks my friend

    # January 5, 2009 at 5:55 pm

    Your Welcome..

    I know what the frustration can be like trying to get something working right for IE in general.. Glad I could help and I picked a topic off the 4ums today and said I’m not leaving this topic until I help this person… Glad to stick around to the end with ya..

    Good Job and Glad I could be some Help!

    -Chris

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".