CSS vertical alignment

[webhead]

Here is a link to the page in question:
http://test.fether.net/pagelayout.php

I want the three boxes inside the gold area to all be tight against the top of it.

In Safari, the boxes are where I want them, but in Firefox on the Mac and both Firefox and IE on the PC, all three boxes are down about a quarter inch. I listed the CSS code on the bottom of that page, can anyone tell me why the boxes aren't going where they should? Thanks in advance.

[Banfa]

This is a common problem when trying to layout pages, there is nothing wrong with the layout of your tags and your CSS, the problem lies in the white space you have put in the file.

In this case the specific problem is the first   The space you see the the space required to display that space that you have said can not be modified, remove it and the gap disappears.

In extreme cases it has been necessary to remove the normal spaces and newlines between tags to get a page to display as required on all browsers.

In some cases use of the CSS "overflow: hidden;" can be of use.

[webhead]

Thanks, all better now. I don't know why that   was there at all, or how I missed it. Sometimes you just need another pair of eyes. Thanks again.

[webhead]

Similar problem, but I don't have any errant   laying around:

http://www.test.fether.net/WebSlinger/login.php

Firefox on PC and Safari on Mac put the body tight against the header box.
IE on PC puts a very small gap between the header box and the body.
Firefox on Mac puts a large gap between the header box and the body.

The header box is in a division and the body box is in the very next div, nothing between. The CSS for the two divs is:

#headbox {
    margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;
    width: 780px; height: 159px;
    text-align: center;
}
#pagebox {
    width: 780px;
    margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;
    border-width: 0px 2px 0px 2px; border-style: ridge; border-color: pink;
    background-image: url(../images/WSbktile.jpg);
    text-align: center;        /* for IE which ignores auto */
}
 
 

Any ideas?

[Banfa]

The problem is in the html you do have an errant space (not a &nbsp; just a normal space) between the the end of the image tag and the closing </div> tag in the head box.

[html]
<div id="headbox"><i mg ... > </div>
^
Here
[/html]

BTW did you know that

margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;

could be written

margin: 0px auto;

This has 4 general forms

margin: <AllMargins>;

margin: <TopBottomMargi ns> <LeftRightMargi ns>;

margin: <TopMargin> <LeftRightMargi ns> <BottomMargin >;

margin: <TopMargin> <RightMargin> <BottomMargin > <LeftMargin>;


Also works for padding.

[webhead]

Ah, thanks. It's one of those little things like not having any space around textarea tags, took me quite a while to find that one out. Dang details.

Somewhere I found a page that tells of all the CSS shortcuts, but sometimes I just don't feel like looking it up right away. Now I don't have to! Thanks!