SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div layout errors

    Hi, im having a problem with a site, its http://nicaragua.lasnite.com in internet explorer 7.0 and FF the site looks fine, but on internet explorer < 6.0 the entire center div falls all the way down, can anyone help??? please?
    Last edited by AutisticCuckoo; Sep 4, 2007 at 22:17. Reason: Fixed broken URL

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is urgente for me :$ ; im willing to pay for some help

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks to me like the 11px padding on .gutter is adding to the width of #content.

    So you're trying to squeeze 200px + (560px + (2 x 11px)) into 760px.

    Because you're trying to fit 782px into 760px; something has got to give, so #content is pushed down so that its width fits below #sidebar.

    I hope this makes sense.

    I always try and steer clear of horizontal padding for this reason.
    My rule of thumb is that instead of using horizontal padding on an element, try and use a margin on its children.
    You'll get the same effect but without the IE problem.


    Hope this helps!
    Dan Willis
    I can has makez websiet. Lolz.
    twoseven.co.nz

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If he's using a complete and proper DOCTYPE (I haven't looked at the code since I'm still trying to update Windows on my new hard drive), then yes, the borders, margins and padding will add to the base width in Internet Explorer 6/7 and every other major modern browser. The best thing to do in this case would be to deducte the width (left and right) of the borders, margins and padding from the width (since the W3C box model is additive) and use the simplified box model hack to support IE 5.x (if IE 5 support is required that is, otherwise don't worry about it).

    Oh, and as a side note, SitePoint HQ requires that all "offers to pay" be done through the Looking to Hire section of the SitePoint marketplace. It's a simple policy that helps ensure that the boards don't get cluttered with job offers.

    Off Topic:

    *goes back to updating XP Pro*

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be better to do it without hacks; you shouldn't need the box-model hack in this case.
    Dan Willis
    I can has makez websiet. Lolz.
    twoseven.co.nz

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like I said.

    I stated that the BMH would be needed only if supporting any builds of IE 5 or 5.5 was required. Of course I'd be more worried about the ROUS than the BMH in this case.

  7. #7
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rodents Of Unusual Size?
    Dan Willis
    I can has makez websiet. Lolz.
    twoseven.co.nz

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You got it.

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    should I make #content 760 bigger than 782 ... sorry for posting this here; i was desperate!!!

  10. #10
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    u should cut down your width from 560 to 538 (minus 22) to allow for the 22 pixels added by the 2 11px paddings.
    Steve Davis

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Steve's right. Cut down on the size of the content so the padding can be applied to it to give you the desired width you really want.

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that means that I would have to fit all the picture, flyers, etc.. on a 538 div, rather than 560???

  13. #13
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep, if u want the 11 pixel padding.
    Steve Davis

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would making the sidebar instead of 200 170 work?

  15. #15
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CraniumDesigns View Post
    u should cut down your width from 560 to 538 (minus 22) to allow for the 22 pixels added by the 2 11px paddings.
    Bear in mind that if you do it this way, then it will appear different in IE7 and FireFox than it does in IE6.

    IE6 will add the padding 22px padding to the width, making it appear as you want it to, but IE7 and FireFox will make that middle column appear 22px narrower than you want it to.

    Did you understand what I suggested in my comment further up in this thread?
    Instead of using any horizontal padding at all on your .gutter class, you should get rid of it, and instead apply a left (and/or right) margin to all of the elements inside #content.

    You should try to eliminate any horizontal padding if you can.

    Cheers,

    Dan.
    Dan Willis
    I can has makez websiet. Lolz.
    twoseven.co.nz

  16. #16
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    more or less; I have no idea how to code this though :S

  17. #17
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wish I had the time to help you out... if I do find the time to take a closer look at it, I'll let you know.
    Dan Willis
    I can has makez websiet. Lolz.
    twoseven.co.nz

  18. #18
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks d_B - appreciate it ; perhaps someone else with a bit more time can help me out?

  19. #19
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    You've got white space above the doctype - it needs to be the very first thing in the document otherwise Internet Explorers will render things in quirks mode.
    Try removing this and see if IE6 displays the page as you are wanting.

    Bear in mind that if you do it this way, then it will appear different in IE7 and FireFox than it does in IE6.
    This isn't true - only when you use an incomplete doctype does IE6 display the box model differently.

  20. #20
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi mark; i tried removing the whitespace but still no luck before the docttype,


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
  •