SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Padding

  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Padding

    I hope you guys can help....

    Why is it that when you apply padding to all four sides like this:

    padding: 0px;

    The padding top value seems to be greater than the padding left value when it is viewed in the browser?

    I hope that makes sense

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It isn't the padding then, unless a style is not overridden by a previous one (specifity) or if it's a line-height or margin applied to that element.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's probably just a mind trick . I see them all equally though. But if you do notice an actual distance then something else is probably at play.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <!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>
    		<title>Footbag Freaks</title>
    		<meta http-equiv="Content-Type"
    				content="text/html; charset=utf-8" />
    		<link rel="stylesheet" type="text/css" href="styles.css" />
    	</head>
    	<body>
    		<div id="wrapper">
    			<div id="header">
    				<img src="img/logo.gif" alt="Footbag Freaks" height="77" width="203" />
    				<div id="header-bottom">
    					<p id="tagline">The home of the Hack</p>
    					<ul>
    						<li><a href="">Contact Us</a></li>
    						<li><a href="">About Us</a></li>
    						<li><a href="">Privacy Policy</a></li>
    						<li><a href="">Sitemap</a></li>
    					</ul>
    				</div><!-- header-bottom -->	
    			</div><!-- header -->
    			<div id="content">
    				<h2>Simon Says</h2>
    				<p>Simon Mackie tells us how a change of boots has given him new moves and a new outlook
    						as the new season approaches.</p>
    				<p><a href="">Read More</a></p>
    				<h2>Recent Features</h2>
    				<ul>
    					<li>
    						<h3>Head for the Hills: Is Altitude Training the Answer?</h3>
    						<p>Lachlan 'Super Toe' Donald</p>
    						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
    								Curae; Present hendrerit iaculis arcu.</p>
    						<p><a href="">Full Story</a></p>	
    					</li>
    					<li>
    						<h3>Hack up the Place: Freestylin' Super Tips</h3>
    						<p>Jules 'Pony King' Szemere</p>
    						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
    								Curae; Present hendrerit iaculis arcu.</p>
    						<p><a href="">Full Story</a></p>		
    					</li>
    					<li>
    						<h3>The Complete Black Hat Hacker's Survival Guide</h3>
    						<p>Mark 'Steel Tip' Harbottle</p>
    						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
    								Curae; Present hendrerit iaculis arcu.</p>
    						<p><a href="">Full Story</a></p>		
    					</li>
    					<li>
    						<h3>The Complete Black Hat Hacker's Survival Guide</h3>
    						<p>Mark 'Steel Tip' Harbottle</p>
    						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
    								Curae; Present hendrerit iaculis arcu.</p>
    						<p><a href="">Full Story</a></p>		
    					</li>
    					<li>
    						<h3>Five Tricks You Didn't Even Know You Knew</h3>
    						<p>Simon 'Mack Daddy' Mackie</p>
    						<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices pousuere cubilia
    								Curae; Present hendrerit iaculis arcu.</p>
    						<p><a href="">Full Story</a></p>		
    					</li>
    				</ul>
    			</div><!-- content -->
    			<div id="sidebar">
    				<h3>Site Search</h3>
    				<form method="post" action="" id="searchform">
    					<div>
    						<label for="keywords">Keywords</label>:
    						<input type="text" name="keywords" id="keywords" />
    					</div>
    					<div>
    						<input type="submit" name="btnSearch" id="btnSearch" />
    					</div>
    				</form>
    				<h3>Coming Events</h3>
    				<ul>
    					<li>10 Apr 06 -<br /><a href="">Seattle Zone Qualifier</a></li>
    					<li>13 Apr 06 -<br /><a href="">Footbag00M 05 - NY</a></li>
    					<li>21 Apr 06 -<br /><a href="">WFPA AGM - Hong Kong</a></li>
    					<li>3 May 06 -<br /><a href="">World Cup - Round 9</a></li>
    				</ul>
    				<h3>Move of the Month</h3>
    				<h4>The Outer Stall</h4>
    				<p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam. Sed vestibulum leo.</p>
    				<p><a href="">more</a></p>
    			</div><!-- sidebar -->
    		</div><!-- wrapper -->
    	</body>
    </html>

    Code CSS:
    /*
    CSS for Footbag Freaks
    */
     
    body {
    	margin: 0;
    	padding: 0;
    	background-color: #050845;
    	color: white;
    	background-image: url(img/bg.jpg);
    	background-repeat: repeat-x;
    	font: small Arial, Helvetica, Verdana, sans-serif;
    	}
     
    #wrapper {
    	background-color: #fdf8f2;
    	color: black;
    	margin: 30px 40px 30px 40px;
    	padding: 10px;
    	}
     
    #header-bottom {
    	border-top: 1px solid #b9d2e3;
    	border-bottom: 1px solid #b9d2e3;
    	}
     
    #header-bottom ul {
    	margin: 0;
    	padding: 0;
    	}
     
    #header-bottom li {
    	display: inline;
    	}
     
    #header-bottom a:link, #header-bottom a:visited {
    	text-decoration: none;
    	background-color: #fdf8f2;
    	color: #050845;
    	}
     
    #tagline {
    	font-weight: bold;
    	background-color: #fdf8f2;
    	color: #050845;
    	font-style: italic;
    	}

    This is the markup, see if you can see what I mean.

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Which element are we meant to be looking at?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the "content" inside the "wrapper"

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, make sure you have margins reset for elements.
    I notice many elements in there that have margins set by default.
    Code:
    h2,p{margin:0;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •