The Coder — Fri, 16 Mar 2007 18:45:02 +0000

Thanks

demonhale — Fri, 16 Mar 2007 01:13:36 +0000

And don't forget w3c.org for some of the basics... And A List A part for some additional specialized css needs... Also check out TWF's own A Padded Cell for more info in the future...

Megan — Thu, 15 Mar 2007 20:14:38 +0000

This article might help with CSS inheritance:

http://www.webdesignfromscratch.com/css-inheritance-cascade.cfm

Roger Johansson (an HTML/CSS/accessibility expert) just recommended HTML Mastry as a good site on HTML. HTML Dog is also a good site.

Honestly, I think there is a shortage of solid resources for webmasters at this level. That's why we built A Padded Cell. Keep reading the forums too, and make sure you always validate your code. Validation errors can teach you a lot.

The Coder — Thu, 15 Mar 2007 19:51:44 +0000

Ma'am I need to polish my HTML, CSS, PHP, MySQL and C++.
Can you please tell me books that I can buy to read. Or a cheaper way for example some good websites!!!

Megan — Thu, 15 Mar 2007 19:41:08 +0000

I'm glad you appreciate the help!

The Coder — Thu, 15 Mar 2007 19:36:57 +0000

Man You Are Awesome!!! I have become a big fan of you!!! Thanks a lot for helping. God Bless You!!!

Megan — Thu, 15 Mar 2007 19:31:18 +0000

ID's are for unique items. That is, things that only appear once on a page. You have done this correctly above. Classes are for things that appear multiple times on a page. So all you need to do is to ask yourself if this item will ever appear on the page more than once. If yes, use a class. If no, use an ID.

In the example you posted above, you're not quite right in assuming that the font-family will carry down. Those properties will only apply to paragraphs marked with those class names. So if the paragraph with class="xyz" does not also have class="main" then it will not have the font-family applied. You could have something like this though:

.main p {font-family: verdana}
p.xyz {font-size: 14px:}

This paragraph will be 14px, Verdana:

This is the paragraph

This paragraph will be 14px, but not verdana:

This is the paragraph

The CSS will work exactly the same way whether you use id or class. The CSS is always carried down the chain of elements in the document structure, unless it is reset by other CSS. It sounds like you could use some resources on how inheritance works. I'll see what I can find.

The Coder — Thu, 15 Mar 2007 19:24:04 +0000

thanks for the relpy.. sure you can use it!!! I am pleased with your honesty!!! but please do remove the images or change them. I don't need any credit.. its all for you... just do me a favour.. i have some problems in css please tell me the answers..

the first one is that can you please tell me the key and detailed difference between ID and Class... where class should be used and where id should be used!!! and which one of them carries values from previous attributes(for example if i use

p.main {font-size: 12px; font-family: verdana;}

when i later in code use

p.xyz {font-size: 14px}

now i did not write font-family, so the value of the font-family will be picked from p.main. is this example correct. if yes, then for which one, for id or class)

Megan — Thu, 15 Mar 2007 17:59:08 +0000

This just gave me an idea for an article on A Padded Cell - can I use your code as an example to illustrate what could happen if you don't have a doctype??

Let me know if that's okay with you - I have a copy saved from when I was trying to solve the problem. I could replace those images ir block out the site name if you want. I'll make sure you get credit in the article.

Megan — Thu, 15 Mar 2007 16:40:54 +0000

Interesting solution on this one. Want to know what it is? No doctype. That's all. So IE was rendering the page in quirks mode. Put in a doctype and (almost) all is well.

The remaining problem is that the content area is still too far down. The problem there is your margin-top on your contents div. IE doesn't need that. What you need there instead is a clear: both for Opera and Firefox (you were using the margin to move the content box down when the real problem was that the floats on the header div's weren't clearing).