CSS Padding Problem

Causes alignment problem

[Eastwood]

I have completely redesigned my website using CSS and absolute positioning. The design has turned out great.

I am using a 5 box method; top, left, center, right and bottom.

The main purpose for this redesign is so that I could present the Body text (middle box) 1st to the spiders.

Here is the problem I am having difficulty resolving. Currently, The text in the middlebox butts up against the edges of the box. I have tried using "padding" but it throws off all the other alignments between the left box and the right box. There is a basic lack of understanding that I have about how the Padding works.

When I add the padding (say 5px) it mis-aligns causng the left and right boxes to overlap the center box. I have tried different adjustments to the CSS to compensate for this but it does not work correctly in all browesrs such a Opera and Netscape.

Up to this point using absolute positioning I have been able to get the different browsers to all have the output look the same. It's only when I introduce Padding that I begin to have problems.

Here is the CSS code that I am currently using for all the boxes:

.middlebox {
MARGIN-TOP: 131px;
LEFT: 129px;
WIDTH: 510px;
BACKGROUND-COLOR: #FFFFFF;
POSITION: absolute
}
.bottombox {
CLEAR: both;
MARGIN-TOP: -11px;
LEFT: 1px;
WIDTH: 504px;
POSITION: relative
}
.topbox {
MARGIN-TOP: 1px;
LEFT: 1px;
WIDTH: 767px;
HEIGHT: 125px;
BACKGROUND-COLOR: #E6E4E4;
POSITION: absolute
}
.leftbox {
MARGIN-TOP: 131px;
LEFT: 1px;
WIDTH: 125px;
BORDER: 1px solid #808080;
BACKGROUND-COLOR: #345E8F;
POSITION: absolute
}
.rightbox {
MARGIN-TOP: 131px;
LEFT: 641px;
WIDTH: 125px;
BORDER: 1px solid #808080;
BACKGROUND-COLOR: #C3DCF5;
POSITION: absolute
}

Any suggestions?

[createErrorMsg]

Eastwood, first, the problem you are experiencing is probably a box model problem. I suspect that you are finding IE displays the page just fine, but Moz , Opera and NS mess it up?

If so, this is because of a major difference in how IE calculates the width of boxes, compared to the standards-compliant way used by the browsers listed above.

In IE, the width of a box equals the value of the width property, PERIOD. Any margins, padding, or borders added to the sides of thebox are actually packed INSIDE of that width value. So setting a width 500px gives you a 500px wide box whether you have no padding, or 200px of padding (of course, the padding alters how much content space you have).

In other browsers (FF, Moz, NS, Opera) the width of a box is the width property value PLUS margins, padding and borders. So a 500px wide box with no padding is 500px wide, but a 500px wide box with 200px of padding is 700px wide. See?

In your case, those browsers are adding the 5px to the outside of the box, and since they are absolutely positioned, this causes them to overlap.

SOlution? If you're adding 5px of padding to both sides of the box, decrease the width value by 10px. Then, if you want to give IE back it's full value (so it displays correctly, too), you can use a hack [positioniseverything.net], or some other technique [glish.com], to do so.

One final note: All of your CSS rules are missing a semi-colon after the last property:value pair.

Good luck,
cEM

[Eastwood]

Thanks for the feedback. I should be able to work thru the problem now.

BTW, CSS rules do not require the last entry to have a ;.

[createErrorMsg]

BTW, CSS rules do not require the last entry to have a ;.

While this may be true, I fail to see any benefit gained from leaving it off, whereas putting it in (a)saves the trouble of remembering to put it in when a new property is added to the rule declaration, and (b)maintains consistency with other web programming languages.

It's also interesting to note that while the W3 Validator doesn't throw up an error or warning when presented with code lacking the last semi-colon, it does ADD the semi-colon into the output of the Validator results page. A subtle hint, perhaps?

Ultimately, of course, it's a matter of personal taste.

[createErrorMsg]

whereas putting it in (a)saves the trouble of remembering to put it in when a new property is added to the rule declaration, and (b)maintains consistency with other web programming languages.

I'll add ... (c)putting in the final semi-colon doesn't make my obsessive-compulsive disorder flare up. ;)

[Eastwood]

Yes it's true that it is a personal preference.

I follow the coding rules given by several CCS Reference sites and that's what they show. This is how I came to this coding technique. FYI.