468,238 Members | 1,964 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,238 developers. It's quick & easy.

Box model problem

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>
Apr 11 '07 #1
4 1446
"Rataplan" <mi************@Levamisimplogic.itwrites:
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 Jo***********@cl.cam.ac.uk

Apr 11 '07 #2
On 2007-04-11, Rataplan <mi************@Levamisimplogic.itwrote:
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; }
Apr 11 '07 #3
thanks Jon !
it's true.
:-)

by
"Jn Fairbairn" <jo***********@cl.cam.ac.ukha scritto nel messaggio
news:wf************@calligramme.charmers...
"Rataplan" <mi************@Levamisimplogic.itwrites:
>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

--
Jn Fairbairn Jo***********@cl.cam.ac.uk

Apr 11 '07 #4
Thank Ben !
I wrote p { margin-top: 0; } and now is Ok !

by
:-)
"Ben C" <sp******@spam.eggsha scritto nel messaggio
news:sl*********************@bowser.marioworld...
On 2007-04-11, Rataplan <mi************@Levamisimplogic.itwrote:
>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; }

Apr 12 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Iain Bishop | last post: by
reply views Thread by Flare | last post: by
10 posts views Thread by Michael Strorm | last post: by
5 posts views Thread by clintonG | last post: by
6 posts views Thread by Robert W. | last post: by
122 posts views Thread by Edward Diener No Spam | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by kermitthefrogpy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.