SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question When to use normal vs. shorthand (my case: padding)

    Okay, I have some elements that are using padding the extended way, but when I try to use it in the shorthand, it messes up.

    Why?

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cos you're doing it wrong? Post an example.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Cos you're doing it wrong
    blunt - but true

  4. #4
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was trying to make this:
    Code:
    padding-right:5px;
    padding-left:10px;
    turn into this:
    Code:
    padding:0 5px 0 10px;
    Is that wrong?

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    No, that should work. Maybe try adding a space between the colon and the 0?

  6. #6
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only thing that would make those two examples look different is if the element had some default top and bottom padding, as the second shorthand version removes that.

  7. #7
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you will see in my code here, you will notice that not only does that not work (the padding shorthand issue), but also that my left column appears to run over even despite myself applying the clear:both command to the bottom paragraph.

    What do you think?

    Code:
    <!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>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		
    	<style type ="text/css">
    *{ 
    	margin:0; 
    	padding:0; 
    	}
    
    body{
    	height:100%;
    	color:#d6d6d6;
    	background: #000000 url(images/bodyTile.png) repeat-x bottom fixed;
    	}
    	
    #wrapper{
    	margin:auto;	
    	width:760px;
    	background: transparent url(images/stsBG.png) no-repeat center center fixed;
    	}
    	
    #banner{
    	border:1px transparent dashed;
    	width:100%;
    	height:200px;
    	text-align:center;
    	background: transparent url(images/banner.png) no-repeat center top;
    	font-size:10px;
    	color:#d6d6d6;
    	}
    
    #banner ul{
    	margin:155px 0;
    	width:100%;
    	height:10px;
    	color:#d6d6d6;	
    	}	
    	
    #banner li{
    	padding-right:5px;
    	padding-left:5px;
    	text-align:center;
    	display:inline;
    	}
    
    #banner a:active{color:#d6d6d6; text-decoration:none; background-color:transparent;}	
    #banner a:link{color:#d6d6d6; text-decoration:none; background-color:transparent;}
    #banner a:hover{color:#ffffff; text-decoration:none; background-color:transparent;}
    #banner a:visited{color:#d6d6d6; text-decoration:none; background-color:transparent;}
    
    #navA{
    	height:100px;
    	background: transparent url(images/ribLeft.png) no-repeat left bottom; 
    	}
    	
    #navB{
    	height:100px;
    	background: transparent url(images/ribRight.png) no-repeat right top; 
    	}
    		
    #content{
    	background: url(images/contentTile.png) repeat-y center;
    	overflow:hidden;
    	}
    	
    #leftP, #middleP, #rightP{
    	padding-bottom:500px;
    	margin-bottom:-500px;
    	}	
    	
    #leftP{
    	padding-left:10px;
    	padding-right:5px;
     	width:190px;
     	display:inline;
     	float:left; 	
     	border-top:1px #ffffff dashed;
     	border-right:1px #ffffff dotted;
     	font-size:10px; 	
    	}	
     
    #centerP{
    	padding-left:5px;
    	padding-right:5px;
     	width:340px;	
     	display:inline;
     	float:left;
     	border-bottom:1px #ffffff solid;
     	font-size:14px;
     	}
     	
    #rightP{
     	margin:0 0 0 555px;
    	padding-left:5px; 
    	width:195px;
     	border-top:1px #ffffff dashed;
     	border-left:1px #ffffff dotted;
     	font-size:10px;
     	} 
     	
    #bottomP{
    	width:748px;
    	padding:5px;
    	clear:both;
    	border-top:1px #ffffff dashed;
    	}	
    	
    	
    #joinerA{
    	width:100%;
    	height:15px;
    	background: transparent url(images/upperBridge.png) no-repeat center;
    	}	
    	
    #joinerB{
    	width:100%;
    	height:15px;
    	background: transparent url(images/bottomBridge.png) no-repeat center;
    	}
    
    #footer{
    	width:100%;
    	height:125px;
    	background: transparent url(images/footer.png) no-repeat center bottom;
    	}
    	
    .center{
    	text-align:center;
    	}
    
    .clear{
    	overflow:hidden; 
    	clear:both;
    	}
    
    .pT{
    	padding-top:10px;
    	}
    	
    .pB{
    	padding-bottom:10px;
    	}
    	
    a:active{color:#d6d6d6; text-decoration:none; background-color:transparent;}	
    a:link{color:#cf0044; text-decoration:none; background-color:transparent;}
    a:hover{color:#ffffff; text-decoration:none; background-color:transparent;}
    a:visited{color:#d6d6d6; text-decoration:none; background-color:transparent;}
    	</style>
    
    </head>
    
    <body>
    
    <div id ="wrapper"> 
      
      <div id="banner"> 
    	<ul> 
      		<li><a href="##">Websites</a></li> 
       		<li><a href="##">Websites</a></li> 
      		<li><a href="##">Websites</a></li> 
       		<li><a href="##">Websites</a></li>
      		<li><a href="##">Websites</a></li> 
       		<li><a href="##">Websites</a></li>
      	</ul>
      </div><!-- end banner -->
      
      <div id="navA"></div><!-- end navA -->
      <div id="joinerA"></div><!-- end joinerA -->
      
      <div id ="content"> 
        
        <div id="leftP">
        
        <p class ="pT pB">mauris laoreet mi, ac dapibus ante ante sit amet sapien. Aliquam sapien 
    	dolor, gravida at, scelerisque sit amet, sollicitudin nec, urna. Curabitur 
    	lectus ipsum, egestas semper, fringilla sit amet, blandit ut, neque. 
    	Pellentesque vitae nulla non turpis vestibulum aliquet. Morbi odio. Fusce 
    	nonummy, ipsum et dictum ornare, sapien urna cursus enim, in aliquam mi nibh 
    	ac orci. Morbi sed ante. Sed nibh justo, lobortis in, suscipit a, vestibulum 
    	sit amet, quam. Etiam ornare mi ac tellus. Curabitur porttitor aliquam</p>
    	
    	<p class ="pT pB">mauris laoreet mi, ac dapibus ante ante sit amet sapien. Aliquam sapien 
    	dolor, gravida at, scelerisque sit amet, sollicitudin nec, urna. Curabitur 
    	lectus ipsum, egestas semper, fringilla sit amet, blandit ut, neque. 
    	Pellentesque vitae nulla non turpis vestibulum aliquet. Morbi odio. Fusce 
    	nonummy, ipsum et dictum ornare, sapien urna cursus enim, in aliquam mi nibh 
    	ac orci. Morbi sed ante. Sed nibh justo, lobortis in, suscipit a, vestibulum 
    	sit amet, quam. Etiam ornare mi ac tellus. Curabitur porttitor aliquam</p>
    
        <p class ="pT pB">mauris laoreet mi, ac dapibus ante ante sit amet sapien. Aliquam sapien 
    	dolor, gravida at, scelerisque sit amet, sollicitudin nec, urna. Curabitur 
    	lectus ipsum, egestas semper, fringilla sit amet, blandit ut, neque. 
    	Pellentesque vitae nulla non turpis vestibulum aliquet. Morbi odio. Fusce 
    	nonummy, ipsum et dictum ornare, sapien urna cursus enim, in aliquam mi nibh 
    	ac orci. Morbi sed ante. Sed nibh justo, lobortis in, suscipit a, vestibulum 
    	sit amet, quam. Etiam ornare mi ac tellus. Curabitur porttitor aliquam</p>
        
        <p class ="pT pB">mauris laoreet mi, ac dapibus ante ante sit amet sapien. Aliquam sapien 
    	dolor, gravida at, scelerisque sit amet, sollicitudin nec, urna. Curabitur 
    	lectus ipsum, egestas semper, fringilla sit amet, blandit ut, neque. 
    	Pellentesque vitae nulla non turpis vestibulum aliquet. Morbi odio. Fusce 
    	nonummy, ipsum et dictum ornare, sapien urna cursus enim, in aliquam mi nibh 
    	ac orci. Morbi sed ante. Sed nibh justo, lobortis in, suscipit a, vestibulum 
    	sit amet, quam. Etiam ornare mi ac tellus. Curabitur porttitor aliquam</p>
        
        <p class ="pT pB">mauris laoreet mi, ac dapibus ante ante sit amet sapien. Aliquam sapien 
    	dolor, gravida at, scelerisque sit amet, sollicitudin nec, urna. Curabitur 
    	lectus ipsum, egestas semper, fringilla sit amet, blandit ut, neque. 
    	Pellentesque vitae nulla non turpis vestibulum aliquet. Morbi odio. Fusce 
    	nonummy, ipsum et dictum ornare, sapien urna cursus enim, in aliquam mi nibh 
    	ac orci. Morbi sed ante. Sed nibh justo, lobortis in, suscipit a, vestibulum 
    	sit amet, quam. Etiam ornare mi ac tellus. Curabitur porttitor aliquam</p>
    	</div><!-- end leftP -->
    	
    	<div id="centerP">
    	<p class ="center">mauris laoreet mi, ac dapibus ante ante sit amet sapien. Aliquam sapien 
    	dolor, gravida at, scelerisque sit amet, sollicitudin nec, urna. Curabitur 
    	lectus ipsum, egestas semper, fringilla sit amet, blandit ut, neque. 
    	Pellentesque vitae nulla non turpis vestibulum aliquet. Morbi odio. Fusce 
    	nonummy, ipsum et dictum ornare, sapien urna cursus enim, in aliquam mi nibh 
    	ac orci. Morbi sed ante. Sed nibh justo, lobortis in, suscipit a, vestibulum 
    	sit amet, quam. Etiam ornare mi ac tellus. Curabitur porttitor aliquam</p>
    	</div><!-- end centerP -->
    
    	<div id="rightP">    
        <p class ="pT pB">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    	Mauris aliquam, dolor vel vehicula ornare, erat justo gravida mi, a molestie 
    	libero nulla a massa. Sed a libero sit amet turpis tristique tempus. Mauris 
    	pede eros, ullamcorper ac, scelerisque ut, pellentesque eget, mauris. 
    	Quisque at ipsum. Quisque risus. Quisque rhoncus nunc id metus. Quisque 
    	fermentum sem vel odio. Ut adipiscing, erat et dapibus adipiscing, arcu 
    	mauris laoreet mi, ac dapibus ante ante sit amet sapien. Aliquam sapien 
    	dolor, gravida at, scelerisque sit amet, sollicitudin nec, urna. Curabitur 
    	lectus ipsum, egestas semper, fringilla sit amet, blandit ut, neque. 
    	Pellentesque vitae nulla non turpis vestibulum aliquet. Morbi odio. Fusce 
    	nonummy, ipsum et dictum ornare, sapien urna cursus enim, in aliquam mi nibh 
    	ac orci. Morbi sed ante. Sed nibh justo, lobortis in, suscipit a, vestibulum 
    	sit amet, quam. Etiam ornare mi ac tellus. Curabitur porttitor aliquam 
    	turpis.</p>
        </div><!-- end rightP -->
    	
    	<div id ="bottomP">
    	<p class ="clear">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    	Mauris aliquam, dolor vel vehicula ornare, erat justo gravida mi, a molestie 
    	libero nulla a massa. Sed a libero sit amet turpis tristique tempus. Mauris 
    	pede eros, ullamcorper ac, scelerisque ut, pellentesque eget, mauris. 
    	Quisque at ipsum. Quisque risus. Quisque rhoncus nunc id metus. Quisque 
    	fermentum sem vel odio. Ut adipiscing, erat et dapibus adipiscing, arcu 
    	mauris laoreet mi, ac dapibus ante ante sit amet sapien. Aliquam sapien 
    	dolor, gravida at, scelerisque sit amet, sollicitudin nec, urna. Curabitur 
    	lectus ipsum, egestas semper, fringilla sit amet, blandit ut, neque. 
    	Pellentesque vitae nulla non turpis vestibulum aliquet. Morbi odio. Fusce 
    	nonummy, ipsum et dictum ornare, sapien urna cursus enim, in aliquam mi nibh 
    	ac orci. Morbi sed ante. Sed nibh justo, lobortis in, suscipit a, vestibulum 
    	sit amet, quam. Etiam ornare mi ac tellus. Curabitur porttitor aliquam 
    	turpis.</p>
    	</div><!-- end bottomP -->
    	
      </div><!-- end content -->    
      
      <div id="joinerB"></div><!-- end joinerB -->
      <div id="navB"></div>
      
      <div id="footer"> 
      </div><!-- end footer -->
    
    </div><!-- end wrapper -->
    
    </body>
    </html>

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    and what is this used for ?

    #leftP, #middleP, #rightP{
    padding-bottom:500px;
    margin-bottom:-500px;
    }

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wolf_22
    I was trying to make this:
    Code:
    padding-right:5px;
    padding-left:10px;
    turn into this:
    Code:
    padding:0 5px 0 10px;
    Is that wrong?
    Not necessarily, but it's not the same thing.
    Code:
    padding:0 5px 0 10px;
    is the same as
    Code:
    padding-top:0;
    padding-right:5px;
    padding-bottom:0;
    padding-left:10px;
    The difference is that your second example sets the top and bottom padding to zero, while your first example leaves them untouched. Depending on other rules in your style sheet, that can have a significant impact on the layout.

    Use shorthand notation only when you explicitly want to set all properties that are affected. Use longhand notation when you just want to set individual properties.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,710
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    and what is this used for ?

    #leftP, #middleP, #rightP{
    padding-bottom:500px;
    margin-bottom:-500px;
    }

    Hey nerds... I was trying to use this:
    http://www.positioniseverything.net/...ut/equalheight

    AutisticCuckoo: is it a bad practice to leave padding untouched if you can?
    Last edited by Wolf_22; Mar 8, 2006 at 13:16.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    is it a bad practice to leave padding untouched if you can?
    You should set all margins and padding to zero right at the start of the stylesheet and that will not only save you typing it out hundreds of times in the code it will also solve many headaches as well.
    Code:
    *{margin:0;padding:0}
    Of course you then just set the values you require as you go.

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wolf_22
    AutisticCuckoo: is it a bad practice to leave padding untouched if you can?
    There's no general answer to that question.

    Consider a hypothetical example:
    Code:
    div {
      padding:1em;
    }
    
    #foo {
      padding-right:2em;
      padding-left:2em;
    }
    
    #bar {
      padding:0 2em;
    }
    A DIV with id="foo" would retain it's vertical padding, while one with id="bar" would not.

    Whether that's a good thing or not depends on your design.

    Quote Originally Posted by Paul O'B
    You should set all margins and padding to zero right at the start of the stylesheet
    There are some issues with this approach (performance; form controls in Opera).
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    There are some issues with this approach (performance; form controls in Opera).
    Care to elaborate on that?

  14. #14
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    There are some issues with this approach (performance...
    Yes, please explain what the performance hit of a global whitespace reset is (quantifiable).

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the universal selector means that a CSS rule will be applied to every node in the DOM tree. For a document with many nodes, that will incur a performance penalty. Whether or not it's measurable I don't know.

    I prefer to set margins and paddings explicitly for those element types where it matters in my design. But I'm not a graphic designer, and I usually don't strive for cross-browser pixel perfection.
    Birnam wood is come to Dunsinane

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    There are some issues with this approach (performance; form controls in Opera).
    Thanks for letting me know Tommy

    I'm not sure it will alter my stance on this as margins and padding are the biggest source of problems with new-users and unless you know what each margin is then you have to explicitly set all padding and margins as you go. I used to tell everybody to set them explicitly but they would still forget things like forms which have a great big margin in ie and nothing in other browsers.

    I can't say that I have noticed any problems in other browsers but I ony use opera for testing as i hate the way it re-draws the screen badly and wouldn't use it for surfing (i.e. it doesn't redraw some elements when the screen is resized and I am always re-sizing my screen because I'm doing ten things at once lol )

    However now that you've mentioned it I will look out for it and see if I notice any performance lag

  17. #17
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I doubt that you'll notice a performace lag unless you have many thousands of nodes in your DOM tree and an ultra fast connection (so that the download time is negligible).

    The set-padding-to-zero-for-all-elements approach will give you problems in Opera if you use SELECT elements; you'll have to set an explicit width to each one of those.

    Off Topic:

    I don't recognise your description of Opera's rendering problems, though. What version are you using?
    Birnam wood is come to Dunsinane

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by tommy
    What version are you using
    Hi Tommy its all versions up to and including 8.02

    Look at the footer when you resize the screen. Sometimes it stays at the top and sometimes it doesn't even move up and sometimes it doesn't go back.

    http://www.pmob.co.uk/temp/3colcentred_2a.htm

    It seems opera doesn't handle negative margins very well or absolute elements at the bottom of static (relative) containers. I know the specs say that UA's don't have to re-draw the documentt on re-flow (such as hover) but they should re-draw the document on re-size. Clicking refresh at any stage will put everything back in position as required.



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
  •