HTML and CSS RSS HTML and CSS RSS

CSS Help

Reply

•
•
Join Date: Aug 2005
Posts: 75
Reputation: Sailor_Jerry is an unknown quantity at this point 
Solved Threads: 2
Sailor_Jerry's Avatar
Sailor_Jerry Sailor_Jerry is offline Offline
Junior Poster in Training

CSS Help

 
0
  #1
Aug 1st, 2006
I have two css classes. ".test1 and .test2"
Can anyone explain what this code is doing?

HTML and CSS Syntax (Toggle Plain Text) 
  1. .test1{height: 100%; clear: both; border: 1px solid #999;}
  2. .test1,  .test1 .test2{height: 100% !important; height: 30em; min-height: 30em; }
I'm thinking that all the styles in .test1 are applied to the element with this classname.
For the second style ".test1, .test1 .test2"
I think this will only be applied when an element with the classname .test2 is inside and element with a classname of .test1. When this happens then the height style from .test1 will be overridden with the style from .test2.

Is this the correct behavior?

Thanks, sj
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2004
Posts: 1,478
Reputation: mikeandike22 is an unknown quantity at this point 
Solved Threads: 18
mikeandike22's Avatar
mikeandike22 mikeandike22 is offline Offline
Nearly a Posting Virtuoso

Re: CSS Help

 
0
  #2
Aug 1st, 2006
Ive never seen it with classes like that usually what people would do is use ids for that so like
HTML and CSS Syntax (Toggle Plain Text) 
  1. #test {
  2. /*global stlyes for the elements*/
  3. }
  4.  
  5. #test .test1 {
  6. /*styles for anything in the test id with a class name of test1*/
  7. }
  8.  
  9. #test .test1 .test2 {
  10. /*styles for anything inside the test id and class test1 with a class of test2 */
  11. }

now ive never seen anyone do this with all classes ive only seen it used with p, a, ul, li, and other html elements. It is an easy way to transfer styles inside of a single id w/o having to write sperate classes or ids for each one.
My Daniweb Blog: This,That, and Everything Else (Blog contest winner)

GetFirefox!
GetOpera!
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: CSS Help

 
0
  #3
Aug 1st, 2006
What you have are two rules. The first rule applies to every element with the class of test1. The second rule applies to every element with the class of test1, as well. In addition, the second rule applies to any element of class test2 which is a descendant (child, child of a child, etc.) element of an element of class test1.

So, you have style declarations for class test1 split among two rules. You also have two height declarations in the second rule... which is strange. It also isn't clear which height declaration will "win", because one of them is flagged as "!important".

All-in-all, a very strange pair of rules.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2005
Posts: 75
Reputation: Sailor_Jerry is an unknown quantity at this point 
Solved Threads: 2
Sailor_Jerry's Avatar
Sailor_Jerry Sailor_Jerry is offline Offline
Junior Poster in Training

Re: CSS Help

 
0
  #4
Aug 1st, 2006
Thanks for the info!!

Since !important is ignored by IE, the height declarations in the second style is just a hack to get firefox to behave.
Essentially firefox will ignore the second height, and IE will igonore the first height.
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: CSS Help

 
1
  #5
Aug 1st, 2006
Ok... so I guess the essential nugget of information you were after is the "descendant selector" syntax. Note that it selects all descendants, not just child elements, but also their child elements, and so on. You should also understand exactly what a "child" element is, vs. for example an "adjacent sibling" element.

If you only want to select direct child elements, you'd use:

.test1, .test1 > .test2 {}

Here is the reference on Child Selectors.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2004
Posts: 1,478
Reputation: mikeandike22 is an unknown quantity at this point 
Solved Threads: 18
mikeandike22's Avatar
mikeandike22 mikeandike22 is offline Offline
Nearly a Posting Virtuoso

Re: CSS Help

 
1
  #6
Aug 5th, 2006
I find using IE conditional comments better in the long run for css code to work in all browsers rather than css hacks. So I would look into that.
My Daniweb Blog: This,That, and Everything Else (Blog contest winner)

GetFirefox!
GetOpera!
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2005
Posts: 75
Reputation: Sailor_Jerry is an unknown quantity at this point 
Solved Threads: 2
Sailor_Jerry's Avatar
Sailor_Jerry Sailor_Jerry is offline Offline
Junior Poster in Training

Re: CSS Help

 
0
  #7
Aug 24th, 2006
I want to match my own class selector and then modify the body.

HTML and CSS Syntax (Toggle Plain Text) 
  1. //This does not work but to give you idea of what i am trying to do. 
  2. .selector body {overflow:-moz-scrollbars-none;}

Do I have to use javascript to update the body style? I only want this style to be honored if a certain class is present in the body.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: CSS Help

 
0
  #8
Aug 24th, 2006
•
•
•
•
Originally Posted by Sailor_Jerry View Post
I want to match my own class selector and then modify the body.

HTML and CSS Syntax (Toggle Plain Text) 
  1. //This does not work but to give you idea of what i am trying to do. 
  2. .selector body {overflow:-moz-scrollbars-none;}

Do I have to use javascript to update the body style? I only want this style to be honored if a certain class is present in the body.

Wouldn'y you just use
HTML and CSS Syntax (Toggle Plain Text) 
  1. .selector {overflow:-moz-scrollbars-none;}

or

HTML and CSS Syntax (Toggle Plain Text) 
  1. body.selector {overflow:-moz-scrollbars-none;}

and then

[html] <body class="selector">[/html]

or am I misunderstanding the question?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2005
Posts: 75
Reputation: Sailor_Jerry is an unknown quantity at this point 
Solved Threads: 2
Sailor_Jerry's Avatar
Sailor_Jerry Sailor_Jerry is offline Offline
Junior Poster in Training

Re: CSS Help

 
0
  #9
Aug 24th, 2006
•
•
•
•
Originally Posted by Deacon J View Post
Wouldn'y you just use
HTML and CSS Syntax (Toggle Plain Text) 
  1. .selector {overflow:-moz-scrollbars-none;}

or

HTML and CSS Syntax (Toggle Plain Text) 
  1. body.selector {overflow:-moz-scrollbars-none;}

and then

[html] <body class="selector">[/html]

or am I misunderstanding the question?
Basically I wanted to do the reverse of body.selector{overflow:-moz-scrollbars-none;}.

So If .selector is on the page, apply this style to the body.

I don’t think you can do it, since you would be traveling up the DOM. I think it only cascades down.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: CSS Help

 
0
  #10
Aug 25th, 2006
You'd have to use javascript to do that.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC