Overriding CSS property

I am having difficulty understanding the order of precedence of CSS properties. I have the following styles:

.table1header { width:1000px;}
.table1header div {  border:1px solid #b5c8d9; background:#b5c8d9; float:left; border-top:none; text-align:center; font:bold 14px/25px tahoma; overflow: hidden; text-overflow: ellipsis;  height:25px; }

.table1 { width:1000px; }
.table1 div { border:1px solid #b5c8d9; float:left; border-top:none; text-align:center; font:normal 12px/25px tahoma; overflow: hidden; text-overflow: ellipsis; }

.table1c1 { width:350px; }
.table1c2 { width:646px;  border-left:none;}

Code (markup):

and I am using them for table headers and columns like this:

<div class="table1header">
   <div class="table1c1">MyTable</div>
   <div class="table1c2"> </div>
</div>

<div class="table1">
   <div class="table1c1">Date</div>
   <div class="table1c2">10/18/2008 12:00:00 AM</div>
</div>

<div class="table1">
   <div class="table1c1">Computer Name</div>
   <div class="table1c2">Date</div>
</div>

<div style="page-break-after:always;"></div>

HTML:

In this table I get a double thickness line between columns, and I am trying to remove it by adding 'border-left:none' to .table1c2, so its left border will disappear.

I understood that this would override the previous border definition. Can anybody suggest why it does not?

Thanks

 

You are right when you state that the last definition overrides any previous defintions for the element in question.

Your problem is that you have not previously added a border to table1c2, so your saying border-left: none; when there isn't a border left that has been added to it in the first place.

I also think you're using more DIV's than you need, although i'm not sure if you could explain what you want or provide an image i could draw up some code for you.

 

I am not sure I understand, the cell does have a border. The way I understood it the cell 'table1c2' should inherit the border from this line:

.table1 div { border:1px solid #b5c8d9; float:left; border-top:none; text-align:center; font:normal 12px/25px tahoma; overflow: hidden; text-overflow: ellipsis; }

because it is a div within table1 class. It does already have a border, see next.

I have attached a screen capture of what the code does now, which is pretty much correct except where the cells meet there are 2 borders making the line too thick.

Thoughts?

 

Well just change:

.table1 div { border:1px solid #b5c8d9; float:left; border-top:none; text-align:center; font:normal 12px/25px tahoma; overflow: hidden; text-overflow: ellipsis; }

to:

.table1c1, .table1c2 { border:1px solid #b5c8d9; float:left; border-top:none; text-align:center; font:normal 12px/25px tahoma; overflow: hidden; text-overflow: ellipsis; }

I think it's because it is not recognizing .table1c1 as a .table1 div, so as I said before you are removing the border when it hasn't been explicitly set on the .table1c1 class. but instead it has been set on .table1 div.

Anyway i'm not sure exactly how your table is likley to expand, but if it is going to contain tabular data then you can always use the table element.

Personally I would do something like this to achieve the same sort of effect:

CSS:

HTML:

 

Thank you sir, that works like a dream. I appreciate the effort.

Still it mystifies me why the original code does not work. You said "I think it's because it is not recognizing .table1c1 as a .table1 div" , but the .table1c1 is exhibiting all the properties of a '.table1 div' as I would expect it to - it has a border, minus the top, the text is aligning, it is floating left, etc. Therefore I would expect the .table1c1 class to override the border left property, yet it does not.

I am trying to iron out the gaps in my understanding of CSS but this might remain a mystery for the moment. Thanks

 

You know, looking at this I have to ask - it's a table, why aren't you using a TABLE? You're treading into the area of the 'no tables at any cost' folly.

That said, for what you are trying to do appearance-wise, if I was not to use a table I'd probably as wd_2k6 suggested use less div and actually use headings and since this LOOKS like a list of attributes and values, we could treat those as terms and definitions making this one of the few times I would say use a DL.

Something like:

<div class="myTable">
	<h2>My Table</h2>
	<dl>
		<dt>Date</dt>
		<dd>10/18/2008</dd>
		<dt>Computer Name</dt>
		<dd>Date</dd>
	</dl>
</div>

Code (markup):

With the following CSS:

.myTable {
	width:1000px;
}

.myTable h2 {
	background:#B5C8D9;
}

.myTable dt {
	clear:left;
	width:350px;
	float:left;
	border:solid #B5C8D9;
	border-width:0 1px 1px;
}

.myTable dd {
	width:647px;
	float:left;
	border:solid #B5C8D9;
	border-width:0 1px 1px 0;
}

Code (markup):

Untested, but should do the trick.

 

Very good advice, thanks for taking the time for this response.