Sent by Michael Landis on 28 October 2003 23:11
Simone wrote:
> On this page: http://www.iyezine.com/tatoosa/tatfotografia.htm
> as you can see on ie everything is right, but if you try
> mozilla/netscape/firebird you can see that the div
> #contentcenter isn't align to the right but to the left.....
> Any ideas?
Yep--
It really helps to keep all of your styling information in a single place.
As it is, you have styles in your stylesheet for #contentcenter, and you
also have styles in that div's style attribute. Add them all together, and
there's no way that this can fit. But it's hard to know that this happens,
because the style information is spread in many locations. The CSS file
seems to make sense, and it's only by carefully examining the HTML itself
that you'd ever know that something else was going on.
The floated components need to add up to 622px wide in order for them to
sit side-by-side in #frame. Since #contentleft is 230px wide, the
#contentcenter box needs to be at most 392px wide. The style sheet makes it
look like everything's right, but the #contentcenter div has an inline
style with padding: 65px 38px 30px 30px. This means that there is 38px
added to the left, and 30px added to the right. When a browser renders the
content according to the specs, the width you've defined is how much space
is available for the content. The total box width also adds borders and
padding to this, so your box is actually defined to take up 392 + 30 + 38 =
460px -- which is way too big to fit.
Although IE 6 can render the content the same way as Netscape, it won't
when the XML prolog is in front of the DOCTYPE. Instead, it renders the
same way as IE 5.x, and the padding is sucked into the width you define,
leaving 392 - 30 - 38 = 324px of space for the content. If you remove the
prolog from the HTML, IE 6 will look the same as Netscape, Opera, Mac IE,
Safari, etc. -- and will follow the specifications.
Once you've removed the prolog, there are two ways to get around this --
serve two different widths (one for IE 5.x, one for compliant browsers) or
change how you define your padding.
To serve two different widths, you can use one of the hacks described in
the Wiki[1]. If you don't want to use hacks, you can take the padding off
of #centercontent, and place it on the elements inside:
#contentcenter h1 {
padding: 65px 38px 0 30px;
}
#contentcenter p {
padding: 0 38px 0 30px;
}
You'll probably want to play with the vertical padding and margins a bit,
to see how you want your content spaced in the box.
HTH,
MikeL
[1] http://css-discuss.incutio.com/?page=BoxModelHack
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/