SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Few CSS Questions

    1. What is the difference between

    Code:
    html,body{padding: 0; margin: 0;} 
    
    body{
      height: 100%;
      font: 100%/85% Georgia, sans-serif;
      background-color: #fff;}
    and

    Code:
     body, html {
    
      height: 100%;
      margin: 0 auto;
      padding: 0;
      align: center;
      font-family: Georgia, sans-serif; 
      background-color: #fff;
    
     }
    Does dividing them into two rules one for html and the other for body made a difference?

    2. Why use em instead of px to define the width of the side menus?

    Code:
     
    #left{
      float: left;
      width:12em;
      background-color: #ddd;
    }
    
    #right{
      float: right;
      width: 13.5em;
    }
    3. What good is position: relative? I've never been able to understand why it has any value?

    4. Does relative positioning have any affect on absolute positioning? I guess i want to know how do you know what the containing block is defined as for absolute postioned divs. Usually i end up positioning from the edges of the screen not from the div it is within. (I do realize that AP takes it out of normal flow, but i thought it was supposed to position within containing block. That is the part i dont understand.)

    5. Why use clear both when nothing can fit in that space anyway and elements are block level?

    Code:
     
    #main,#footer {clear: both;}
    Thanks!
    Last edited by jacobpressures; Sep 14, 2006 at 15:25.

  2. #2
    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 jacobpressures
    1. What is the difference between

    Code:
    html,body{padding: 0; margin: 0;} 
    
    body{
      height: 100%;
      font: 100%/85% Georgia, sans-serif;
      background-color: #fff;}
    and

    Code:
     body, html {
    
      height: 100%;
      margin: 0 auto;
      padding: 0;
      align: center;
      font-family: Georgia, sans-serif; 
      background-color: #fff;
    
     }
    In the first example, the second rule assigns a number of properties to BODY only. In the second example, those properties are assigned to HTML as well.

    Quote Originally Posted by jacobpressures
    2. Why use em instead of px to define the width of the side menus?
    Because you never know how many pixels you need to fit some text. If you set the menu width to 200px and I need very large text because of poor eyesight, the text will spill out of the menu area. (In IE it will actually enlarge the menu area, which can wreak havoc on the layout.)

    Never use pixel dimensions for anything that will contain text. Using em is much better, since it's relative to the font size.

    Quote Originally Posted by jacobpressures
    3. What good is position: relative? I've never been able to understand why it has any value?
    It moves a box relative to the position it would have occupied if left alone. It's generally useful only for shifting something a few pixels. I've tried to explain the different positioning schemes in Relatively Absolute.

    Quote Originally Posted by jacobpressures
    4. Does relative positioning have any affect on absolute positioning? I guess i want to know how do you know what the containing block is defined as for absolute postioned divs.
    The containing block for an absolutely positioned element is the nearest positioned ancestor. (Or the initial containing block, if there is no such ancestor.)

    Setting position:relative makes a box positioned, which means it will be the containing block for its absolutely positioned descendants.

    Quote Originally Posted by jacobpressures
    5. Why use clear both when nothing can fit in that space anyway and elements are block level?
    Because you want the cleared element's box to start below the floats. Floated elements are taken out of the document flow, so they do not affect block boxes at all. (They only affect adjacent line boxes, which are shortened to accommodate the float.)

    If, for instance, you set a background colour on your footer, you want to make sure that it starts below the floated columns.

    Setting clear:both on an element will increase the top margin of that element, if necessary, so that it goes clear of all floated elements above it.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much! This has been extremely helpful.

    I just need a little more refinement on some of these issues.

    In the first example, the second rule assigns a number of properties to BODY only. In the second example, those properties are assigned to HTML as well.
    Is there any benefit in separating the two? Why can't they just be combined? I don't see the significance.

    Because you never know how many pixels you need to fit some text. If you set the menu width to 200px and I need very large text because of poor eyesight, the text will spill out of the menu area. (In IE it will actually enlarge the menu area, which can wreak havoc on the layout.)

    Never use pixel dimensions for anything that will contain text. Using em is much better, since it's relative to the font size.
    What about the wrapper? If the div containing text enlarges then they will spill out of the wrapper. I ask because my wrapper has a 2px gray border. Should i consider making the wrapper a certain number of em too or should leave it in px? Or would min-width be better?

    To convert from px to em, is there a way to guestimate? Maybe px per em or 3 or so.



    Your website? I learned a LOT from that article. Man, i hate my CSS books. I've read them over and over and none explained taht Static is not really a position and can thus not serve as the containing block. This is why i've been so confused. Since i never used relative (since i could achieve the same with margins on statics and float), i didn't see the need for relative and never used it. Thus i never saw the difference in relation to absolutely positioned elements! THANKS A MILLION! Now why can't books we purchase explain this crap? I don't remember my Eric Meyers book explaining this.

    My header and footer are not floats. They are simply static thus making them block elements. SO i don't see a need for the clear attribute. Is this thinking appropriate?

    Finally, there is a quote that i recently read when doing research on all of this from http://www.communitymx.com/content/a....cfm?cid=3B56F.
    I have given our div a height value. It is often a good idea to not declare a height for your div so it can expand and contract to suit the content it may hold. Content could fluctuate due to text resizing by the end user, or you may be using your div for dynamic data that varies from record to record. These are two examples of instances where a height declaration may be a problem.
    I've put this to the test and it is true. But i know at some point i've used divs in Netscape where the content spills outside. Maybe this is because i always used height before i started using min-height. So basically even if i have other divs within another div and they are not absolutely positioned, the height of the div should expand? I was under the impression that this will only happen with min-height.

    thanks these are some very ancient questions i've never gotten answered and i feel like i'm finally starting to understand.

  4. #4
    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 jacobpressures
    Is there any benefit in separating the two? Why can't they just be combined? I don't see the significance.
    It depends on which properties you set. Sometimes it doesn't matter, sometimes it does. There's no one-rule-fits-all, I'm afraid.

    Quote Originally Posted by jacobpressures
    Should i consider making the wrapper a certain number of em too or should leave it in px? Or would min-width be better?
    The wrapper should most likely be set in em (or %, with a min-width in em). Pixels are useful for things like border widths, and dimensions of things that are inherently pixel-based, like images. Nothing else.

    Quote Originally Posted by jacobpressures
    To convert from px to em, is there a way to guestimate?
    No, it depends on the browser settings. Most modern browsers have a default font size of 16px (which means 1em=16px), but it can be changed. Furthermore, the user can have changed the text size (e.g., by using Ctrl+scroll wheel). There is no one-to-one relationship between pixels and ems.


    Quote Originally Posted by jacobpressures
    Now why can't books we purchase explain this crap?
    Probably because people who write books are very clever, experienced and knowledgeable, and have forgotten what it was like to be a beginner.
    (I'm glad my article was helpful; that's why I (used to) write them.)

    Quote Originally Posted by jacobpressures
    My header and footer are not floats. They are simply static thus making them block elements. SO i don't see a need for the clear attribute. Is this thinking appropriate?
    If you don't have floats, you don't need a clear property. But if things inside your wrapper are floated, you'll need the clear property on your footer.

    Quote Originally Posted by jacobpressures
    I've put this to the test and it is true. But i know at some point i've used divs in Netscape where the content spills outside.
    All browsers have bugs. Old browsers have more bugs than modern ones. IE/Win, for instance, incorrectly treats height as if it were min-height. That's supposed to be fixed in IE7, though.
    Birnam wood is come to Dunsinane


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
  •