Box model problem

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > Box model problem

This is Interesting: Free Magazines for Graphics designers and webmasters

Last Thread Next Thread

Author

Thread

Box model problem

Rataplan

04-11-07 - 11: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>

[ Post Follow-Up to this message ]

Re: Box model problem

Jón Fairbairn

04-11-07 - 11: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

[ Post Follow-Up to this message ]

Re: Box model problem

Ben C

04-11-07 - 11: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; }

[ Post Follow-Up to this message ]

Re: Box model problem

Rataplan

04-11-07 - 11: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
>

[ Post Follow-Up to this message ]

Re: Box model problem

Rataplan

04-12-07 - 08: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; }

[ Post Follow-Up to this message ]