logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-06-2014, 09:56 AM   #1
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Default CSS Table Rule Conflict

Hi,

I have a form which uses a table format for a date selector feature/option.

All the tables in my website use the same styles, however i cannot for the life of me change the on in the form even if i use an id as the original rules still overwrite my newer ones.

Here is an example of the page with both a table and form with a date option, http://www.transformyourshape.co.uk/...l-Training.php, if anyone could tell me how to re-write my css to make the date field look right i would appreciate it. I do not mind the days listed in the same style, however the padding is to large and is going over the dates.

This is the new code that i am trying to use to make this field id specific...

Code:
#Pt-Date-selector {
font-family: arial; sans-serif; color: #414F86;}
table,td {border: 1px solid #ccc; border-collapse: collapse; }
td {padding: 5px 10px;}
tr:first-child {color:#fff; background: #6fc33f; font-weight: bold; font-size:85%}
Sorry for the poor explanation, but it is difficult to explain.

Thanks

Last edited by Crumpy1; 02-06-2014 at 10:07 AM..
Crumpy1 is offline   Reply With Quote
Old 02-07-2014, 01:23 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,211
Default

try adding !important and it may overwrite if correctly identified
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is online now   Reply With Quote
Old 02-07-2014, 01:35 PM   #3
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Default

Quote:
Originally Posted by edbr View Post
try adding !important and it may overwrite if correctly identified
I have tried this, but it changes all tables on the site for some reason even though i have used an ID specific rule for this table.
Crumpy1 is offline   Reply With Quote
Old 02-07-2014, 01:36 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

It's not a padding issue. What happens is this. You have in your CSS the following rule:
Code:
tr:first-child {
    color: #fff;
    background: #6fc33f;
    font-weight: bold;
    font-size: 85%;
}
That date picker is build up semantically the right way with a table heading <thead> including a table row <tr> for the days.
Then comes the <tbody> with some table rows for the dates (the numbers).

Your CSS rule applies these styles to the first (also only) <tr> of the <thead> and the first <tr> of <tbody> and therefore you have there two table rows with the green background color.

Add the following after those styles in your CSS which should be enough to override the styles for the datepicker
Code:
.ui-datepicker tbody tr:first-child {
    background: none;
    font-weight: normal
}
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 02-07-2014, 01:42 PM   #5
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Default

Quote:
Originally Posted by gentleone View Post
Add the following after those styles in your CSS which should be enough to override the styles for the datepicker
Code:
.ui-datepicker tbody tr:first-child {
    background: none;
    font-weight: normal
}
Code worked perfectly, thank you very much!
Crumpy1 is offline   Reply With Quote
Old 02-07-2014, 01:53 PM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by Crumpy1 View Post
Code worked perfectly, thank you very much!
Good stuff!

Tip! Learn to use the browser developer tools (inspect element) to investigate what's going on. Especially with HTML that gets injected dynamically with JavaScript into the DOM (in your case the date-picker with jQuery). It's impossible to check/debug without these tools.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 02-07-2014, 02:09 PM   #7
Crumpy1
Crumpy1's Avatar
 
Join Date: Aug 2011
Location: England
Posts: 249
Default

Quote:
Originally Posted by gentleone View Post
Tip! Learn to use the browser developer tools (inspect element) to investigate what's going on. Especially with HTML that gets injected dynamically with JavaScript into the DOM (in your case the date-picker with jQuery). It's impossible to check/debug without these tools.
I am currently learning to use the firefox debug tool properly, and it has helped in the past. But for the life of me i could not find how to fix this specific issue

Thank you for taking to time to help
Crumpy1 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:21 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com