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.

border:1px solid #fff;” because it is less characters and because the first version doesn’t work lol :slight_smile:

When you say:


border:1px;

You are effectively saying “border:1px none;”

That means no border will show.

“border” is shorthand for : border-width, [URL=“http://reference.sitepoint.com/css/border-style”]border-style, and [URL=“http://reference.sitepoint.com/css/border-color”]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.

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.

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 :slight_smile:

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;
}

:wink:

I think I may just keep to :

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

Dez,

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;
}

:wink:

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,

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.

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 }

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!)

you know IE6 will OBEY with dashed : )

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 :slight_smile: