Simple column black border prroves elusive :-(

HTML & CSS
1

Hi… On this page:
http://www.pauserefreshment.co.uk/3_column_tutorial.html
I just wanted to add a black border to the central column as the screen shot illustrates so I added this:

#columnmain3 {
width:267px;
float:left;
background:yellow;
border:#000000 thick;
}

But no go :frowning:

So if anyone out in sitepoint land could show me the way…

2

This has always struck me as a flaw in CSS - why can’t a border be assumed to be solid unless otherwise stated, given that that is what people usually want, and expect.

3

I know what you mean (and I half agree) but we don’t really want browsers to second guess what we meant do we :).

Most people forget that border is “shorthand” for all the properties and the default for “border-style” is none (border-style is also a shorthand of course). It’s the same for most shorthand properties and omitted values will quite often default to none (like background-image).

I suppose it could default to solid but that may be just as confusing because borders can also be dotted , dashed or one of the other styles so with omitted values the logical answer would be don’t style them unless specifically told to do so.

After all we’ve finally stopped browers make best guesses for use when we use strict doctypes (e.g. if you omit the units from dimensions you get zero). We don’t really want browsers second guessing us again as we went through all that last century and it was a nightmare. Just let them do what we explicitly tell them :slight_smile:

4

Hallelujah!!! That worked thank you :slight_smile:

5

tried border: 2px solid #000000; ?

6

Note also that the keyword “thick” will give different results in different browsers so use pixels instead :slight_smile: (“none” should be “solid” in case you were wondering ;))

7

border:thick none #000000;

:shifty:

8

Thanks Bill for spotting a code error which Ive now fixed but still a simple black border around the central yellow column prooves elusive :frowning:

9

This may have nothing to do with your problem, but you have code like this:
<p>TEST column right.
</div>
</div>
</div>
</div>
</p>

Try moving that closing </p> to the correct location and see if things start working.