By djudd on

I'm creating a coupon page, and I'd like to put a dashed 5px border around each row, with a 30px space between each row. This is all being done in a Views table.

http://www.talksv.com/coupons

My css is:

#view-display-Coupon_Page-page-1 tr.even, tr.odd {
	border-width: 5px;
	border-style: dashed dashed dashed dashed;
	margin-bottom: 30px;
}
}

But I'm only getting the border around every other row, and I'm not sure why. Can anyone tell me where I'm messing this up? I'd appreciate it.

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

This

#view-display-Coupon_Page-page-1 tr.even, tr.odd {

should be

#view-display-Coupon_Page-page-1 tr.even,
#view-display-Coupon_Page-page-1 tr.odd {

(it does not need to be on two lines, just makes the change clearer.

Also you have and extra '}'

djudd’s picture

djudd commented

I appreciate the tip. Unfortunately the css I have now produces no border at all:

#view-display-Coupon_Page-page-1 tr.even, #view-display-Coupon_Page-page-1 tr.odd {	
	border-width: 5px;
	border-style: dashed;
	margin-bottom: 30px;
	!important;
}

I have discovered that if I make the call

#view-display-Coupon_Page-page-1 tr.even, tr.odd {

like I had to begin with, it changes the border of every table on every page, which is really odd.

I'm completely stumped here.

nevets’s picture

nevets commented

I would validate the html and css.

The !important; may be causing a problem.

There is some oddity here as using firebug only the bottom border will show.

djudd’s picture

djudd commented

Removing the !important seems to change nothing. The HTML and CSS both seem to validate okay.

I'm just not sure why it would be changing every view on every page when I'm containing it to the view-Coupon_page. This one has me baffled.

samwich’s picture

samwich commented

I didn't see any reference to anything with the id view-display-Coupon_Page-page-1

There were classes like view-id-Coupon_Page, so your CSS selector would be 

.view-id-Coupon_Page tr.even,
.view-id-Coupon_Page tr.odd{
border-width: 5px;
border-style: dashed dashed dashed dashed;
margin-bottom: 30px;
}

I think the reason it was only half working, was it was applying your styles to any tr that had the odd class.

sunfish62’s picture

sunfish62 commented

A check of your site now suggests that you've pretty much addressed your problem--in Firefox. You really should check how it looks in IE7, though. The borders aren't there.

Hueij’s picture

Hueij commented

Maybe there should also be a border-color declaration? Like

.view-id-Coupon_Page tr.even,
.view-id-Coupon_Page tr.odd {
   border: 5px dashed #000;
   margin-bottom: 30px;
}

Maybe even change it to

.view-id-Coupon_Page tr {
   border: 5px dashed #000;
   margin-bottom: 30px;
}

www.opstijgendenevel.nl