SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question What is the best way ?

    border:1px;
    border-color:#fff;

    or :

    border:1px solid #fff;

    It seems as though both ways are totally compatible with all browsers, but is one way more 'future-proof' than the other, for example ?

    I have googled it, and searched here, but can't seem to find a definitive answer.

    Any help appreciated.

    Dez.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    "border:1px solid #fff;" because it is less characters and because the first version doesn't work lol

    When you say:
    Code:
    border:1px;
    You are effectively saying "border:1px none;"

    That means no border will show.

    "border" is shorthand for : border-width, border-style, and border-color. If you omit the shorthand values then they revert to their default which for border-style is none and hence you get no border.

  3. #3
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks Paul, it's appreciated - border:1px solid #fff; is what I'll be using now.

    Also, while I'm trying to tidy up the css a little, in some style sheets I've seen, it displays styles in different ways for table parts - ie, in some it may say :

    table.tablename {
    margin:8px 0 12px 0;
    padding:8px 0 12px 0;
    }

    Others, it might be :

    tablename {
    margin:8px 0 12px 0;
    padding:8px 0 12px 0;
    }


    It seems as though both ways are totally compatible with all browsers, but is one way more 'future-proof' than the other, for example ?

    How do the others here do it ?

    Any help appreciated.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well in your second example there isn't an element called <tablename> but I think I know what you mean . It all depends on your pages. Will you ever have an element that's not a table with that .tablename calss?

    Generally you don't want to do this
    table.classhere
    div.classhere

    It can get very confusing to style each element with the same class, aka the first examlpe will taarget a <table> with the "classhere" class. The second with a <div> matching that class. It gets very hectic and confusing to manage .

    Generally I just do .classhere (more appropriate names though ).

    Later, after you go back to edit changes a few months later, it can be useful if you have put the div.classhere to remember which element, but it's not really needed
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks Ryan - it's appreciated - and yes, it was supposed to be :

    table.tablename {
    margin:8px 0 12px 0;
    padding:8px 0 12px 0;
    }

    Others, it might be :

    .tablename {
    margin:8px 0 12px 0;
    padding:8px 0 12px 0;
    }

    ;-)


    I think I may just keep to :

    .tablename {
    margin:8px 0 12px 0;
    padding:8px 0 12px 0;
    }


    Dez,

  6. #6
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks Ryan - it's appreciated - and yes, it was supposed to be :

    table.tablename {
    margin:8px 0 12px 0;
    padding:8px 0 12px 0;
    }

    and :

    .tablename {
    margin:8px 0 12px 0;
    padding:8px 0 12px 0;
    }

    ;-)


    I think I may just keep to :

    .tablename {
    margin:8px 0 12px 0;
    padding:8px 0 12px 0;
    }


    I've also seen :

    td.classname {
    border:1px solid #ffffff;
    }


    is that not the best way to do it, rather than :

    .classname {
    border:1px solid #ffffff;
    }

    ? ?


    Dez,

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Dez View Post
    I've also seen :

    td.classname {
    border:1px solid #ffffff;
    }


    is that not the best way to do it, rather than :

    .classname {
    border:1px solid #ffffff;
    }
    It's the same issue. The td in td.classname is not needed. .classname will apply to any element it's attached to anyway. You might as well choose one pattern and use it for all elements, e.g.

    table.tablename / td.classname

    or

    .tablename / .classname

    ... but the latter is more efficient.

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    lol, Paul.

    DEZ
    I think you meant "border-width:"
    There is little difference between the two examples. One is a shorthand, so if you need to declare a bunch of things at once I highly recommend using the shorthand. it really has nothing to do with "future proofing" anything.
    sometimes it comes in handy NOT to use the shorthand. for example

    li a{ display:block; text-decoration:none; color:#333; border-bottom:2px solid transparent; }
    li a:hover{ border-color: #e4e4e4 }

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    lol, Paul.

    DEZ

    sometimes it comes in handy NOT to use the shorthand. for example

    li a{ display:block; text-decoration:none; color:#333; border-bottom:2px solid transparent; }
    li a:hover{ border-color: #e4e4e4 }

    lol - I know what you meant and the example is good but actually both those are shorthand properties also . Of course you are right and sometimes it's useful to be more specific.

    (As an aside (and not to be pedantic) note that IE6 doesn't do transparent borders and will use the elements color if no border-color is defined. IE6 always spoils the party!)

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    you know IE6 will OBEY with dashed : )

  11. #11
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks all - it's appreciated. It does get a little confusing sometimes, but it makes more and more sense as time goes on and with the help from you lot


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
  •