Web Design FAQ

General | Browser Bugs

General Web Development Questions

[This list is continually expanding, so feel free to check back again.]

---

Q. What fonts can I use on my page?

A. Not very many fonts are "web safe." Check out this page for the safest choices.

Q. How do I keep my page from "overflowing" the browser window?

A. A frequent problem in web design arises when the developer creates a page, tests with a maximized browser and a high-resolution monitor, and afterwards discovers that a lot of his viewers have a horizontal scrollbar, because the page is too wide.

The simple answer is to suggest a "fluid" design" - meaning, design as much as possible with percentages rather than fixed widths. (This is a simplistic answer, of course, because images, for example, need to have pixel dimensions.) For an introduction to creating fluid table-based layouts, see this helpful article (off-site).

Another good alternative is to use a fixed width that most people will be able to view without horizontal scrolling. Most monitors have a resolution of at least 800x600 pixels, and most people using such low-resolution monitors probably keep their browser windows maximized. Factoring in the vertical scrollbar, you should aim at a fixed-width content area of somewhere between 730-770 pixels.

For more detail on the complexity of the issue of browser windows and monitor resolution, see this helpful article (off-site).

Q. How do I keep my content centered in the browser window, regardless of window size or monitor resolution?

A. Wrap your content in a centered wrapper. See one of these tutorials: centering a table or center a div.

Q. I used the CSS float property on some of my elements, and now they stick out of the bottom of their container. What did I do wrong?

A. You haven't done anything wrong - the idea of the float property is to allow content to "flow" around the floated item. If there is no content to flow, the container will not automatically "stretch" to keep the floated elements "inside."

The solution is to clear the floats. Inside your container, just before your closing tag, insert a "clearer div." Something like this:

<div class="clearer"></div>
</div> <!--this is the end of your container that the floats are in -->

In your CSS:

.clearer {
clear: both;
}

(Note: if there is still a problem, try assigning a height to the clearer - or, if it doesn't make the clearer higher than you find acceptable, put a non-breaking space inside the clearer in your HTML. E.g. <div class="clearer">&nbsp;</div> )

Q. I designed my page in a graphics editor (Photoshop, Fireworks etc) and exported the HTML to my web editor. But my page breaks whenever I add text!

A. There are a number of problems here. (1) It is almost always unwise to use HTML generated by a graphics editor. Of necessity, they tend to create all sorts of complex HTML - which leads to "heavy" pages and fragile structure. (2) Exclusively building a page in a graphics editor generally reflects a problematic approach to web development. Only in special situations can you create a page to look on the web exactly as you dreamt it and built it in Photoshop or Fireworks. (Such a special situation could occur if your pages were very slim on textual content, and the amount of content varied little from page-to-page on the site. Even then, you must face up to the realities of browser window sizes - see previous Q/A.)

Your best solution is to use your graphics editor to do a mockup of your page, and envision from that how to build your own HTML in a web editor (such as Dreamweaver). When you do, be sure to avoid thinking rigidly - leave room for the page to grow. Then export only the graphics you need as graphics (i.e. .jpg, .gif, .png files - don't export HTML) from your graphics editor. Then incorporate the graphics into your HTML page yourself.

Q. How do I stop the double-spacing between my paragraphs?

A. Actually, that's not really double-spacing; the space between paragraphs is controlled by the vertical margins that browsers give to the <p> (paragraph) tag by default. You can control this with CSS. In your style sheet, do something like this:

p {
margin-top: 3px;
margin-bottom: 3px;
}

Adjust the numbers to suit. It should be noted, however, that you should generally leave a reasonable amount of spacing between your paragraphs; otherwise, your text will be hard to read.

Q. My Flash banner/element is hiding the dropdowns on my navigation bar!

A. Active content such as Flash tends to "rise to the top." There is a brief article here showing you how to work around this (off-site).

I need to stress that there is widespread consensus that getting Flash "off the top" has no resolution that is reliable cross-browser. I therefore cannot vouch for the universality of the method in the article; it certainly works in IE 6 and Firefox on Windows, but I am told no pre-OSX Mac browser supports it. Neither does Opera. You will need to decide which browsers you wish to support. The alternative is to move either your Flash element or whatever it's hiding.

Q. How can I keep viewers from downloading my images (or stealing my code)?

A. You can't. It is true that there are scripts available that can hinder users from right-clicking. But the truth is that such scripts are easy to get around, and besides, your image is already in the user's browser cache. In other words, right-click or not, the image has already been downloaded. Essentially, if you do not wish your image to be downloaded, don't put it on the web. For more information, see this off-site article. Read every page, and you'll get the idea, as well as a "no-right-click" script. (And for what it's worth - even with that "no-right-clicks" script on the site's second page. . . I right-clicked with Firefox.)

Q. How can I get good search engine rankings?

A. Although some folks splurge and spend money on submitting their sites to various search engines, that is largely unnecessary. The most important factors are links, content, and proper structure.

1. Links: Use the interconnectedness of the web to your advantage. On an indirect level, being linked from other relevant sites will help search engines find you, as well as drive other traffic to your site. And search engines such as Google also directly reward you for linking to and being linked from other relevant sites. (Note the key adjective relevant - when it comes to search engines, you're more likely to be punished than helped if you simply make a links page that links to anything and everything that has nothing to do with what your site is all about.)
2. Content: You need strong content, clearly worded, including the search terms you want people to find you under. Pages and pages of graphics (pictures) but little text is unlikely to give you good rankings.
3. Structure: Learn how to use tags properly. Don't simply style a paragraph tag - i.e. <p> - with large bold text. Use heading tags, and employ them in their proper order: h1 for things like site names and page names, h2 for headings at the next level, and so on (there are six levels of heading tags - h1-h6 - more than most people will ever need). On this page, for instance, the page name is in an h1 tag; the subheadings (General Web Development Questions and Browser Bugs) are in h2 tags; and the questions themselves are in h3 tags. Make sure that the text in these headings is descriptive and uses the key search words you want to "work."

Browser Bugs

Q. I am having a problem with Internet Explorer. It has a bug, and if I code for it, my code throws other browsers off. What can I do?

A. You can use conditional comments for Internet Explorer. For example, if you have a problem with a dimension in your Cascading Style Sheet (CSS), you can create an identical style with an additional * html prior to the style name, which only Internet Explorer will see. For example, if you needed to give a different width to an item in IE, you could do this:

.classname {
width: 100px;
}
* html .classname {
width: 110px;
}

Only IE would read the second style, and your other browsers would still be fine.

For more on conditional comments, see this article (off-site).

 

« Back to tutorials main page