Css Layout

[php_noob]

Hi, Guys Good day to all of you I come in peace.

I have this very weird experience in layout. I checked it in IE and its good (not in FIREFOX) well its weird because when I try to minimize the window of my browser the right panel goes down and the center content goes down also.... haay I have to fix this..... and I don't know what to do.

[Scrawn_Dog]

I'm experiencing a very similar thing.

I have the page looking exactly as I want it in Explorer.
Mozilla on the other paw...

I tried to be a bit crafty and made the whole page in Adobe ImageReady. Mainly to get the table cell layout done easily as it's a little complex. I used the stylesheet to get the image in the background of the content table cells. Where banner is the top cell, barker is a slim cell undeneath to the left and content is a larger cell to the right; the CSS reads as follows:

td.banner {
background-image:url(../images/banner.jpg);
background-attachment: fixed;
background-repeat:no-repeat;
}


td.barker {
background-image:url(../images/red_background.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
}


td.content {
font:Verdana, Arial, Helvetica, sans-serif;
height:396px;
width:755px;
background-image:url(../images/content_background.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
overflow:auto;
padding-top:33px;
padding-left:20px;
padding-bottom:28px;
}

I have noticed that when my window sized is reduced, the images appear in the background to the left of the cells. They don't sit where I want them to which is centred in each table cell.

Am I doing the right thing in the stylesheet by referring the table cell <td>(?) to a class or should I use <div> tags? I'm a little new to the formalities of stylesheets.

Thankyou for your time.

[MidiMagic]

There are two compatibility issues to remember when designing pages:

1. If the total width of your content is wider than the inside dimensions of the body (after the outside margin is removed), the div+css method of layout falls apart. Different browsers fall apart in different ways. On the other hand, a table will cause a horizontal scroll bar to appear.

2. IE and FF (mozilla) behave differently when you specify the width of a box object, along with margin, border, and/or padding:

- FF defines the declared width as being INSIDE all padding, borders, and margins on the same box object. So adding these surrounding styles makes the box object bigger than declared. This follows the W3C standard.

- IE defines the declared width as being OUTSIDE all padding, borders, and margins on the same box object. So adding these surrounding styles makes the contents of the box object smaller than declared. This violates the W3C standard.

The trick to making this work is to nest two divs:

Make one div with the declared width, and with all surrounding styles set to 0px.

Make the the other div with all of the surrounding styles you want.

Nest them in an order that puts the surrounding styles on the correct side (inside, or outside) of the
width you want.