Stylesheets - Box model problem

Author

Box model problem

Rataplan

2007-04-11, 6:17 am

Hi
Why firefox and Opera puts, between the div <div id="menuHoriz"> and the
following div "main", a horizontal space of 16px , only in this case ?

I don't want a space between "menuHoriz" and "main" div... and if set the
margin-top: -16px this result not a good workaround for IE 6.

thanks

Here is the code (very simple)
=====================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XXXX</title>

<style>
body{
background:url(img/sfondoBody.jpg) repeat-x;
background-color:#8DB9E4;
margin: 0px 0 0px 20%;
}

#container{
width:787px;
position: relative;
}

#Logo{
width:787px;
height:113px;
background-color:#006699;
}

#tst1{
width:787px;
height:179px;
background-color:#0099CC;
}

#menuHoriz{
width:787px;
height:45px;
background-color:#FFCC00;

}

#main{
width:787px;
height:200px;
background-color:#FFFFFF;

}

</style>

</head>

<body>
<div id="container">
<div id="Logo"></div>
<div id="tst1"></div>
<div id="menuHoriz">horizontal menu</div>
<div id="main"><p>here the text of my page</p></div>
</div>
</body>
</html>

JÃ³n Fairbairn

2007-04-11, 6:20 pm

"Rataplan" <miseratiLevami@Levamisimplogic.it> writes:

> Hi
> Why firefox and Opera puts, between the div <div id="menuHoriz"> and the
> following div "main", a horizontal space of 16px , only in this case ?

Because you are using the default margin-top for <p>, probably

--
JÃ³n Fairbairn Jon.Fairbairn@cl.cam.ac.uk

Ben C

2007-04-11, 6:20 pm

On 2007-04-11, Rataplan <miseratiLevami@Levamisimplogic.it> wrote:
> Hi
> Why firefox and Opera puts, between the div <div id="menuHoriz"> and the
> following div "main", a horizontal space of 16px , only in this case ?
>
> I don't want a space between "menuHoriz" and "main" div... and if set the
> margin-top: -16px this result not a good workaround for IE 6.

What J?n Fairbairn said. Note that top margins can collapse against top
margins of descendent elements which can be a bit confusing. Use p {
margin-top: 0; }

Rataplan

2007-04-11, 6:20 pm

thanks Jon !
it's true.
:-)

by

"Jón Fairbairn" <jon.fairbairn@cl.cam.ac.uk> ha scritto nel messaggio
news:wfd52b2mq1.fsf@calligramme.charmers...
> "Rataplan" <miseratiLevami@Levamisimplogic.it> writes:
>
>
> Because you are using the default margin-top for <p>, probably
>
> --
> Jón Fairbairn Jon.Fairbairn@cl.cam.ac.uk
>

Rataplan

2007-04-12, 3:18 am

Thank Ben !
I wrote p { margin-top: 0; } and now is Ok !

by
:-)

"Ben C" <spamspam@spam.eggs> ha scritto nel messaggio
news:slrnf1pjm5.tr2.spamspam@bowser.marioworld...
> On 2007-04-11, Rataplan <miseratiLevami@Levamisimplogic.it> wrote:
>
> What J?n Fairbairn said. Note that top margins can collapse against top
> margins of descendent elements which can be a bit confusing. Use p {
> margin-top: 0; }