Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS / div tag extra spaces

Options
  • 06-12-2009 6:01pm
    #1
    thecelt
    Registered Users Posts: 416 ✭✭


    This is prob an easy one but i cant seem to get it resolved,

    i have used div tags in a web page and seem to get extra empty space between the divs on the page.

    the css code is

    body {
    background-color: #C4C4E1;
    margin: 1% 20% 20%;
    color:white;
    font-size:1.2em Verdana, Geneva, sans-serif;;
    }
    #menu {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    }
    #menu li {
    float: left;
    font: 0.8em Verdana, Helvetica, sans-serif;
    margin: 1%;
    padding-left:7%;
    padding-bottom:0;
    }
    #menu a {
    background: #333 url("images/seperator.gif") bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:normal;
    }
    #menu a:hover {
    background: #987f7f url("images/hover.gif") bottom center no-repeat;
    color: #fff;
    padding-bottom: 8px;
    }

    div.heading {
    border:0px solid color:#E9EDF7 ;
    background-color: #E9EDF7;
    padding: 0px;
    margin-top:0.3%;
    }

    div.menus {
    width:100%;
    border: 0% solid;
    background-color: #E9EDF7;
    padding: 0%;
    }
    div.body {
    width:100%;
    border:0px solid silver;
    background-color: #987f7f;
    padding: 0px;
    color:#FFF;
    font-size:1em Verdana, Geneva, sans-serif;
    margin-bottom:0;
    }
    div.footer {
    width:100%;
    border:0px solid silver;
    background-color: #808040;
    padding: 0px;
    color:#FFF;
    font-size:1em Verdana, Geneva, sans-serif;
    margin-top:0;

    }

    and the html code is

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>my template test page</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class ="heading">
    <img src="../banner2.gif" alt="banner" width="750" height="94"/>
    </div>
    <div class ="menus">
    <ul id="menu">
    <li><a href="../index.html">Home</a></li>
    <li><a href="../history.html">History</a></li>
    <li><a href="../patron.html">Patron</a></li>
    <li><a href="../contact.html">Contact</a></li>
    <li><a href="../findus.html">Find Us</a></li>
    </ul>
    </div>
    <div class="body">
    <h1>This is going to be a website</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p></div>

    </div>
    <div class="footer">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
    </p>
    </div>
    </body>
    </html>


Comments

  • Options
    #2
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    Try removing the line breaks.


  • Options
    #3
    Yerac
    Closed Accounts Posts: 235 ✭✭Yerac


    Well by styling the paragraphs you can get rid of the spaces,
    p{margin:0;}

    Not relevant to this issue but you have an extra </div> between body and footer.


  • Options
    #4
    paddybag
    Registered Users Posts: 9 ✭paddybag


    Yup, the p tags are gaving a default margin that may differ on different browsers. Its always good to use a reset stylesheet that gives a zero margin and padding for everything. Since different browsers give different default margins and paddings, this will help in giving the same look to all browsers.

    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

    Copy the css from this page into a new stylesheet file and call it reset.css and declare it above the main.css.

    You should see the difference straight away!

    Cheers,
    Paddy
    http://www.paddyhorgan.com


  • Options
    #5
    thecelt
    Registered Users Posts: 416 ✭✭thecelt


    yep that fixed it thanks


Advertisement