By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,787 Members | 1,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,787 IT Pros & Developers. It's quick & easy.

Box model problem

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
"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

P: n/a
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

P: n/a
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

P: n/a
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.