www.webdeveloper.com
Results 1 to 2 of 2

Thread: How do I remove this unexpected padding?

Threaded View

  1. #1
    Join Date
    Jun 2007
    Posts
    73

    Post How do I remove this unexpected padding?

    Hi,

    I am building a two column panel based layout and have encountered padding / spacing between the three elements of the panels (top, middle, and bottom). This can be seen when viewing in Firefox. I am not too concerned about the page not rendering correctly in Internet Explorer as I will most likely do a seperate stylesheet for IE unless someone can suggest a single stylesheet method to get cross browser compatibility with this whilst maintaining W3C compliance.

    What is causing this padding / spacing, and how can it be removed?

    My HTML code:
    HTML Code:
    <html>
    	<head>
    		<style type="text/css">
    			body
    			{
    				margin: 0px;
    				background: #666666;
    			}
    			h1
    			{
    			}
    			h2
    			{
    			}
    			h3
    			{
    			}
    			p
    			{
    			}
    			a
    			{
    			}
    			#container
    			{
    				margin: 20px auto 0px auto;
    				width: 960px;
    			}
    			#row
    			{
    				position: relative;
    				margin: 0px;
    				padding: 0px;
    				width: 960px;
    			}
    			#columnSmall
    			{
    				position: relative;
    				margin: 0px 10px 0px 10px;
    				padding: 0px;
    				width: 300px;
    				float: left;
    			}
    			#columnMedium
    			{
    				position: relative;
    				margin: 0px 10px 0px 10px;
    				padding: 0px;
    				width: 620px;
    				float: left;
    			}
    			#columnLarge
    			{
    				position: relative;
    				margin: 0px 10px 0px 10px;
    				padding: 0px;
    				width: 940px;
    				float: left;
    			}
    			#columnSmall .panel
    			{
    				position: relative;
    				margin: 0px 0px 20px 0px;
    				padding: 0px;
    				width: 300px;
    			}
    			#columnSmall .panel #head
    			{
    				margin: 0px;
    				padding: 0px;
    				width: 300px;
    				height: 8px;
    				background: url('small1.png');
    			}
    			#columnSmall .panel #main
    			{
    				margin: 0px;
    				padding: 0px 20px 0px 20px;
    				width: 260px;
    				background: #ffffff;
    			}
    			#columnSmall .panel #foot
    			{
    				margin: 0px;
    				padding: 0px;
    				width: 300px;
    				height: 8px;
    				background: url('small2.png');
    			}
    			#columnMedium .panel
    			{
    				position: relative;
    				margin: 0px 0px 20px 0px;
    				padding: 0px;
    				width: 620px;
    			}
    			#columnMedium .panel #head
    			{
    				margin: 0px;
    				padding: 0px;
    				width: 620px;
    				height: 8px;
    				background: url('medium1.png');
    			}
    			#columnMedium .panel #main
    			{
    				margin: 0px;
    				padding: 0px 20px 0px 20px;
    				width: 580px;
    				background: #ffffff;
    			}
    			#columnMedium .panel #foot
    			{
    				margin: 0px;
    				padding: 0px;
    				width: 620px;
    				height: 8px;
    				background: url('medium2.png');
    			}
    			#columnLarge .panel
    			{
    				position: relative;
    				margin: 0px 0px 20px 0px;
    				padding: 0px;
    				width: 940px;
    			}
    			#columnLarge .panel #head
    			{
    				margin: 0px;
    				padding: 0px;
    				width: 940px;
    				height: 8px;
    				background: url('large1.png');
    			}
    			#columnLarge .panel #main
    			{
    				margin: 0px;
    				padding: 0px 20px 0px 20px;
    				width: 900px;
    				background: #ffffff;
    			}
    			#columnLarge .panel #foot
    			{
    				margin: 0px;
    				padding: 0px;
    				width: 940px;
    				height: 8px;
    				background: url('large2.png');
    			}
    		</style>
    		<script type="text/javascript">
    		</script>
    	</head>
    	<body>
    		<div id="container">
    			<div id="row">
    				<div id="columnMedium">
    					<div id="article" class="panel">
    						<div id="head">
    						</div>
    						<div id="main">
    							<h2>Lorum Ipsum Dolor</h2>
    							<h3><a href="#">John Askew</a>, Friday 23rd August 2009, 9:32am</h3>
    							<p>Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipiscing elit. Nulla turpis sem, dapibus non consequat eu, condimentum id enim. Morbi vel metus in mauris aliquet bibendum id sed purus. Mauris et nunc vel ligula semper cursus. Quisque placerat convallis dolor et dignissim. Duis nulla libero, malesuada nec tristique sit amet, rhoncus ut quam. Ut faucibus arcu quis est ultrices congue. In porttitor bibendum quam, nec venenatis magna porttitor id. Nullam lacinia, elit non vulputate feugiat, quam nisl faucibus nisl, tempus placerat odio mauris vitae augue. Donec vitae turpis mi, id ornare lectus. Ut consequat tempus massa non sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla fermentum dolor, eleifend scelerisque elit volutpat sed.</p>
    						</div>
    						<div id="foot">
    						</div>
    					</div>
    				</div>
    				<div id="columnSmall">
    					<div id="profile" class="panel">
    						<div id="head">
    						</div>
    						<div id="main">
    							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla turpis sem, dapibus non consequat eu, condimentum id enim. Morbi vel metus in mauris aliquet bibendum id sed purus. Mauris et nunc vel ligula semper cursus. Quisque placerat convallis dolor et dignissim. Duis nulla libero, malesuada nec tristique sit amet, rhoncus ut quam. Ut faucibus arcu quis est ultrices congue. In porttitor bibendum quam, nec venenatis magna porttitor id. Nullam lacinia, elit non vulputate feugiat, quam nisl faucibus nisl, tempus placerat odio mauris vitae augue. Donec vitae turpis mi, id ornare lectus. Ut consequat tempus massa non sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla fermentum dolor, eleifend scelerisque elit volutpat sed.</p>
    						</div>
    						<div id="foot">
    						</div>
    					</div>
    					<div id="advertisment" class="panel">
    						<div id="head">
    						</div>
    						<div id="main">
    							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla turpis sem, dapibus non consequat eu, condimentum id enim. Morbi vel metus in mauris aliquet bibendum id sed purus. Mauris et nunc vel ligula semper cursus. Quisque placerat convallis dolor et dignissim. Duis nulla libero, malesuada nec tristique sit amet, rhoncus ut quam. Ut faucibus arcu quis est ultrices congue. In porttitor bibendum quam, nec venenatis magna porttitor id. Nullam lacinia, elit non vulputate feugiat, quam nisl faucibus nisl, tempus placerat odio mauris vitae augue. Donec vitae turpis mi, id ornare lectus. Ut consequat tempus massa non sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla fermentum dolor, eleifend scelerisque elit volutpat sed.</p>
    						</div>
    						<div id="foot">
    						</div>
    					</div>
    				</div>
    			</div>
    			<div id="row">
    				<div id="columnLarge">
    					<div id="terms" class="panel">
    						<div id="head">
    						</div>
    						<div id="main">
    							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla turpis sem, dapibus non consequat eu, condimentum id enim. Morbi vel metus in mauris aliquet bibendum id sed purus. Mauris et nunc vel ligula semper cursus. Quisque placerat convallis dolor et dignissim. Duis nulla libero, malesuada nec tristique sit amet, rhoncus ut quam. Ut faucibus arcu quis est ultrices congue. In porttitor bibendum quam, nec venenatis magna porttitor id. Nullam lacinia, elit non vulputate feugiat, quam nisl faucibus nisl, tempus placerat odio mauris vitae augue. Donec vitae turpis mi, id ornare lectus. Ut consequat tempus massa non sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla fermentum dolor, eleifend scelerisque elit volutpat sed.</p>
    						</div>
    						<div id="foot">
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    Live version:
    http://www.vouzamo.co.uk/site/index.html
    Last edited by vouzamo; 09-03-2009 at 04:23 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles