I want my page fonts to look the same everywhere as in…
a) Why are my font sizes different in different browsers ?
b) Why are my font sizes different on different platforms ?
These questions represent the tip of the iceberg of a large topic about which whole essays have been written and a wide range of different views are held.
The WWW was originally devised to present the same content in different presentation situations and for a wide range of readers: on that basis, "looking the same" is not a design criterion, indeed different presentations would be expected to look different.
Some would have it that this original aim is no longer relevant, and that the purpose of web design is now to factor out the differences between display situations and put the author in control of the details of the presentation. Others point out that CSS was designed to give the reader a substantial amount of joint control over this process, and that this is desirable, for example to accommodate users with different visual acuity.
Reading of textual matter on a computer screen is quite a delicate business, what with the relatively coarse pixel structure of a computer display; even with a close knowledge of the display details, it isn't possible to achieve the detailed control that would be possible, say, on a printer. Whatever one's aims, the practical truth is that many of the efforts made to guarantee the precise result on the screen have seriously counterproductive side effects in a www situation.
The CSS specifications themselves recommend that authors should not use absolute size units in a situation where the properties of the display are unknown. There's a lot to be said for flexible design, that in an appropriate situation looks the way you had in mind, but still successfully conveys content and message in a wide range of other browsing situations.
And so, before looking at the technical detail of what can be specified, it's strongly suggested that you read some of those essays on web design, and reach your own conclusions as to the strengths and weaknesses of the medium, and how you can best exploit the strengths in a web environment, without falling foul of the weaknesses.
When is auto different from 0 in margin properties?
In vertical margins, auto is always equal to 0. In horizontal margins, auto is only equal to 0 if the width property is also auto. Here are three examples, assume that there is a <P> that is a child of<BODY>:
Example 1: auto value on the width.
BODY {width: 30em;}
P {width: auto; margin-left: auto; margin-right: auto;}
Since the width property is auto, the auto values of the two margins will be ignored. The result is a P that is 30em wide, with no margins.
Example 2: two auto margins
BODY {width: 30em;}
P {width: 20em; margin-left: auto; margin-right: auto;}
The P will be 20em wide and the remaining 10em will be divided between the two margins. Paragraphs will be indented 5em at both sides.
Example 3: one auto margin
BODY {width: 30em;}
P {width: 20em; margin-left: 2em; margin-right: auto;}
In this case, paragraphs are 20em wide and are indented 2em on the left side. Since the total width available is 30em, that means the right margin will be 8em.
Note that the default value of width is auto, so setting one or both margins to auto is only useful if you set the width to something other than auto at the same time.
How do I move the list bullet to the left/right?
CSS1 has no properties for setting margins or padding around the bullet of a list item and in most cases the position of the bullet is browser-dependent. This is especially true since most browsers disagreed on whether a bullet is found within the margin or padding of a list item.
In CSS2, properties were introduced to provide greater control over the placement of bullets (which CSS2 calls a "marker") but these were not widely supported by mid-2001 browsers. Here is an example of changing a marker's placement:
li:before {display: marker; marker-offset: 22px; content: url(triangle.jpg);}
In this example, a graphic of a triangle is inserted before the content of the li element, set to be a marker (through display: marker;), and given an offset of 22 pixels. Depending on the margin size of the list item, there may not be room for the marker to appear next to the list item's content.
How does a simple CSS style rule look ?
P { font-family: serif; font-size: 1.2em; }
Here we see a rule with a 'selector' P that has been given two style declarations, i.e. two 'property:value' pairs.
'font-family' and 'font-size' are properties of the content of element P , and these properties are assigned the values of 'serif' and '1.2em' respectively.
A colon ':' is the value assignment symbol in CSS, so using an equal sign '=' instead is an error and is required by the CSS specification to be ignored. Any browser that appears to honor this style is behaving improperly.
For length values a 'unit' is always needed and there shall never be any space between a number and its length unit.
A value given as e.g. '1.2 em' is an error and is required by the CSS specification to be ignored. Any browser that appears to honor this style is behaving improperly.
A semicolon ';' between declarations is required but it's also good "rule of thumb" to put a ';' even after the last declaration.
Finally, curly braces '{…}' group one or more declarations into a final CSS rule.
Why are there gaps above and below my form in IE?
A lot of the time, when you find gaps that you can't account for, they are due the default styles of different browsers - especially the margins and padding. IE gives forms some margins above and below forms while Firefox doesn't. It's like with lists - you'll find bigger padding and margins for lists in IE than in Firefox. Paragraph margins are different, as are the margins on heading tags (h1,h2, etc).
A good way to not get caught out by these problems is to set all margins and padding to zero at the top of your style sheet and then add them as and when you feel the a need for them, in that way, any margins and padding will be the same in different browsers.
CSS
* {
margin:0;
padding:0;
}
If one were to set Text and Link colors using a style sheet, should one also define the background colors for these elements as well?
It is generally true that you should give background or background-color a value, but not necessarily a color value. E.g., if the document has a background image, you would "highlight" all links if you give them a background color.
body { background-image: url(light-texture.png) #FFF; color: #000 }
a:link, a:visited, a:active { color: #00F; background-color: transparent; }
By setting the background-image explicitly to transparent, you lower the risk of another rule in the cascade giving links a background that would highlight them.
How do you override the underlining of hyperlinks?
CSS has the ability to explicitly control the status of underlining for an element - even for hyperlinks. The correct way to do this in an external or document-level style sheet is:
A { text-decoration: none }
and within an anchor element as:
<a HREF="example.htm" STYLE="text-decoration: none">link text</a>
Note: The underlining of hyperlinks is a long-standing visual convention that assists in the visual identification of active hyperlink areas. Many users expect to see hyperlinks underlined and may be confused and/or irritated if they are not used. User-defined style sheets address this user need by allowing the user to have final control over this feature. Unfortunately, wide support for this ability does not yet exist.
How do you show which page you're on (in a menu)?
If PHP is not available to you, you could use the cascade. Put an id in your body tags and an id in each of your 'a' tags for the links.
Let's say on page one you have this:
CSS
<body id="page1">
....
<a id="page1link" href="page1.htm">page one</a>
...
</body>
In your CSS, you can have something like this:
CSS
#page1 a#page1link {
color:purple;
How can I specify two different sets of link colors?
By classifying each set of links and then attaching desired color to each set.
CSS:
<style type="text/css">
<!--
A.set1:link {color: some_color; background: some_background_color}
A.set1:visited {color: some_color; background: some_background_color}
A.set1:active {color: some_color; background: some_background_color}
A.set2:link {color: some_color; background: some_background_color}
A.set2:visited {color: some_color; background: some_background_color}
A.set2:active {color: some_color; background: some_background_color}
-->
</style>
You can name set1 and set2 any way you like as long as the names are made up of letters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code.
Note: to avoid conflict with user's settings a background property (background color) should also be specified together with the color property (foreground color).
How can I place multiple blocks next to each other?
In theory, the following will produce 4 "columns":
<DIV style="float: left; width: 25%;">Block 1</DIV>
<DIV style="float: left; width: 25%;">Block 2</DIV>
<DIV style="float: left; width: 25%;">Block 3</DIV>
<DIV style="float: left; width: 25%;">Block 4</DIV>
Each "column" will occupy 25% of the screen. This relies on a correct implementation of float, which cannot be said of many legacy browsers. If you cannot accept display variances in older browsers, then it may be best to fall back to table-based solutions.
By making the block an inline element and then use text-align property
<DIV STYLE="text-align: center">
<TABLE STYLE="display: inline">
...
</TABLE>
</DIV>
This technique depends on the incorrect implementation of text-align behavior in older browsers. It will likely cease to work in future CSS-conformant browsers, and eventually it will probably not be a viable solution.
Document Style Semantics and Specification Language (DSSSL)?
Document Style Semantics and Specification Language is an international standard, an expression language, a styling language for associating processing (formatting and transformation) with SGML documents, for example XML.
What is Extensible Stylesheet Language (XSL)?
XSL is a proposed styling language for formatting XML (eXtensible Markup Language) documents. The proposal was submitted to the W3C by Microsoft, Inso, and ArborText.
Which font names are available on all platforms ?
The simple answer is "None" which is why CSS offers five generic font names as 'serif', 'sans-serif', 'cursive', 'fantasy' and 'monospace'. Never put any of these generic font names in quotes.
A CSS aware browser should make a suitable choice from the available fonts in response to each of those generic names.
Specifying any other font name in a www environment comes out as a suggestion only, that may or may not be acknowledged by a browser.
The problem with using names of specific fonts is that there is little point in naming fonts that few users will have, so you're down to listing a few mass-market font names. This will then override any superior selection that a minority of discerning readers may have made for themselves.
Note also that fonts may differ in their character repertoire, but this is often not evident from the font name itself: by selecting an inappropriate font name, you might prevent internationalized content from displaying correctly for a proportion of users.
Why does Netscape lose my styles ?
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.
Why is it my ':hover' declaration for links does not work ?
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.
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates.
Subscribe Now!
0 comments: