CODEWITHSUNDEEP
htmlcss
Tim Aych
Tim Aych

Reputation: 1365

Can't get div flush with top of page

I'm having trouble getting my wrapper div to become flush with the very top of the page. I've set the body margin/padding to zero, as well as the top margin for the wrapper div to zero with no success.

CSS:

body {
    font-family: Helvetica, sans-serif;
    background-image:url('../images/bg1.jpg');
    padding:0px; 
    margin:0px;
}

#ratio{
    text-align: center;
}

div#nav {
    text-align: center;
    margin: 0;
}

#nav img{
    padding: 5px 40px 20px 40px;
}

#task_table{
    width: 775px;
    table-layout: fixed;
    text-align: left;
    font-size: 12px;
    border-collapse:collapse;
}

#task_table td{
    border-bottom: 1px solid black;
    padding-top: 10px;
    padding-bottom: 10px;
}

#task_table td:first-child{
    width: 220px;
    padding-left: 15px;
}

#task_table td:nth-child(2){
    width:70px;
    padding-left: 20px;
}

#task_table td:nth-child(3){
    padding-left: 25px;
}

#task_table td:nth-child(4){
    text-align:right;
    padding-right: 15px;
}

#wrapper {
    width: 775px;
    margin: 0 auto;
    background-color: #fff;
    margin-top:0px;
}

#datecaption {
    font-size: 10px;
    padding-left: 15px;
    padding-bottom: 5px;
}

#hourscaption {
    font-size: 10px;
    padding-left: 195px;
}

#taskcaption {
    font-size: 10px;
    padding-left: 30px;
}

#taskbar {
    background: #CCCCCC;
    padding: 15px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

#task_text {
    margin-left: 20px;
    width: 330px;
}

#hours_text {
    margin-left: 20px;
    width: 50px;
}

.delete, .successful, .unsuccessful {
    padding: 0px 4px 0px 4px;
}

html:

<body>

    <div id="wrapper">

        <div id="nav">

            <a href="index.php"><img src="images/tab1.jpg" class="navimg" id="tab1"/></a>

            <a href="completed.php"><img src="images/tab2.jpg" class="navimg" id="tab2"/></a>

            <a href="failed.php"><img src="images/tab3.jpg" class="navimg" id="tab3"/></a>

        </div>

        <span id="datecaption">DATE</span>

        <span id="hourscaption">HOURS</span>

        <span id="taskcaption">TASK</span>

            <form action="index.php" method="POST" style="margin:0;padding:0;" id="submit">

        <div id="taskbar">

                <select name="month" id="monthDD"><option>January</option><option selected="selected">February</option><option>March</option><option>April</option><option>May</option><option>June</option><option>July</option><option>August</option><option>September</option><option>October</option><option>November</option><option>December</option></select><select name="day" id="dayDD"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option selected="selected">14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select>                <select name="year" id="yearDD">

                    <option>2012</option>

                    <option>2013</option>

                    <option>2014</option>

                </select>



                <input type="text" name="hours" id="hours_text" />

                <input type="text" name="task" id="task_text" />

                <input type="Submit" value="Add Task" style="margin-left: 20px;" />

        </div></form>



        <table id="task_table"><tr id="row157"><td>February 14, 2012</td><td>0</td><td>Read</td><td><a href=""><img src="images/trash.png" class="delete" name="157"></a>

            <a href=""><img src="images/delete.png" class="failed" name="157"></a>

            <a href=""><img src="images/check.png" class="successful" name="157"></a></td></tr><tr id="row158"><td>February 14, 2012</td><td>1</td><td>Work on tasks project</td><td><a href=""><img src="images/trash.png" class="delete" name="158"></a>

            <a href=""><img src="images/delete.png" class="failed" name="158"></a>

            <a href=""><img src="images/check.png" class="successful" name="158"></a></td></tr></table>     



    </div>

</body>

Anyone know what's up? Thanks.

It seems to be working in the jsFiddle, oddly; http://jsfiddle.net/jsNS8/

Upvotes: 1

Views: 10458

Answers (4)

rjmateus
rjmateus

Reputation: 26

try remove / adjust the element: '#nav img'

The padding of this element affection the parent element height.

Can you explain exactly what you intend to do or what is wrong.

Upvotes: 0

CoffeeRain
CoffeeRain

Reputation: 4522

I would use the position:absolute attribute.

#wrapper
{
position:absolute;
top:0px
}

Upvotes: 3

Chris
Chris

Reputation: 2035

I don't think a CSS reset file is the answer as you have effectively reset all the body element contains

Have you got any margin on the top of the #nav element? This can overlap the #wrapper causing a gap at the top of the page. I tend to use padding for such instances instead.

I hope this solves it for you!

Upvotes: 2

kolin
kolin

Reputation: 2344

use a css reset file before you put your css in and see if that helps

Upvotes: 0

Related Questions