SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    box model hack for IE on PC

    Hello

    I am on a mac, and my client told me that on IE PC the site's alignment is off. Could someone please point me in the right direction?

    http://siborg.com/nina/public_html/

    I think it might have someone to do with my divs and padding - even though I thought I that I applied the hack.

    Is it on all pages of just on the index page?

    Thanks a million.

    nina

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I don't have my IE machine now but at browsershots I see nothing amiss positioning-wise with IE6 and 5.5... waiting for 7 to show up...

  3. #3
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what is this neato tool you speak of ?
    and thanks.

  4. #4
    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)
    www.browsershots.org

    There's also www.totalvalidator.com as well which not only allows you to view your site in multiple browsers (by taking screen shots of them) but also has a built in validator as well.

  5. #5
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not going to be a box model issue unless you are supporting any version below 6

  6. #6
    SitePoint Enthusiast LadynRed's Avatar
    Join Date
    Sep 2003
    Location
    TN
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6's box model is the same old mess as it's predecessors....

    It appears ok on my IE 6, alignment seems fine. The only thing that's a tad off is the heading "Hottest New Jobs" is sitting flush to the vertical dotted line and the bulleted list below it is off too.

  7. #7
    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 will only use the old box model if you're in Quirks Mode. The only way that can happen is if you're not using a complete and proper DOCTYPE or if you have anything above the DOCTYPE (even a space).

  8. #8
    SitePoint Enthusiast LadynRed's Avatar
    Join Date
    Sep 2003
    Location
    TN
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use an XHTML 1.0 Strict doctype and I can assure you there is not a single thing above the doctype line in my code - and the problems with IE 6's box model still exist - it still gets it wrong with margins and padding - among other things.

    Since I work in a corporate environment, I'm stuck with IE6 (until they get around to upgrading to IE7 -- someday), but all the patches and updates get applied by our IT dept, so it's not a version issue.

  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)
    As do I. What you're probably running into are hasLayout issues, the 3px jog and the double margin bug.

  10. #10
    SitePoint Enthusiast LadynRed's Avatar
    Join Date
    Sep 2003
    Location
    TN
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True.. those 2 stupid bugs are always there and I know how to beat them, or code around them when necessary.

    **edit**
    Ok, I went scrounging and came up with an MSDN section on IE6. I see that they did go with the W3C box model.. sorry, my bad.
    I hate that thing so much.. it's been such a pain for so long.. lol.

    I just keep my fly swatter handy

  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)
    I can't stand it either. But I've been working with it since 2002 so I've learned more than a few ways to code around it - part of which led me to go with my "Minimal Markup" philosophy of using as little code as possible, even when you think it can't be done.

  12. #12
    SitePoint Enthusiast LadynRed's Avatar
    Join Date
    Sep 2003
    Location
    TN
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a good philosophy ! I try to keep my code as lean and mean as possible, we've got too many sites to keep up with to have to plow thru unnecessary stuff !

  13. #13
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so does anyone know how i can fix my problem ?

    this is exactly what i am trying to fix

    "the "Hottest New Jobs" is sitting flush to the vertical dotted line and the bulleted list below it is off too."

    the thing that makes it worse too, is that i'm not on a pc.

    any ideas ?

    thanks

    nina

  14. #14
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its missing the "padding"

  15. #15
    SitePoint Enthusiast LadynRed's Avatar
    Join Date
    Sep 2003
    Location
    TN
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, for one thing you're triggering IE's doubled float margin bug with this:

    .thrColFixHdr #sidebar2 {
    background:#FFFFFF none repeat scroll 0%;
    float:right;
    margin-right:20px;
    padding:15px 0pt 0pt;

    Any time you put a float something and then give it margin in the same direction as the float, IE will DOUBLE that margin, so instead of 20px, IE is making it 40.

    To stop that, I use a separate css file for IE bug-squashing rules only, and target it with conditional comments.

    In this case, you'd need a rule that says:

    .thrColFixHdr #sidebar2{ display:inline;} - that stops the bug.

  16. #16
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I work on a mac and use netrenderer to give immediate screenshots of pages viewed in IE. Its helpful, but sorry I can't help with your problem as I am struggling with the same thing right now! Good luck.

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    To stop that, I use a separate css file for IE bug-squashing rules only, and target it with conditional comments.
    You can also just have it in the one stylesheet (for when you don't already have an IE one). Other browsers are smart enough to ignore display:inline (including IE7) which is good. But as I recall, one float itself doesn't double the margins... I thought you needed two floats in the same direction to get that going.

    To the OP, I seriously couldn't see anything truly amiss on your page. Whatever's wrong, it's no disaster. I really couldn't see anything. Esp since most of it is Flash or something, which pretty much displays the same in browsers that can play it.

    What you might want to do is get something like Parallels or whatever's out there for WIndows emulators.. you really can't stay building sites on a Mac, not without access to a pile of browsers. Instead of hoping for friends with PCs, get a decent emulator with IE6 and 7... and while your at it, if you don't have Opera and FF get those too. And while you're at it, Lynx and a screen reader wouldn't be a bad extra. Not sure what they have out there for Macs...

  18. #18
    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)
    It's actually a float against static content (if I recall correctly that is). Which is why I tend to have adjacent floats. That and using overflow: hidden; on my content's first child DIV (always the ONLY "first child" DIV the way I code) really helps a lot.

  19. #19
    SitePoint Enthusiast LadynRed's Avatar
    Join Date
    Sep 2003
    Location
    TN
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also just have it in the one stylesheet (for when you don't already have an IE one).
    I've gotten in the habit of ALWAYS having one as there is often more than one bug-squashing rule needed. I refuse to have hacks in my main css file because of one very bad browser and until it dies it's very deserved death I'll probably keep doing it that way . It works for me.
    Web Goddess & Web Standards Evangelist


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
  •