In Web Design
Welcome to the beta of the new saila.com. Send in your bugs.
Web Building Tips
This is a collection of tips about HTML, CSS, JavaScript, and other Web development and design issues.
-
Why doesn’t Internet Explorer add a table using appendChild?
Adding a table using the DOM is relatively easy — all you need to do is dynamically create the needed TD (and/or TH), TR, TBODY (and/or TFOOT and/or THEAD), and TABLE nodes using createElement. The you add each child to its parent using appendChild. -
What are attribute selectors good for?
The attribute selector is a fantastic tool. A simple example of their benefit is when styling forms. Say you have this: -
What CSS selectors does a browser support?
In CSS 2, IE/Win doesn't support the following selectors: -
Why can’t my checkbox be made read-only?
There has been some debate about this caused by an unclear description in the actually HTML 4.01 DTD and inconsistent browser support. The general consensus is that the readonly attribute only applies to inputs that have type set to “test” or “password”. -
Are CSS hacks and filters necessary?
Depends on the site. For example, saila.com relies on conditional comments to serve styles to IE, and is designed to support Mozilla/Opera (fourth generation browsers are, essentially, ignored). -
Is there away to display a user’s system colours?
Yes, through CSS. In CSS2, there is a set of unique colours based on system features (such as InfoBackground and ButtonFace). These get deprecated in CSS3, in favour of even more specific values. The proposal calls for a new property called appearance which simultaneously affects a variety of values (colour, font, background, padding, border, and margin). There are also new values for font, drawn from the system settings. Finally, the cursor has a number of more specific values, too. The many of the values in the last two additions are currently supported by Internet Explorer -
How do I block a search engine from indexing my site?
-
How do I style links?
A linked anchor (a) element has a series of pseudo-classes that can be applied to it (:link and :visited) in addition to :active and :hover. For CSS-1 style sheets, this is the best way to style links: -
Are relative links better than absolute links?
Relative links (also known as “document relative“) have the advantage of being shorter, and more portable as they refer to other pages relative to themselves. -
How do I use special characters in JavaScript?
Like HTML, Javascript requires special characters to be encoded. But JavaScript has its own unique way. -
Why do some characters not show up on a Macintosh?
This could be the result of a number of things, the first, and most likely being that a special character was pasted into the document from Windows-document. For Web pages to display accented characters and the like, they must be properly encoded. -
Should I use a DOCTYPE declaration?
Newer browsers are relying on the DOCTYPE declaration (a.k.a, DTD) to determine how a page should be displayed. -
Which standard is the right HTML standard?
The short answer is that there is no right HTML standard. If it validates, browsers should display it. Now, the longer answer. -
Can I have punctuation in my file names?
You can use some but not all. Like spaces, inserting non-alphanumeric characters into a file name could cause problems for browsers, servers, or the user. -
Can I have spaces in my file names?
Sort of. Technically, a URL shouldn’t have any white space in it, but many servers can now handle this. To be safe it is best to replace spaces with an underscore. If the space cannot be changed, you should replace the space with %20, which Web server’s will interpret as a space. -
Which is the right extension:
Both, as long as your Web server is configured to serve the files as HTML documents. (To be exact, the extension doesn’t have to be either, it just has to match your Web server’ setup.)*.htmlor*.htm? -
How do I make a page redirect the user elsewhere?
To redirect a user to another page, you can put a <meta> inside the <head> tags. The following would automatically redirect someone to http://www.example.com: -
How do I force a page to reload?
The easiest way to do this is by putting a <meta> inside the >head< tags. This example would reload the page in about 60 seconds: -
Must I close all elements?
No, but the far-sighted would be wise to do so. Closing the elements makes working with style sheets much easier. Closed elements also make the document easier to debug. XHTML makes it a requirement for every element to be closed, so any <li> tag should end with </li> tag, any <p> should end with </p>. -
Should I quote attributes?
Generally, it is a good idea to quote attributes (e.g., <table width="350"> as opposed to <table width=350>) because the future version of HTML, XHTML, requires it. Also, some attributes most be quoted, for example, anything preceded by a + or -, or followed by a % -
Uppercase or lowercase?
In HTML it doesn’t really matter. You could have the elements in all caps (<HTML>), lowercase (<html>), or even in mixed-case (<hTmL>). The choice is a matter of personal preference, although future versions of HTML (the XML-compatiable XHTML) require elements to all be in lowercase. By using lowercase now, it could save a lot of work down the road. -
Is it necessary to write “Copyright ©”?
The reason for using “Copyright ©” is now redundant, but most sites still do it out of habit, akin to the way newspaper writers still put 30 at the end of a story. -
How do I make drop shadows?
There are a number of ways to create Web-based drop shadows: -
How can I get my logo appear as a bookmark icon?
All you need to do is save a small icon, sized 16 × 16, in the root folder, and call it favicon.ico. You can also have a unique icon for individual pages. Just put this in the <head> of the particular file, and point the URL to the location of the *.ico file you want to use: -
Why aren’t my style sheets showing up in Mozilla/Netscape 6+?
Your server likely has the wrong MIME type declared for your style sheets. According to the W3C, the file should be served with a content type of “text/css.” For more infomation, and how to fix the situation, read Netscape’s “Incorrect mime type for CSS files.” -
In older browser’s, my JavaScript/style sheets are being displayed as text.
This is an easy fix. Just wrap the content of your JavaScript/style sheets with a comment tag: -
Can I get rid of the white space “gutter” around my HTML pages?
There’s an easy way to do this using style sheets, as well as a way to do this separately for Netscape and Internet Explorer. -
How can a page’s design be quickly changed?
The W3C has made it possible for a page’s entire design to be changed by switching the style sheet used. Although Internet Explorer doesn’t yet support this, both Mozilla-like browsers and Opera, do. Simply add a title and the words “alternate stylesheet” to the the link’s rel attribute: -
Does Internet Explorer on Windows support
As of Internet Explorer 6 for Windows, there is no support for position: fixed, however there are a couple of JavaScript workarounds:position: fixed? -
How I can serve different style sheets to different browsers?
Obviously, the best thing to do is detect the browser and serve the approriate style sheet, and the safest way to that is on the server-side using PHP, ASP, XSSI, or something similar. But, if that's not an option, it can be also be done on the client-side using JavaScript. A third option is more problematic, but can be successful: exploit a known bug in Netscape 4.x. Find out more -
How come the text gets smaller and smaller in Netscape 4.x?
Despite all the p elements being closed, Netscape 4.x treats each subsequent paragraphs (or other elements) as direct child of the first, thereby reducing the text sizes. -
The page displays in Internet Explorer but not Netscape, why?
If you’ve used a table to arrange the layout of your page, this is likely the cause of the problem (using a validation service could reveal the error). Check the HTML to make sure all the table elements are closed (i.e., <table>…</table>, <tr>…</td>, and/or <td>…</td>). Netscape browsers are far less forgiving in terms of table layout than Internet Explorer browsers. -
Can I install multiple versions of Internet Explorer?
If you run Windows, there is no way to have two versions of Internet Explorer running at the same time without using special software. -
What’s the difference between “visibility” and “display”?
The visibility property only affects the appearance of that node’s content (either by showing it, or not), but display affects the appearance of the entire node. This latter effect is often used in drop-down menus or outlines because the placeholder space created by visibility: hidden can ruin the illusion of a menu opening and closing. -
How can I create space between list items?
If it is a block of text, the best thing to do is wrap the text with a paragraph element (this is both valid and semantically correct, as Rudy pointed out on thelist): -
How are inline list created?
Using an inline list is a simple way to structure horizontal navigation. And unlike some elements of CSS, this only takes online and works even if the browser was rudimentary style sheet support (like Netscape 4.x): -
How do I indent lists using CSS?
There really isn’t a proper way. Both the Gecko-based browsers and Internet Explorer interpret the CSS specifications differently. To ensure consistency the best thing to do is clear the left padding and margin values, which brings the bullets flush to the edge of the box (i.e., there is no indent). -
How do I style an
Internet Explorer and most CSS-compliant browsers (e.g., Gecko-based ones—Opera has one quirk which Stefan M. Huber has documented) treat the styling of horizontal rules differently. Essentially, IE treats them as inline elements, while the others treats them as block elements.As such, to colour it red...hr? -
How can I have a liquid layout, with a maximum width?
The easiest thing to do is use the property max-width. Unfortunately, that’s not supported by most versions of Internet Explorer. -
How do I center a table using CSS?
The correct way to center block elements, like tables, in CSS is to set the margins to this: -
Why do my anchors change colour on hover?
This is because CSS-2 allows :hover (and :active) to be applied to any element. Conforming browsers (such as the Gecko-based ones) will apply a:hover to links and anchors. To avoid this, apply the link’s style rules with more specificity -
How do a remove the border around a linked image?
In HTML (and older browsers like Netscape 4.), it’s just a matter of adding border="0" to the img element. -
Why do images in tables have a white gutter on the bottom?
This is most noticeable in Gecko-based browsers like Netscape 6.x and some versions of Mozilla. The consensus seems to be that this is because the browser is treating <img> properly as an inline element. And easy fix is to put this line in your style sheet: -
How do I get text to wrap around an image?
Use the align attribute in the img element. To be forward compatible, also use the the CSS float property. -
Is an
An alt attribute is required, even if the image requires no description (for example, it could be a purely decorative element). In such a case, use the alt attribute, but leave it empty, like this: alt=""altattribute needed if there is no description for the image? -
GIF, JPEG, or PNG?
If the image is a photograph or other type of continuous tone images, JPEG offers excellent compression with little degradation of the image's quality. Experiment with the compression until you arrive at the quality (and size) you'd like. -
Should I use drop-down menus for navigation?
-
How can I control the size of a text field/input box?
Unfortunately, Netscape 4.x displays form fields using different criteria than the other browsers (Internet Explorer, Opera, and Gecko-based ones). -
How do I make only one scrollbar appear when setting
Officially, you can’t. Microsoft, however, added some proprietary extension to its Internet Explorer for Windows that does allow for this kind of control. The overflow-y property controls the vertical scrollbar, and overflow-x controls the horizontal. Using these extensions though, will prevent the document from validatingoverflow? -
How do I remove the scrollbars?
Before you start, you better have a good reason to do so—disabling scrollbars creates a lot of usability problems and can confuse users. Assuming it’s being done for a good cause, there are a few ways to accomplish this, but none are fool-proof. -
Why do form elements show through layers?
This is rendering quirk found in both Internet Explorer and Opera on Windows, and unfortunately there’s nothing that can be done about it short of redesigning the page. -
Do I need an
Even if you have no server-side script for the form, for example it’s a JavaScript-powered form, an action attribute is still needed. Like the alt attribute for decorative images, you can specify an empty value, like this: action=""actionattribute for a form? -
How do I get rid of the space around forms?
There are two easy ways to do this, the first is a invalid hack, the second uses style sheets. First the hack: embed the form in a table, placing the open and close form between the table elements: