tables and border

border and border-width

[soapystar]

why does this work
table {
border: 1px solid;
border-collapse: collapse;
border-color :#0000FE;

}

but not this
table {
border-width: 1px solid;
border-collapse: collapse;
border-color :#0000FE;

}

i thought border could be specified either way. Im trying to have a top border 0px and the other sides 1px, but it wont let me!

also when i specify tables via css i get gaps between the tables, when i remove it from the css the tabls adjoin each other.?

[ShawnR]

border: is shorthand for border-width, border-style, border-color

i.e.

border: 1px solid;

is equiv to

border-width: 1px;
border-style: solid;

If you want different borders for top vs bottom vs sides, you could use:

border-width: 0px 1px 1px 1px;

(If four values are given, they apply to top, right, bottom, and left border width, respectively)

Or you can use border-top-width, border-right-width, border-bottom-width, and border-left-width.

Similarly border-style can take between 1 and 4 values. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side. So you can specify a style of solid for the sides and a style of none for the top...

Shawn

[grandpa]

Hi all. This looked a good place to post my first "real" CSS question. I'm pretty new to CSS, so far I've done the retail half of my site with inline CSS. I want to apply external CSS to the wholesale side. My stuff is pretty simple, or so I thought. Here's my external definitions:

<style type="text/css">
table1{ width: 90%; height: 1228; border-color: #000000; border: medium }
table2{ width: 100%; border-color: #000000; bordercolorlight: #008000; height: 1 }
table3{ width: 100%; border-color: #000000; }
table4{ width: 100%; border-color: #000000; border-collapse: collapse }
table5{ width: 100% }
image1{ width: 538; height: 120; border: 0 }
GoCart( width: 60; height: 40; border:0 }
CheckOut( width: 58; height: 20; border:0 }
hr1( color: #000000 }
</style>

In my html is use the style of:

<table id="table1" cellpadding="0" cellspacing="0">

But nothing seems to work. My table1 is not 90%, and has no border. Simarlarly, the hr1 is not colored black.

Only images seem to responding to the external definitions. The stylesheet is linked in my html with this line in the head:
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/wholesale/wholesale-style.css" MEDIA="screen, print">

Thanks

[soapystar]

shoudnt that be class="table1" not id=table1?

[grandpa]

shoudnt that be class="table1" not id=table1

You're asking me? :)

class=table1 works when I define:

.table1 { width: 90%; height: 1228; border-color: #000000; border: solid thick black }

Still it won't work at all from my external file, the page just stares back at me with a screen wide table, not my pretty 90% table. Let me go triple that link definition and url.

I've been looking around this site and the web tonight, and it looks like I'm defeating the purpose of CSS if I'm using it to define table layouts but still keeping my tables in the code. I'm really trying to avoid a site re-write at this point, more like I just want to nudge things in that direction. Oh well, everyone's got to start somewhere. I did figure out my table border problem, that's something.

All in all, if I was paying me for my production today, I'd want my money back.

[Paul in South Africa]

Take the <style type="text/css"> and </style> out of your external style sheet. I don't know the reason why but when this is in IE seems to ignore the styles although Opera doesn't.

[grandpa]

Thank You Paul!

That did the trick. Tonight I started reading this forum from day one posts, and already I can see I'm in over my head. BTW, happy belated 3rd anniversary Nick.

According to an old post attributed to papabear, I'm "teetering" between CSS and HTML which may not be a good thing, and I can even understand why. So tomorrow I'll work on the remaining style elements of that one page. With any luck at all it will be the model for all my pages... then I can learn how to start tossing out my tables altogether.

[ShawnR]

If you use the style once in your html page, use id="table1", but then it must be defined as:

#table1 {...}

If you use it multiple times in your html page, use the class="table1", and then you use

.table1 {...}

Also note that you used the wrong sort of brackets after GoCart, CheckOut and hr1.