Some weird white spaces

Discussion in 'HTML & Website Design' started by Saro, Feb 2, 2010.

0
  1. #1
    Hi,

    I've a small problem with my basing. While i was turning a layout into HTML & CSS some white margins poped up which i didn't declared with margin or padding. These spaces seem to get extreme if i add text to the div. See it for yourself at the link below. The white space below the header and navigation and the weird position of the text div.

    I haven't coded for a while but i remember that this is a small fix, but i can't figure out what it is.

    Since i can't post links i post the whole HTML and CSS but too see the white spaces in the layout, paste this link into your browser and delete the white space out of the link.

    http://ww w.saroverhees.be/contact/global.css


    CSS:
    @charset "utf-8";
/* CSS Document */

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #272727;
}

.clear {
	clear: both;
}

#wrapper {
	height: auto;
	width: 887px;
	margin: 0 auto;
}


/* 1. HEADER */
#hr_stroke {
	background: url(images/str_hd.gif) repeat-x;
	height:15px;
	width: 887px;
}

#banner {
	background: url(images/banner.jpg) no-repeat;
	height: 101px;
	width: 887px;
}

#banner h1 {
	/*De tekst is onzichtbaar gemaakt omdat dit de header er al staat. Ik 
	heb	echter toch tekst toegevoegt voor een goede indexering in google*/
	text-indent: -999999px;
	font-size:0px;
}

/* 2. NAVIGATIE */
#navigatie {
	background: url(images/str_nav.gif) repeat-x;
	height: 24px;
	width: 887px;
}

#navigatie a {
	color:#FFF;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
}

#navigatie a:hover {
	color:#666;
}

#navigatie span {
	color:#666;
}

#navigatie ul{
	list-style: none;
}

#navigatie li{
	padding: 2px 0 0 20px;
}


#home {
	background: url(images/home.jpg) no-repeat;
	width: 71px;
	height:24px;
	float:left;
}

#signsprints {
	background: url(images/signsprints.jpg) no-repeat;
	width: 123px;
	height:24px;
	float:left;
}

#portfolio {
	background: url(images/portfolio.jpg) no-repeat;
	width: 101px;
	height:24px;
	float:left;
}

#aanleveren {
	background: url(images/aanleveren.jpg) no-repeat;
	width: 108px;
	height: 24px;
	float:left;
}

#contact {
	background: url(images/contact.jpg) no-repeat;
	width: 85px;
	height: 24px;
	float:left;
}

#offerte {
	background: url(images/offerte.jpg) no-repeat;
	width: 100px;
	height: 24px;
	float:left;
	margin-left: 5px;
}

/* 3. HEAD */
/* Hier komt de balk onder de navigatie */

#head {
	background: url(images/head.jpg) no-repeat;
	width: 887px;
	height:78px;
}

.arrowhead {
	padding: 20px 0 0 20px;
}

/* 4. CONTENT */

#content {
	background:  url(images/bg.jpg) no-repeat top right;
	width:887px;
	height: 433px;
}

#footer {
	background: url(images/str_ft.gif) repeat-x;
	width: 887px;
	height: 12px;
}

#content_left {
	float:left;
}

#content_right {
	width: 80px;
	height:360px;
	background-color: #1e1e1e;
	margin: 5px 8px 0 0;
	float:right;
	opacity: .5;
}

/* 4.1 HOME */

.gray_bar {
	background: #97969b;
	width:790px;
	height: 17px;
	margin: 5px 0 5px; 0;
}

.img {
	float:left;
}

.text {
	background: #c3c4c8 url(images/bg_home.jpg) bottom right no-repeat;
	height: 338px;
	width: 400px;
	margin: 0 0 0 390px;
}


h2 {
	color:#303032;
	font-size: 14px;
	padding: 30px 30px 0 20px;
}

.text span {
	color: #0077b1;
	font-weight:bold;
	font-size:16px;
}

.text p {
	color:#FFF;
	padding: 10px 30px 0 20px;
	font-size:14px;
}

#bar_low {
	width:385px;
	height:17px;
	background-color:#97969b;
	float:left;
}

.welkom {
	padding: 4px 0 0 5px;
}
	
/* 4.2 SIGNS & PRINTS */


/* 4.6 CONTACT */

.img_logo {
	margin: 20px 0 0 150px;
}

.contact_list {
	float: left;
}

#content_right_contact {
	width: 80px;
	height:338px;
	background-color: #1e1e1e;
	margin: 5px 8px 0 0;
	float:right;
	opacity: .5;
}

p.content {
	padding: 10px 30px 0 20px;
}
    Code (markup):

    HTML: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
	<title>AZ Reclame</title> 
    <meta name="author" content="AZ Reclame"/> 
    <meta name="description" content="Shrijf hier een korte omschrijving van uw website." /> 
    <!-- De descrition tekst wordt ook vertoont als resultaat in zoekmachines samen met de titel --> 
    <meta name="keywords" content="Zoekwoorden, gescheiden, door, een, komma" /> 
    <meta name="language" content="NL" /> 
	<link rel="icon" type="image/ico" href="images/favicon.ico"/> 
    <link type="text/css" rel="stylesheet" href="global.css" /> 
 
</head> 
 
<body> 
 
<div id="wrapper"> 
 
  <div id="hr_stroke"> 
  </div> 
  
  <div id="banner"><h1>AZ reclame - signs ;&amp; prints</h1></div> 
  
  
  <div id="navigatie"> 
     <ul> 
       <li id="home"><a href="index.php"><span>HOME</span></a></li> 
       <li id="signsprints"><a href="signsprints.php">SIGNS&amp;PRINTS</a></li> 
       <li id="portfolio"><a href="portfolio.php">PORTFOLIO</a></li> 
       <li id="aanleveren"><a href="aanleveren.php">AANLEVEREN</a></li> 
       <li id="contact"><a href="contact.php">CONTACT</a></li> 
       <li id="offerte"><a href="offerte.php">OFFERTE</a></li> 
     </ul> 
  </div> 
  
  <div class="clear"></div> 
   
  <div id="head"> 
    <img class="arrowhead" src="images/homeb.jpg" width="90" height="49" alt="Home" /> 
  </div> 
  
  <div id="content"> 
      <div id="content_left"> 
        <div class="gray_bar"></div> 
        <img class="img" src="images/az.JPG" width="385" height="338" alt="AZ reclame" /> 
        <div class="text">     
        <h2>Al meer dan vijftien jaar staat <span>AZ</span> reclame in voor al uw publiciteitswensen:</h2> 
         <p>Autobeletteringen, gevelreclames, ontwikkelen van huisstijl, signalisatie, displays, spandoeken, werfborden, reclamezuilen, full colour prints,
         applicatieteksten...</p> 
 
         <p class="white"><span>AZ</span> reclame geeft vorm aan al uw vragen en ideeën.
         In ons volledig ingericht atelier kunnen onder 
         optimale omstandigheden alle werken uitgevoerd 
         worden:van een complete belettering op een autobus tot 
         de voorbereiding van een reclamezuil. 
         Voor meer informatie mag u altijd contact met ons opnemen.
         Ook bent u altijd welkom in onze showroom.</p>       
        </div>  
      
      </div> 
      <div id="content_right"> 
      </div> 
      
      <div class="clear"></div> 
      
      <div id="bar_low"></div> 
      <img class="welkom" src="images/welkom.jpg" height="22" width="101" alt="Welkom" /> 
  </div> 
  
  
  
  <div id="footer"> 
  </div> 
  
 
</div> 
 
</body> 
 
</html>
    HTML:
    Thanks for you help,
    Saro Verhees
     
    Saro, Feb 2, 2010 IP
  2. stuart.letterman

    stuart.letterman Guest

    Messages:
    143
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'm not sure where you mean on the site where this white space is but you could add an on-page style onto each section to see if that removes it:

    style="margin:0;padding:0;"
    Code (markup):
    Add that style to the div's and paragraphs until the space goes, then you can pinpoint it hopefully :)
     
    stuart.letterman, Feb 2, 2010 IP
  3. Saro

    Saro Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey stuart,

    That was it indeed. Thanks a lot.

    But instead of putting that in all my divs i just did this in my CSS:

    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {  
    margin:0px; padding:0px; border:0px;   
}
    Code (markup):
     
    Saro, Feb 2, 2010 IP
  4. stuart.letterman

    stuart.letterman Guest

    Messages:
    143
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Brill! Glad to be of help :D
     
    stuart.letterman, Feb 2, 2010 IP