CODEWITHSUNDEEP
htmlcss
Ivan Sim
Ivan Sim

Reputation: 375

Clearing White lines on the top page, CSS, HTML

this problem have been driving me crazy. it always happen. I have only listed down the important codes.

Below is my HTML Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title> File Manager </title>
        <link rel="stylesheet" href="../main.css">     
    </head>

    <body>
        <div id="sidemenu">
            <ul>
                <li><a onclick="">Add New Staff</a></li>
                <li><a onclick="">Set Time Limit</a></li>
            </ul>
        </div>

        <table class="container";>
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Status</th>
                    <th>Time</th>
                    <th>Date</th>
                </tr>
            </thead>    
        </table>
    </body>
</html>

CSS Code:

body, html {
    padding: 0;
    margin: 0;
    top: 0;
    height: 100%;
    width:100%;
}

div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

#sidemenu {
    background: #333;
    list-style: none;
    margin: 0;
    padding: 0;
    width:192px;
    height: 100%;
    position: fixed;
}
#sidemenu li {
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidemenu a {
    background: #333;
    border-bottom: 1px solid #393939;
    color: #ccc;
    display: block;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: normal;
}
#sidemenu a:hover {
    background: #2580a2;
    color: #fff;
    padding-bottom: 8px;
}

The problem that I have found out using inspect element in Mozila. As you see there are two break lines right below the body. But that code was not in my html code. How do i remove it?

enter image description here

Upvotes: 0

Views: 647

Answers (2)

Alex Ironside
Alex Ironside

Reputation: 5039

This is a long shot but try loading normalize.css

Upvotes: 1

shahabvshahabi
shahabvshahabi

Reputation: 955

you can simply use this code for your development

body > br {
  display : none;
}
.hello{
  display : initial;
}
<br>
<br>
<p>this is your content</p>

<br class="hello">
<p>this is where you like to use br tag</p>

Upvotes: 1

Related Questions