Aqua-Soft Forums

[help] Intermediate CSS Assistance (Stevie?)

Hey guys, I'll be posting a few questions in this forum when I get a chance. Here's my problem

I'm trying to use a few more-advanced CSS properties to style some of the code on my site. Some of them are not working.

Here is the first problem. Code, and example

<h2>Online Webmaster Utility</h2>

	<p>

		Text is here

			<ul>

				<li>secure directories</li>

				<li>configure web page counters</li>

				<li>view web traffic statistics</li>

			</ul>



(there are, of course, closing tags and whatnot)

and css

h2 p ul {

	margin: 14px 0 14px 30px;

}

the unordered list is not styling. its under h2 and under p, and I expected it to style

I've added a separate class to that css and applied it directly to the unordered list in that code and it works fine, yet when I try to do the css that way it doesn't work. I have also tried making a class (eg: set class to .ul and then made the css h2 .ul ul and .ul ul...still didn't work)

what am I doing wrong?

more to come after lunch

#284288

Wouldnt you do h2 ul.ul? (refering to your example in which you have set the class to .ul)

My guess is that the specificity on the h2 p ul sequence is being hindered by another similar one. why dont you try something like:

p ul.para_ul { }

#284298

I'll try that seph, thanks. (ps: I like your site too!)

to explain the h2 .ul ul thing...the .ul class was being applied to the paragraph, which was 2nd in line. I also tried h2 p.ul ul though I wasn't sure if that was necessary. neither worked :-/

#284302

"h2 p ul" refers to any "ul" element in a structure like this :


 
 [list]

[*]

[*]

[*]

[/list]

 
But your code is :
 

 
 [list]

[*]

[*]

[*]

[/list]
 
To apply your style to YOUR code, you have to use instead just "p ul". With CSS3, you could use some selectors to descripe "after-a-h2 p ul", but IE doesn't support it...


#284307


Hey Kemen, thanks for the clarafication! problem is...it still doesn't work. have a look here to see what I mean




first ul is not indented as it should, 2nd one is b/c I'm applying the class directly to the element (which I don't want to do). what gives?




its small things like this that really frustrate me about CSS sometimes ;)




I'm curious about CSS3 as well...of course IE doesn't support it :P I'll have to look for browser support thus far but I'm sure it would be spotty, at best


#284308


i thought it was invalid to use block tags [inc. list] in paragraphs...


#284332


I thought paragraphs were blocks too...thats another problem I'm having...I have ul's in paragraphs and its giving me an error. is it because they are both blocks? and if so, how do I get around that? maybe I could use the !important attribute on the highest block (the paragraph)...would that solve the problem?


#284337


i thought it was invalid to use block tags [inc. list] in paragraphs...
It is probably, and even semantically it is not very good to have a list in a element that is supposed to containt text.




@ MDZ61384 : I've corrected a bit your code, and put the new page here. The 


  •  indentation is fixed : I don't know what was wrong in the CSS, but I've first corrected the XHTML to have a correct structure (your code is now valid XHTML 1.0 :P), and then CSS worked almost without modifications. I suppose it was a problem of wrong imbrication of items in the code... Strange lol


#284346