Page cut off/Alignment problem

[Lewis]

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.

[Paul O'B]

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.

#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

[Lewis]

Thank you Paul!

Why

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?

[Paul O'B]

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

[Lewis]

Thank You, that was very helpful.