How to move #content to the complete TOP?

toplisek · 06-02-2010, 10:17 AM

I have designed simple sample for layout with body CSS and content like:

PHP Code:


			


* {

  margin: 0;

  padding: 0;

}

body{

  background: #FF0000 url(../images/bgimage.gif) repeat-x top;

  margin-top:0px;

}



#content {

position:relative;

  width: 1000px;

  margin-top:0;

  padding-top:0;

}

#main {

  margin: 0;

  padding:0;

}

Why is #content not aligned vertically to the top?
Seems some issue with body or #content...

How to move completely to the top this DIV element?
I have around 22px under top line. As we know <DIV> is a block-level element, so each box begins its own line.

abduraooft · 06-02-2010, 10:27 AM

Insufficient data. Please post your html or a link to your page.

toplisek · 06-02-2010, 10:49 AM

please find whole code:

PHP Code:


			

* {
  margin: 0;
  padding: 0;
}
body{
  background: #FF0000 url(../images/bgforbody.gif) repeat-x top;
  margin-top:0px;

}
#content {
background-position:center top;
  width: 1000px;
  margin-top:0;
  padding-top:0;
}
#main {
  margin: 0;
  padding:0;
}

em {
  font-style: normal;
}
#toppart {
    height: 120px;
    margin: 0;
  padding:0;
}
#header1 {
 background: #003559 url(../images/banner.gif) no-repeat left top;
  margin-top: 0;
  padding:0;
  width: 100px;
  height: 90px;
}

Code:

<div id="content">
<div id="main">

<div id="toppart">
<div id="header">...</div><!-- end of header -->

</div><!-- end of toppart -->



</div>  <!-- End my Main -->

</div><!-- end Content -->


</body>

abduraooft · 06-02-2010, 11:21 AM

Quote:

I have around 22px under top line.

I don't see any such issue for the above given code.

toplisek · 06-02-2010, 11:35 AM

You have private message. I kindly ask you to check..Thanks.

toplisek · 06-02-2010, 02:07 PM

I try to be more clear:
please find code:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



<head>

  <title></title>

<style type="text/css">

/*<![CDATA[*/

* {

  margin: 0;

  padding: 0;

}

body{

  background: #FF0000 url(../images/bg1.gif) repeat-x top;

  margin-top: 0px;

}

#mycontent1 {

  background-position: top left;

  width: 1008px;

  margin: 0 0 0 0;

}

#topsection {

  position: relative;

  width: 1008px;

  height: 121px;

  margin-top: 0;

  padding-top: 0;

}

#header1 {

  background: #003559 url(../images/banner.gif) no-repeat center top;

  margin-top: 0;

  height: 121px;

}

#middle {

  width: 100%;

  margin: 0;

  padding: 0 0 0 2px;

  text-align: left;

  border: 0px solid #000000;

  overflow: hidden;

}

/*]]>*/

</style>

</head>



<body>



<div id="mycontent1">

<div id="topsection">

<div id="header1">

&nbsp;

</div>

</div>



<div id="middle">

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>



</div>



</body>

</html>

abduraooft · 06-02-2010, 02:52 PM

Quote:

I try to be more clear:
please find code:

Do you get the same issue for the above code? The issue might be due to the collapsing margin, which is unfortunately(?) not present in the above sample codes.

toplisek · 06-02-2010, 03:47 PM

Can you post me working above code?

Scriptet · 06-02-2010, 04:01 PM

What browser are you seeing this problem in, because as abduraooft said, there is no problem with the code you posted and the content is at the complete top..You need to show us an example of the problem in action...mentioning browsers also