Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Unhappy Backgrounds are not repeating and leaving white bar on right ( makes it to scroll )

    Hey, so if you go look at my website at www.prismaticmonkey.com/new
    You can see that it is scrollable horizonatally.
    And when you do you see a white padding on the right.
    Where is this coming from / how do i remove it.

    HTML HERE

    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=utf-8" />
    <title>Blank HTML Template</title> 
    
    <link rel="stylesheet" type="text/css" media="screen, print" href="default.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
    
     
     <script src="cufon-yui.js" type="text/javascript"></script>
    		<script src="Lobster_14_400.font.js" type="text/javascript"></script>
    		<script type="text/javascript">
    			Cufon.replace('.navigation li'); // Works without a selector engine
    			Cufon.replace('.logo');
    			Cufon.replace('h1');
    			Cufon.replace('h2');
    			Cufon.replace('h3');
    			Cufon.replace('.message');
    			Cufon.replace('.col-1 li a');
    			
    		</script>
    </head> 
    
    <body>
    	<div class="header-wrap">
        	<div class="header container">
            	<div class="logo fl_left">Logo</div>
                <div class="navigation fl_right">
                	<ul>
                    	<li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Modeling</a></li>
                        <li><a href="#">Programming</a></li>
                        <li><a href="#">The game</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
            <div class="main container clear">
              <div class="line-100 clear">
           	    <h1>This is where we put something nice about our site.  </h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque eros vitae turpis semper nec imperdiet magna rhoncus. Morbi in adipiscing felis. Cras commodo congue malesuada. Vivamus sodales sagittis ligula quis scelerisque. Vivamus nibh elit, pellentesque nec egestas nec, viverra quis libero. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum ipsum eget nunc gravida id fermentum tellus tincidunt. Aenean ac dolor et massa fringilla congue vitae id tellus. Aenean non orci justo, eget vehicula ligula. Aenean mattis rutrum ullamcorper. In ac lectus ante, quis cursus velit. Quisque eros dui, dignissim id commodo et, rutrum eleifend felis. Curabitur in augue vel ligula ultricies pellentesque. Vestibulum consequat mauris sed ante laoreet lacinia.</p>
              </div>
                
              <div class="line-100 clear">
               		
              
                <h1>Our latest projects</h1>
                  
                <div class="line-25 fl_left">
                   	<dl>
                        	<dt><a href="#"><img src="graphics.jpg" width="200" height="172" /></a></dt>
                          <dd>
                              <h2>The Owl</h2>
                              <p>ac lectus ante, quis cursus velit. Quisque eros dui, dignissim id commodo et, rutrum eleifend felis. Curabitur in augue vel ligula ultricies pellentesque. Vestibulum consequat mauris sed ante laoreet lacinia.</p>
    <strong><a href="#">View Project &infin; </a></strong></dd>
                  </dl>
                </div>
                  
                <div class="line-25 fl_left">
                   	<dl>
                        	<dt><a href="#"><img src="shoe.jpg" width="200" height="172" /></a></dt>
                            <dd>
                              <h2>The Shoe</h2>
                              <p>ac lectus ante, quis cursus velit. Quisque eros dui, dignissim id commodo et, rutrum eleifend felis. Curabitur in augue vel ligula ultricies pellentesque. Vestibulum consequat mauris sed ante laoreet lacinia.</p>
    <strong><a href="#">View Project &infin; </a></strong></dd>
                        </dl>
                  </div>
                  
                <div class="line-25 fl_left">
                   	<dl>
                        	<dt><img src="power.jpg" width="200" height="172" /></dt>
                            <dd>
                              <h2>The Car</h2>
                              <p>ac lectus ante, quis cursus velit. Quisque eros dui, dignissim id commodo et, rutrum eleifend felis. Curabitur in augue vel ligula ultricies pellentesque. Vestibulum consequat mauris sed ante laoreet lacinia.</p>
    <strong><a href="#">View Project &infin; </a></strong></dd>
                        </dl>
                  </div>
                  
                <div class="line-25 fl_left none">
                   	<dl>
                        	<dt><a href="#"><img src="quality.jpg" width="200" height="172" /></a></dt>
                            <dd>
                              <h2>The Clock</h2>
                              <p>ac lectus ante, quis cursus velit. Quisque eros dui, dignissim id commodo et, rutrum eleifend felis. Curabitur in augue vel ligula ultricies pellentesque. Vestibulum consequat mauris sed ante laoreet lacinia.</p>
    <strong><a href="#">View Project &infin; </a></strong></dd>
                        </dl>
                  </div>
             </div>
             
             <div class="line-100 clear">
               		
              
                <h1>Our products and Services</h1>
                  
                <div class="line-25 fl_left">
                   	<dl>
                        	
                            <dd>
                              <h2>Brand Design</h2>ac lectus ante, quis cursus velit. Quisque eros dui, dignissim id commodo et, rutrum eleifend felis. Curabitur in augue vel ligula ultricies pellentesque. Vestibulum consequat mauris sed ante laoreet lacinia.</dd>
                  </dl>
               </div>
                  
                <div class="line-25 fl_left">
                   	<dl>
                        	
                            <dd>
                              <h2>Web Design</h2>ac lectus ante, quis cursus velit. Quisque eros dui, dignissim id commodo et, rutrum eleifend felis. Curabitur in augue vel ligula ultricies pellentesque. Vestibulum consequat mauris sed ante laoreet lacinia.</dd>
                  </dl>
               </div>
                  
                <div class="line-25 fl_left">
                   	<dl>
                        	
                            <dd>
                              <h2>Web Development</h2>ac lectus ante, quis cursus velit. Quisque eros dui, dignissim id commodo et, rutrum eleifend felis. Curabitur in augue vel ligula ultricies pellentesque. Vestibulum consequat mauris sed ante laoreet lacinia.</dd>
                  </dl>
               </div>
                  
                <div class="line-25 fl_left none">
                   	<dl>
                        	
                            <dd>
                              <h2>Graphic Design</h2>ac lectus ante, quis cursus velit. Quisque eros dui, dignissim id commodo et, rutrum eleifend felis. Curabitur in augue vel ligula ultricies pellentesque. Vestibulum consequat mauris sed ante laoreet lacinia.</dd>
                  </dl>
               </div>
             </div>
                
    </div>
            <div class="message clear">Creating Websites, Graphics and Games...all for you !!</div>
            <div class="above-footer clear">
            	<div class="container">
                    <div class="contact clear"><h3>Contact us now !</h3>
                  
    <!-- Begin Freedback Form -->
    <!-- DO NOT EDIT YOUR FORM HERE, PLEASE LOG IN AND EDIT AT FREEDBACK.COM -->
    <form enctype="multipart/form-data" method="post" action="http://www.freedback.com/mail.php" accept-charset="UTF-8">
    	<div>
    		<input type="hidden" name="acctid" id="acctid" value="tzhyaglnye0zipfu" />
    		<input type="hidden" name="formid" id="formid" value="991648" />
    		<input type="hidden" name="required_vars" id="required_vars" value="name,email,field-8c5373cf1b5297c" />
    	</div>
    	<table cellspacing="5" cellpadding="5" border="0" style="margin-top:20px;">
    		<tr>
    			<td height="26" valign="top">
    				<strong>Name:</strong>
    			</td>
    			<td valign="top">
    				<input type="text" name="name" id="name" size="40" value="" />
    				
    			</td>
    		</tr>
    		<tr>
    			<td height="32" valign="top">
    				<strong>Phone Number</strong>
    			</td>
    			<td valign="top">
    				<input type="text" name="field-db7904bf8ccdb57" id="field-db7904bf8ccdb57" size="40" value="" />
    				
    			</td>
    		</tr>
    		<tr>
    			<td height="45" valign="top">
    				<strong>What do you want to know about ?</strong>
    			</td>
    			<td valign="top">
    				<select name="field-90f9e17bfcba5e8" id="field-90f9e17bfcba5e8">
    					<option value="About the Team">About the Team</option>
    					<option value="About the Game">About the Game</option>
    					<option value="About our website">About our website</option>
    					<option value="Other">Other</option>
    				</select>
    				
    			</td>
    		</tr>
    		<tr>
    			<td height="30" valign="top">
    				<strong>Email Address:</strong>
    			</td>
    			<td valign="top">
    				<input type="text" name="email" id="email" size="40" value="" />
    				
    			</td>
    		</tr>
    		<tr style="margin-top:15px;">
    			<td height="107" valign="top">
    				<strong>Message</strong>
    			</td>
    			<td valign="top">
    				<textarea name="field-8c5373cf1b5297c" id="field-8c5373cf1b5297c" rows="6" cols="32"></textarea>
    				
    			</td>
    		</tr>
    		<tr>
    			<td colspan="2" align="center">
    				<input type="submit" value=" Submit Form " style="float:right;" />
    			</td>
    		</tr>
    	</table>
    </form>
    
    <!-- End Freedback Form -->
    
              </div>
                    <div class="col-1"><h3>Latest Blog Posting</h3><script src="http://feeds.feedburner.com/webdesignerdepot/uXbO?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/webdesignerdepot/uXbO"></a><br/>Powered by FeedBurner</p> </noscript></div>
                    
                    <div class="col-1">
                    	<h3>Testimonials</h3>
                        <ul>
                        	<li>Prismatic Monkey has been nothing less than Excelent. Thank you. </li>
                            <li>Will come back again and again.  </li>
                            <li>Best Design team around. Thanks. </li>
                            <li>Prismatic Monkey has been nothing less than Excelent. Thank you. </li>
                            <li>Will come back again and again.  </li>
                            <li>Best Design team around. Thanks. </li>
                            
                        </ul>
                    </div>
                    
                    <div class="col-2">
                    	<h3>Our Team</h3>
                        <ul>
                          <li><a href="#">Aaron Armstrong</a></li>
                          <li><a href="#">Andrew Schmitt</a></li>
                          <li><a href="#">Alex Polzin</a></li>
                          <li><a href="#">Andrew Schmitt</a></li>
                          <li><a href="#">Josh Peck</a></li>
                          <li><a href="#">Mathew Southin</a></li>
                            
                        </ul>
                    </div>
                    
                    
                    
                    </div></div>
            
    <div class="footer">
    	<div class="container">
            	<div class="copyright fl_left">Copyright &copy; Prismatic Monkey - All rights reserved.</div>
                <div class="social fl_right"><a href="#"><img src="http://lasl2.wikispaces.com/file/view/Facebook-icon.png" width="19" height="19" /></a><a href="#"><img src="http://www.greyspointcamp.com/index%20images/youtube_icon.png" width="19" height="19" /></a><a href="#"><img src="http://www.icontainers.com/main/images/social/Linkedin_icon.png" width="19" height="19" /></a></div> 
        </div> 
    </div>
        
    </body>
    </html>
    CSS HERE
    Code:
    	
    	html, body, div, span, applet, object, iframe, form, h1, h2, h3, h4, h5, h6, p, blockquote, a, em, font, img, small, strike, samp, strong, sub, sup, label, caption, ul, ol, dl
    	{ 
    		margin: 0; 
    		padding: 0; 
    		border: 0;
    		vertical-align: baseline;
    	}
    	
    	table
    	{ 
    		border-collapse: collapse; 
    		border-spacing: 0; 
    	}
    	 
    	caption, th, td
    	{ 
    		text-align: left; 
    		font-weight: normal; 
    	}
    	
    	table, tbody, tfoot, thead, tr, th, td
    	{
    		vertical-align: top;
    	}
    	
    	
    	
    	/* ---------------------------------------------------------------------------------------------- */
    	/* -------------------------------------- STANDARD CLASSES -------------------------------------- */
    	
    	.clear 	{ clear: both;  }
    
    	
    	.clearfix:after 				{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    	* html .clearfix            	{ zoom: 1; } /* IE6 */
    	*:first-child+html .clearfix 	{ zoom: 1; } /* IE7 */
    	
    	img.fl_left		{ display: block; margin: 0 1em 1em 0; }
    	img.fl_right	{ display: block; margin: 0 0 1em 1em; }
    	
    	.fl_left 		{ float: left; }
    	.fl_right 		{ float: right; }
    	.fl_absMiddle	{ display: block; text-align: center; margin: 0 auto; }
    	
    	.txt-right		{ text-align: right; }
    	.txt-left		{ text-align: left; }
    	.txt-center		{ text-align: center; }
    	
    	.hide			{ display: none; }
    	.show			{ display: block; }
    	
    	.print-only		{ display: none; }
    
    /*  ================================================================================================  */
    /*  ================================================================================================  */
        
    	
    
    
    /*  ================================================================================================  */
    /*  ================================================================================================  */
    	
    	html { font-size: 62.5%; }
    	body { color: #858585; font: normal 1.2em/1.4 Arial, Helvetica, sans-serif;   }
    	* {margin:0;padding:0;} 
    	html, body {height: 100%;}
    /*  ========== CONTENT TAGS ==========  */
    
    	/* Headings */
    		h1, 
    		h2, 
    		h3, 
    		h4, 
    		h5, 
    		h6	{ margin: 0; padding: 0; line-height: 1.1em; font-weight: normal; }
    		
    		h1	{ font-size: 2.5em;  color:#999; padding-top:15px; padding-bottom:15px; border-top:1px solid #CCC; border-bottom:1px solid #ccc; width:100%; text-align:center;  }
    		h2	{ font-size: 1.5em; margin-bottom: 0em; color:#666;border-bottom:solid 1px #ccc; padding-bottom:5px; margin-bottom:5px;  }
    		h3	{ font-size: 1.8em; margin-bottom: 0em; }
    		h4	{ font-size: 1.5em; margin-bottom: 0em; }
    		h5	{ font-size: 1.3em; margin-bottom: 0em; }
    		h6	{ font-size: 4em; margin-bottom: 0em; font-weight:bold; margin-top:30px; }
    		
    	/* Paragraph */
    		p 	{ padding:10px; }
    		
    	/* Links */
    		
    		
    	/* Lists */
    		ul	{ margin: 0 0 1em; list-style: none; }
    		ol	{ margin: 0 0 1em; }
    		
    		ol	{ padding: 0 0 0 1.4em; margin-left: 0; }
    		ol li	{ margin-left: .4em; }
    		.none { border:none !important; }
    	
    		
    	/* Forms */
    		input,
    		textarea 	{ }
    		input:focus	{ outline: none; }
    		
    		textarea,
    		.input-text	{ }
    		
    		fieldset	{ }
    		label		{ }
    		legend		{ }
    		
    	/* Blockquote */
    		blockquote		{ }
    		blockquote p	{ }
    		
    	/*  Image  */
    		img	{  border:3px solid #CCC;  }
    		img:hover	{  border:3px solid #f60; }
    		
    		body { color:#858585;}
    		
    		/* Links */
    		a,
    		a:link 		{ color:#F60; text-decoration:none;}
    		a:visited	{ color:#F60; text-decoration:none; }
    		a:active,
    		a:focus,
    		a:hover		{ color:#333; text-decoration:underline;}
    		
    /*  ================================================================================================  */
    /*  ================================================================================================  */
    
    	/*  ========== MAIN DIV'S ==========  */
    		.container { width:1000px; margin:0 auto;  }
    		#wrapper { width:100%; } 
    		.header-wrap { border-top:solid 2px #F60; width:100%; float:left; }
    		.header {  padding-top:10px; }
    		.logo { font-size:60px; width:200px; }
    		.navigation { width:800px; font-size:16px; padding-top:20px; }
    		.navigation ul { float:right; }
    		.navigation ul li { margin-left:40px; float:left; padding:10px;
    		
    		-moz-border-radius-topleft: 5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;  }
    		.navigation ul li a { width:100%; height:100%; display:block; color:#858585;}
    		.navigation ul li:hover { background-color:#EFEFEF; color:#f60; }
    		.navigation ul li.active{ background-color:#EFEFEF; color:#f60; }
    		.navigation ul li a:hover {  }
    		
    		.slider { width:100%; margin-bottom:20px; margin-top:20px; }
    		.line-100 { width:100%; margin-bottom:10px; clear:both; float:left; margin-top:20px;  }
    		.line-100 p {
    	padding:10px;
    	font-size:12px;
    }
    		.line-75 { width:700px; margin-bottom:20px;float:left; }
    		.line-50 { width:100%; margin-bottom:20px;float:left; }
    		.line-25 { width:200px; display:block; margin-bottom:20px;float:left; border-right:1px solid #CCC; margin-left:20px; padding-right:25px; margin-top:10px; }
    		.line-25 dl { float:left; }
    		.line-25 dt img { margin:0 auto;   }
    		.line-25 dd { padding:5px; text-align:center;}
    		
    		
    		.message { background-color:#f60; text-align:center; color:#fff; font-size:24px; padding:10px; }
    		.above-footer { background-color:#333; padding-top:10px; width:100%; float:left; }
    		.contact {  width:375px; color:#FFFFFF; float:left; margin-top:10px; }
    		.social img { padding-left:5px; padding-right:5px; border:none; }
    		.col-1 { width:200px; float:left; margin-top:10px; color:#FFF; margin-left:20px; }
    		
    		.col-1 ul { float:left; margin-top:10px; }
    		.col-1 ul li { margin:0; padding:0; padding-bottom:15px; border-bottom: dashed 1px #666666; padding-top:10px; }
    		
    		.col-2 { width:130px; float:left; margin-top:10px; color:#FFF; margin-left:20px; }
    		
    		.col-2 ul { float:left; margin-top:10px; }
    		.col-2 ul li { margin:0; padding:0; padding-bottom:15px; border-bottom: dashed 1px #666666; padding-top:10px; width:130px; }
    		
    		.col-2 a { color:#fff; }
    		.col-2 a:hover { color:#f60; }
    		.footer { padding:10px; background-color:#141414; width:100%; float:left; }
    		.feedburnerFeedBlock ul {
    margin-left:0;
    padding-left:0;
    margin:0; padding:0;
    list-style-type: none;
    margin-top:10px;
    }
    .feedburnerFeedBlock ul li {
     padding-bottom:15px; 
    }
    
    
    
    .feedburnerFeedBlock ul li span.headline a {
    margin-bottom:5px; padding:0;
    text-decoration: none;
    display: block; font-size:14px;
    
    }
    
    
    
    #creditfooter {
    display: none;
    }
    		
    
    
    
    		
    		
    /*  ================================================================================================  */
    /*  ================================================================================================  */
    
    
    .theme-default #slider {
        margin:100px auto 0 auto;
        width:618px; /* Make sure your images are the same size */
        height:246px; /* Make sure your images are the same size */
    }
    .theme-pascal.slider-wrapper,
    .theme-orman.slider-wrapper {
        margin-top:150px;
    }

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,755
    Thanks
    41
    Thanked 191 Times in 190 Posts
    the padding in your .footer class is pushing that one element 20px bigger (you set it to 10px, 10 on left and right yields 20)... anyways removing that "un-stretches" it and let's it "squish" back to the size of everyone else...

    you can either remove the padding from that class completely or change it to padding-top:10px; and padding-bottom:10px;

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    aaronhockey_09 (09-13-2011)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    thanks so much. I knew it was a stupid mistake, i meant to have just padding on top and bottom. I thanked you


  •  

    Tags for this Thread

    Posting Permissions

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