#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    7
    Rep Power
    0

    IE Displays fine, FF and Safari display incorrectly


    My page is displaying correctly in IE 6,7,8(CV), but when I view it in Firefox or Safari, it does not display correctly.

    The problem I'm having is the div #main is not stretching to allow room for the content in it.

    In IE it stretches fine, but in FF and Safari it doesn't stretch at all.

    I've been all over the internet searching but I can't find any similar problems/solutions. I've tried whatever I can think of or find.

    Can somebody please help me or point me in the right direction?

    Page:
    <div id="main"> //problem div
    <div id="sideBar">
    <div id="header">
    &nbsp;
    </div>
    </div>
    <div id="mainContent"> //contains content that I need to be stretched to the height
    </div>
    </div>

    CSS Code:
    html { margin: 0; padding: 0; border: 0; }

    body { background-image: url(img/bg.png); background-repeat: repeat-x; background-color: #008A32; margin: 0; padding: 10px; border: 0; height: 100%; min-height: 100%; }

    #main { font-family: Arial, Helvetica, sans-serif; padding: 20px; position: relative; border: solid 1px #0C0; width: 760px; margin: 1px auto; background-color: #FFF; }

    #sideBar { width: 194px; float: left; clear: left; height: auto; min-height: 100%; }

    #header { width: 194px; height: 344px; clear: both; float: none; background-image: url(img/Logo01.png); }

    #mainContent { width: 546px; float: right; clear: right; height: auto; min-height: 100%; }


    Thanks in advance
    -Mike
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    7
    Rep Power
    0
    If I remove the float tags, this seems to fix the problem, but then my page is jumbled.
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    You did not properly enclose your float elements. Firefox, Safari, and IE8 in standards mode are displaying correctly according to what you coded.

    Any time IE other than IE8standards displays differently from Firefox and the others, IE is wrong. Bet the farm on it.

    Study the reference I linked; it has your solution.

    cheers,

    gary

    Comments on this post

    • mkman8678 agrees : It accurately fixed the problem I was having at the time.
    • Skipt agrees : Quite amazing how many threads for this one topic comes up...
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    7
    Rep Power
    0
    Gary -
    Thanks a lot for the info, it fixed my problem. But now several have arisen. I studied the page you gave me, and while it helped a lot (fixing my original issue) I'm not sure how to apply it to my new issues.

    I'm new to CSS positioning. I wish I could just show you my page so you could see the issues I'm having. I will respond tomorrow to this post with a discription of my new issues.

    Again, thank you very much for you quick and accurate response.
    -Mike
  8. #5
  9. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Post a link to your website like so: www .yoursite. com/testpage.html

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    7
    Rep Power
    0
    Page: www .greeninkllc. com/index.aspx
    CSS: www .greeninkllc. com/GreenInk.css
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    7
    Rep Power
    0
    In IE - displays how I want it to look
    Firefox - The hand holding the globe is incorrectly placed (technically correctly, but not how I want it), but the widths are correct
    Safari - The width on the footer is bigger than the width on the main div, but the hand is where I want it
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    To #mainContent, add {position: relative;}. An absolute positioned (AP) element is positioned relative to it nearest positioned ancestor. See 9.3.1 Choosing a positioning scheme: 'position' property. IE<8 positions relative to its ancestor with hasLayout, which is #mainContent, in this case.

    cheers,

    gary

    Comments on this post

    • mkman8678 agrees
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    7
    Rep Power
    0
    Thank you very much Gary. It seems to have fixed the problem I was having. If I could please bend you ear one more time, in Safari the width of the footer is 40px wider than #main. Besides that, everything is perfect. Thank you very much for your help so far!

    -Mike
  18. #10
  19. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    It's not that Safari makes the footer 40px wider; you did that. Your main box is 800px wide, and the footer is 840px wide.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    7
    Rep Power
    0
    I see that, but I have padding and margin on the main box, and safari handles that differently. FF and IE both display it how I want it to look, but Safari renders the css differently, and I'm not sure how to make it consistent with FF and IE.
  22. #12
  23. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    I don't know what's happening, but I can tell you what I think is going on.

    #main is {display: table;}. I think as a table display, there is confusion about how to handle the padding, which is not a property applicable to table display.

    If you replace the display property with {overflow: hidden;}, you should get x-browser agreeance.

    Each method of enclosing floats has its own gotchas, but there is always one that will work.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo