SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page cut off/Alignment problem

    Hello all. I'm having a couple problems with the following layout: XHTML http://www.mymobility.us/new.htm* CSS http://www.mymobility.us/s/new.css*

    All observations on a Windows XP Home Edition using the latest Mozilla Firebird and Internet Explorer browsers.

    - "Newport, Rhode Island" should be 5 pixels from the top border (Mozilla Firebird has about a 20 pixel gap and Internet Explorer has a 1 pixel gap). What's with the variations?

    - Internet explorer does not display the document in its entirety. The bottom is cut off after the logo image ("Recreational Therapies"). It displays correctly in Mozilla Firebird.

    Thank you for any suggestions you may have!

    *Original has been updated.
    Last edited by Lewis; Dec 22, 2003 at 19:32.
    -Lewis

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

    Mozilla has different margins to ie on some elements so you have to set them explicitly to cater for any differences such as the p at the top of the page. Also mozilla has a top margin bug where it occasionally inherits the margin of its first child element.

    The code at the top of the page can be simplified to rectify the problem.

    I'm not sure what the other problem with ie is at the bottom of the page but again simplifying the code seems to make it work ok. (I've adjusted one of mozillas margins again to make everyhing appear equal, although if you spend some time simplifying the positioning scheme you might find where the difference is occuring.

    Try changing the named styles to exactly as below and I think the layout should be like you want.
    Code:
    #head {
    position: relative;
    border-top: 5px solid #03c;
    }
     
    #head p {
    text-align:right;
    margin-top: 0px;
    }
     
    #content {
    position: relative;
    clear: both;
    line-height: 1.5em;
    background: url(../head_programs.gif) no-repeat left top;
    padding-top: 20px;
    }
    html>body #content {padding-top: 40px;}
     
    #main {
    width: 70%;
    margin: 0px 0 0 0;
    padding-right: 15px;
    font-size: 1em;
    text-align: justify;
    }
    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul!

    Why

    Code:
    html>body #content {padding-top: 40px;}
    Also, I'm not sure if this has been debated, but is it wise to use percentage widths for a fixed layout to get around having to use a box model hack?
    -Lewis

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Why?
    html>body #content {padding-top: 40px;}
    This just uses the child selector (>) to pass values to mozilla (and other browers) and not ie. This levels the playing field and makes up for any difference. (Occasionally IE gets its margins and padding wrong for a number of reasons (left or right margins on floats on the side nearest the windows edge for example). Sometimes I just can't be bothered to work out (or can't see) where the error lies and and so I just fix it to look the same )

    Also, I'm not sure if this has been debated, but is it wise to use percentage widths for a fixed layout to get around having to use a box model hack
    You will still run into problems with the box model hack with percentages (perhaps even more so). If you have two containers of 50% each and then add padding then they will be bigger than the screen size and cause a horizontal scroll bar or cause floats to drop below each other.

    The best way to avoid the box model hack is to code with it in mind and try to set padding/borders on inner elements and only use the box model hack when absolutely necessary.

    Paul

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Boston
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You, that was very helpful.
    -Lewis


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
  •