SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need IE-Hack Help

    I'm working on a new design and it doesn't layout properly in IE (surprise right?) Anyway, it's standards compliant (except for a few ALT tags) and I can't figure out why my logo is hanging about 200px below where it's supposed to (and does in Safari and Firefox). I've attached a screener and a link to the page in question. Thanks guys.

    http://theskylight.org/beta/working%20template.html


  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because IE doesn't handle floats entirely correctly.

    The simplest solution might be to absolutely position #starburst.

    I suggest you check how the page looks in IE6. It's even worse.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I absolutly position #starburst everything goes caput.

    I've seen an IE6 shot, but do still need to worry about that, isn't IE7 a mandatory update through Windows Update now?

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Updating to IE 7 is optional, can't be done with XP sp1, Win 2000 or Win 98.
    Some people having problems with WGA cannot update...

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So that means I need not use transparent .png and standard code? That kind of makes me angry.

  6. #6
    SitePoint Enthusiast kennyisnotdead's Avatar
    Join Date
    Apr 2002
    Location
    Massachusetts
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If your project is time sensitive and you cannot afford to recreate the layout.

    Possibly do the dirty and add the IE 6 & 7 fix/hack, or create multiple style sheets and add browser detection. Also for IE are conditional comments. but when it comes to IE nothing is pretty.

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've fixed the layout in IE7 but the IE6 is just atrocious and I'm not skilled in IE-hacks so I don't know if I'd even be able to fix it. It'd probably be worth it to just force an alternate style sheet with a few hidden elements that shows people what they're not getting.

    What good are web standards when the biggest computer company in the world doesn't support them?
    /rant

  8. #8
    SitePoint Enthusiast kennyisnotdead's Avatar
    Join Date
    Apr 2002
    Location
    Massachusetts
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE 7 atleast has made improvements. The largest problem is that its not forgiving and is very particular on how things are done. But in the mean time:

    /* IE 7 hack */

    *:first-child+html #SomeIDorClass {
    height: 60px;
    }

    /* IE 6 hack */

    *html #SomeIDorClass {
    height: 60px;
    }

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no need for IE 7 hacks. Let me see what I can come up with.

  10. #10
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Los Angeles CA
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well you're kinda screwed if you try and use PNGs as a repeating background. Do they have to be? You might be able to achieve the same effect by using a matte.

    As far as the rest of the page goes in IE6, be mindful of IE6's broken box model...it looks like that's probably the main issue. Check out positioniseverything.net for some good tips on pummeling IE6 into submission without hacking yourself to death.

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE 6 only has a broken box model if you're not using a full, proper and complete DOCTYPE (or have anything above the DOCTYPE).

  12. #12
    SitePoint Enthusiast kennyisnotdead's Avatar
    Join Date
    Apr 2002
    Location
    Massachusetts
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Correct Quirks and Standards modes are triggered by DOCTYPE

    In standards mode, a modern browser will do its best to render the document according to the W3C recommendations, even if it leads to unexpected results. In quirks mode, a modern browser will try to handle an XHTML document like older browsers IE5-6.

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got a standard and correct DOCTYPE though, I'm using XHTML Transitional:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    .

    I'll check out the PositionEverything site when I get home, my work connection is a bit finicky right now.

  14. #14
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I'm coming up on completion with this project but I don't want to launch without IE6 hacks in place and I still can't figure out what to do. I really need some help. Fixing the broken box on this, evidently, would mean removing the width from all of my styles and putting them in a separate style (am I correct on this)? This would essentially mean starting over from scratch and recoding the entire site. Is this this only way to fix the problem, other then creating a browser detect and pushing IE6 and lower users to the current site?

  15. #15
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Really it's not that bad. Aside from all of the PNGs, it looks like you only need to fix the doubled float margin bug on #menu and #feature. To do that simply give them display:inline. Other browsers will safely ignore it.

    2) No, you wouldn't need to start over. You could just override styles for IE6 where needed in a stylesheet that you link to from within a conditional comment.

    3) IDs should be unique. You could use a class instead.

    Class and ID Selectors
    When should I use a class and when should I use an ID?
    Use class with semantics in mind
    The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS
    Using Firefox to Wage a Class War

    Multiple elements may belong to the same class and an element may belong to multiple classes. The X/HTML class attribute's value may be a space separated list of classes.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  16. #16
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    1) Really it's not that bad. Aside from all of the PNGs, it looks like you only need to fix the doubled float margin bug on #menu and #feature. To do that simply give them display:inline. Other browsers will safely ignore it.
    Thank you for that. That makes a world of difference. That, combined with a nice conditional comment at the top, should be enough for 20% of my viewers. Thanks again for your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •