SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One more IE6 lyaout problem

    Hi there, I'm new - I hope I'm posting in the right place and doing it in the right way... Gosh new forums are intimidating!

    I've made a site and it's currently in testing at http://www.designbygecko.com/Stoney

    The site displays just fine in FF, Safari and IE7 as far as I can tell - but I just don't know where to start with fixing it for IE6. I think it increases the size of the #main_content and the #sidebar so that they don't fit in their parent #content div.

    Any help at all, I'd be so grateful.

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry but first I'd suggest fixing the errors that the w3c validator gives you

    http://validator.w3.org

    If you're not using valid code then each browser may render your code differently so I'd suggest fixing those issues first.

    Looks like it may be something as simple as the double margin bug though, i.e. margins on the left are doubled for floated elements. To fix this you'll need to add display: inline; at the end of the offending styles.

    I would suggest fixing the validation issues first though as it'll always make debugging problems much easier

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there mr wiz, thanks for taking an interest.

    I have gone through the validation as much as I can - it's invalid only on items that I've been asked to embed. I don't think that they're causing these layout issues... though I could be wrong!

    I've looked at the double-margin bug with my floats, but that would only increase my sidebar's margin to 2px, which would still fit. My main_content has no margin to be doubled.

    Just to be sure though, when I saw that bug, I added the declarations anyhow! Don't suppose someone wants to make my day and tell me the site views correctly now?

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oho! I think I've cracked it!

    It may be obvious to everyone else, but I didn't know that IE "treats width and height as a minimum and will always expand the container to accomodate any content that is greater than the dimensions set."

    The solution was a very simple overflow:hidden; declaration in the css for the two floated divs.

    Just the min-height problems on the music page still to go then!

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for posting your solutions! You just helped me!
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  6. #6
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great to hear! Honestly, I can't believe I helped someone

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The solution was a very simple overflow:hidden; declaration in the css for the two floated divs
    Although that has fixed the display it is really just a band aid that is covering up the underlying reasons why the page failed .

    There should be no need for the overflow unless you are suffering from a bug or using it for a good reason (such as float clearing or dropping).

    The problem in your page is one of housekeeping and you are inserting inner elements that are bigger than the parent. As you already found out IE will stretch the parent to accommodate these extra large elements whereas Firefox will let them just overflow.

    The correct solution is to make sure that the elements you are placing inside actually fit. These are the elements that are causing the floats to drop.

    Code:
    <h2 id="newsheadline">News - off on an everlasting tangent</h2>
    <h3 id="minigigs_header">Upcoming Gigs</h3>
    <img src="http://www.designbygecko.com/Stoney/images/minigigs_footer.jpg" alt="Stoney Live" id="minigigs" width="278px" height="186px"/>
    If you check the css for those elements they are all bigger than the container that holds them and unless you are trying for overlapping effects then there should be no need for them to be bigger.

    If you do want them to be bigger that the parent then its usually best to absolutely place then within a nested a container that has a set height to preserve the flow and position:relative added. You can then place them outside the bounds of the element quite easily. You can also use negative margins in some cases but ie doesn't like this where the element has a width or you run into the original problems.

    In most cases its best to use a logical approach that makes sense rather than trying to squeeze things in and hope the browser can sort it afterwards

  8. #8
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha! I knew I hadn't helped!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Aha! I knew I hadn't helped!
    lol - well I'm not saying that you can't use that approach but you just need to understand the underlying reasons why If you understand the reasons why then you can say "yes, I know! but this works in this case and does what I want more easily than other methods".


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
  •