SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast CorkyMcDoogle's Avatar
    Join Date
    Aug 2006
    Location
    Chesapeake, Maryland
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Extra space (margin or whitespace) underneath

    Hello,

    I've run into a problem that I can't seem to solve.

    IE is adding some unwanted extra space. I'm working on this locally so I have to show you in picture form.



    I'm not sure if this is extra margin or just whitespace. I've tried taking any spaces out of the code to see if that did anything but it didn't.

    FF and Opera are displaying the correct 5px gap. It is important to the layout that it be exactly 5px.

    Since you can't see the layout I'm not sure if posting the CSS will help you out. I've tried taking out all margins but it still leaves space even when there should be 0px gap.

    Hopefully I'm overlooking something simple.

    - Thanks

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the code for the page?

  3. #3
    SitePoint Enthusiast CorkyMcDoogle's Avatar
    Join Date
    Aug 2006
    Location
    Chesapeake, Maryland
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is just above the footer. Here is a pic of the entire layout.



    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    <div id="wrapper">
      <div id="header"><h1><a href="#">Wordpress Blog Title</a></h1>
      <h2>This is where your cool motto goes...</h2>
      </div>
      
       <div id="topmenu">
       <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Projects</a></li>
       <li><a href="#">Another</a></li>
       
       
       <div class="clearer"></div>
       </ul>
      </div>
      
       <div id="leftcontain">
         <div id="entry">
    	 <h2><a href="#">Cool Post</a></h2>
    	 <span class="datecomments">Posted on May 3rd | <a href="#">2 Comments</a></span>
           <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero.  Morbi ornare volutpat enim. Nulla facilisi. Cras hendrerit auctor mi.  Ut sagittis nunc a magna. Nulla facilisi. </p>
    	    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero.  Morbi ornare volutpat enim. Nulla facilisi. Cras hendrerit auctor mi.  Ut sagittis nunc a magna. Nulla facilisi. </p>
    		 <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero.  Morbi ornare volutpat enim. Nulla facilisi. Cras hendrerit auctor mi.  Ut sagittis nunc a magna. Nulla facilisi. </p>
    		  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla libero.  Morbi ornare volutpat enim. Nulla facilisi. Cras hendrerit auctor mi.  Ut sagittis nunc a magna. Nulla facilisi. </p>
         </div>
    	
       </div>
       
       <div id="rightcontain">
       <div id="right">
       <h2>List Item</h2>
         <ul>
    	 <li><a href="#">Something</a></li>
    	 <li><a href="#">Projects</a></li>
    	 <li><a href="#">Test</a></li>
    	 </ul>
    	 
    	<h2>Menu</h2>
         <ul>
    	 <li><a href="#">Something</a></li>
    	 <li><a href="#">Projects</a></li>
    	 <li><a href="#">Test</a></li>
    	 </ul>
       </div>
       </div>
       
       <div class="clearer"></div>  
    </div>
      
      
     
    <div id="footercontainer">
      <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    Code:
    html, body {
    	margin: 0px;
    	padding: 0px;
    	background-color: #eeeeee;
    	}
    .clearer{
    	clear: both;
    	margin: 0px;
    	padding: 0px;
    }
    #wrapper {
    	width: 700px;
    	margin-right: auto;
    	margin-left: auto;
    	padding-right: 35px;
    	padding-left: 35px;
    	background-image: url(images/wrapperbg.gif);
    	padding-top: 5px;
    	background-repeat: repeat-y;
    	height: auto;
    }
    #header{
    	background-color: #FFFFFF;
    	border: 3px double #E8E8E8;
    	height: auto;
    	width: 684px;
    	background-image: url(images/boxgrad.gif);
    	background-repeat: repeat-x;
    	background-position: top;
    	padding: 5px;
    	margin-bottom: 5px;
    	text-align: center;
    }
    #header h1, #header h1 a{
    	font-family: "Lucida Sans Unicode", sans-serif;
    	font-size: 24px;
    	font-weight: bold;
    	color: #000000;
    	letter-spacing: .1em;
    	margin: 0px;
    	padding: 0px;
    	text-decoration: none;
    	font-variant: small-caps;
    }
    #header h1 a:hover{
    	color: #666666;
    }
    #header h2{
    	font-family: "Lucida Sans Unicode", sans-serif;
    	font-size: 14px;
    	color: #CCCCCC;
    	margin: 0px;
    	padding: 0px;
    	font-variant: small-caps;
    }
    #topmenu{
    	height: auto;
    	width: 690px;
    	border: 3px double #E8E8E8;
    	margin-bottom: 5px;
    	background-color: #FFFFFF;
    	padding: 2px;
    	background-image: url(images/boxgrad.gif);
    	background-repeat: repeat-x;
    	background-position: top;
    }
    #topmenu ul{
    	padding: 0px;
    	list-style-type: none;
    	margin: 0px;
    }
    #topmenu li{
    	margin: 0px;
    	float: left;
    }
    #topmenu li a{
    	font-family: "Lucida Sans Unicode", sans-serif;
    	font-size: 12px;
    	color: #666666;
    	text-decoration: none;
    	background-color: #EEEEEE;
    	display: block;
    	border: 3px double #CCCCCC;
    	padding-top: 5px;
    	padding-right: 10px;
    	padding-bottom: 5px;
    	padding-left: 10px;
    	margin-right: 5px;
    	font-variant: small-caps;
    	background-image: url(images/topmenubg.gif);
    	background-repeat: repeat-x;
    }
    #topmenu li a:hover{
    	border: 3px double #666666;
    	color: #666666;
    }
    #leftcontain{
    	height: auto;
    	width: 489px;
    	float: left;
    	margin-right: 5px;
    }
    #rightcontain{
    	float: left;
    	height: auto;
    	width: 195px;
    }
    #right{
    	height: auto;
    	width: 189px;
    	float: left;
    	border: 3px double #e8e8e8;
    	background-color: #FFFFFF;
    	padding: 5px;
    	background-image: url(images/boxgrad.gif);
    	background-repeat: repeat-x;
    	background-position: top;
    }
    #entry{
    	font-family: "Lucida Sans Unicode", sans-serif;
    	font-size: 12px;
    	color: #333333;
    	border: 3px double #e8e8e8;
    	background-color: #FFFFFF;
    	background-image: url(images/boxgrad.gif);
    	background-repeat: repeat-x;
    	background-position: top;
    	padding: 5px;
    	height: auto;
    	margin-bottom: 5px;
    	float: left;
    	width: 473px;
    }
    #entry h2, #entry h2 a{
    	font-family: "Lucida Sans Unicode", sans-serif;
    	font-size: 20px;
    	font-weight: bold;
    	color: #000000;
    	text-decoration: none;
    	letter-spacing: .1em;
    	margin: 0px;
    	padding: 0px;
    	text-transform: uppercase;
    }
    #entry h2 a:hover{
    	color: #666666;
    }
    .datecomments{
    	font-family: "Lucida Sans Unicode", sans-serif;
    	font-size: 10px;
    	color: #999999;
    }
    .datecomments a{
    	text-decoration: underline;
    	color: #666666;
    }
    .datecomments a:hover{
    	color: #333333;
    }
    #right ul{
    	padding: 0px;
    	list-style-type: none;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 5px;
    	margin-left: 0px;
    }
    #right h2{
    	font-family: "Lucida Sans Unicode", sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #333333;
    	margin-top: 0px;
    	margin-bottom: 5px;
    	font-variant: small-caps;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 2px;
    	padding-left: 0px;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #e8e8e8;
    }
    #right li{
    	font-family: "Lucida Sans Unicode", sans-serif;
    	font-size: 12px;
    	color: #333333;
    	background-image: url(images/bullet.gif);
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding-left: 15px;
    }
    #right li a{
    	font-family: "Lucida Sans Unicode", sans-serif;
    	color: #666666;
    	text-decoration: underline;
    }
    #right li a:hover{
    	color: #333333;
    }
    #footercontainer{
    	background-image: url(images/footerbg.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
    	padding-bottom: 25px;
    	margin-right: auto;
    	margin-left: auto;
    	width: 700px;
    	padding-right: 35px;
    	padding-left: 35px;
    }
    #footer{
    	padding: 10px;
    	font-family: "Lucida Sans Unicode", sans-serif;
    	font-size: 12px;
    	color: #666666;
    	border: 3px double #e8e8e8;
    	background-color: #FFFFFF;
    	background-image: url(images/boxgrad.gif);
    	background-repeat: repeat-x;
    	background-position: top;
    	height: auto;
    	width: auto;
    }
    #footer p{
    	margin: 0px;
    	padding: 0px;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •