Set - 5

Question 6 :

To what are partial URLs relative? 

Answer :

Partial URLs are relative to the source of the style sheet. The style sheet source can either be linked or embedded. To which source partial URLs are relative to depends on their occurrence. 
If a partial URL occurs in a linked style sheet then it is relative to the linked style sheet. The URL of the linked style sheet is the URL of the directory where the sheet is kept. 
If a partial URL occurs in an embedded style sheet then it is relative to the embedded style sheet. The URL of the embedded style sheet is the URL of the HTML document in which the sheet is embedded. 
Note that Navigator 4.x treats partial URLs as being relative to the HTML document, regardless of the place where the partial URL occurs. This is a serious bug which forces most authors to use absolute URLs in their CSS.


Question 7 :

What's the difference between 'class' and 'id'?

Answer :

As a person, you may have an ID card - a passport, a driving license or whatever - which identifies you as a unique individual. It's the same with CSS. If you want to apply style to one element use 'id' (e.g. <div id="myid">). In the stylesheet, you identify an 'id' with a '#' ie. '#myid'... 
As a person, if you are in a class, you are one of many. It's the same with CSS. If you want to apply the same style to more than one element, use 'class' (e.g. <div class="myclass">). In the stylesheet, you identify a 'class' with a '.' ie. '.myclass'... 
If id's are more restrictive than classes, then why not just litter your page with classes? Well, I think the main thing is that it's simply wrong. You don't put headings in 'p' tags - you use 'h1', 'h2', etc. You don't (or shouldn't) make a list by writing asterisks or the little divider bar ( | ) - you use list tags ('ol'/'ul' + 'li') . You don't say that your footer is part of a class of elements called 'footer' - that's just stupid - you can't have more than one footer - it can't be a class. Of course, practically, the effect is about the same - the rules are applied - but that's not the point - it's semantically wrong to do it that way... However, if you try to give more than one element the same id, you will have problems - so don't do it. 
An element may have an id and a class, but that's usually not necessary. You can also give an element two classes if you need to - like this : class="class1 class2". It can be very useful. Needless to say, you can't give an element two id's. 
Another difference is to do with power. You can give an element an id and a class, but if any of the properties of the two conflict, the id style will win. Ids are more powerful than classes. 
One more useful thing about id's is that they can be used as a link reference. Many people still think that you need named anchors to make links within a page, but that's simply not true - in fact, the name attribute is deprecated in XHTML except for in forms. One example of using id's as link references is this page. There are no named anchors on this page - the questions at the top of the page link to the id's of the divs that the answers are in.


Question 8 :

I made a 10px-high div, but IE makes it 20px high... 

Answer :

Yeah 
This problem sometimes comes up when you make a div just to contain the bottom border of a box, or something like that. In this situation, there's no text in the div, but IE won't let the height of the div be smaller than the line-height (which usually depends on the font-size). The answer is to set the font-size to zero.
CSS

#thediv {
    font-size:0;
}


Question 9 :

Why is it my ':hover' declaration for links does not work ?

Answer :

Assuming you have already checked that your style sheet declarations do conform to correct CSS syntax, it could be that you have overlooked the importance of a correct order of style declarations for links. 
The CSS2 specification makes this following note on the importance of placing the dynamic pseudo-classes ':hover' and ':active' in correct positions in a list of style declarations. 
Note that the 'a:hover' must be placed after the 'a:link' and 'a:visited' rules, since otherwise the cascading rules will hide the 'color' property of the 'a:hover' rule.

Similarly, because 'a:active' is placed after 'a:hover', the active color will apply when the user both activates and hovers over the 'a' element.


Question 10 :

Why does Netscape lose my styles ?

Answer :

Netscape 4.x has poor support for CSS. Having said that, the following points should be noted. 
Invalid HTML will almost certainly cause Netscape to ignore your CSS suggestions at some point. You will find that valid HTML is your best friend, but for Netscape to work properly you must ensure that all elements in your markup which permit closing tags are explicitly closed. 
Check and correct your CSS suggestions for the very same reason, Netscape 4.x is in fact doing "the right thing", as per CSS specs (as opposed to MSIE) when it ignores style rules with errors. 
Netscape 4.x has what's called an "inheritance problem" into its TABLE element. It can be argued that NS is all within its right to behave as it does in this case, but since the workaround is quite simple it's easy enough to just use it and be done with it. 
Let's say you want your TABLE content to "look the same" as your BODY content? "Redundant" styling comes to your help as in e.g. BODY, TABLE, TH, TD { /* insert your styles here */ } 
On a generic level, Netscape 4.x likes to have style rules applied directly to the elements where they are needed. You can never really trust the inheritance principle to work correctly at any level in Netscape 4.x.