Section 14.3. Eliminating Browser Style Interference | Dreamweaver CS3: The Missing Manual

14.3. Eliminating Browser Style Interference

When you view a non "CSS-ified" Web page in a Web browser, HTML tags already have some minimal formatting: headings are bold, the <h1> tag is bigger than other text, links are underlined and blue, and so on. In some cases, different Web browsers apply slightly different formatting to each of these elements. You may experience some frustrating "it almost looks the same in Internet Explorer and Firefox and Safari" moments.

POWER USERS' CLINIC
The Web Developer's Toolbar

Web designers have to stay on top of a lot of things: HTML, CSS, links, graphics, forms, and so on. Troubleshooting problems with any of these items can sometimes be a real challenge. The Web Developer's Toolbar (http://chrispederick.com/work/webdeveloper/ ), created by Chris Pederick, is a Firefox extension that's like the Swiss-army knife of Web design (see Figure 14-4). If you don't have Firefox, you should install it for this toolbar alone (www.mozilla.com/firefox).

Download the extension, install it, and spend a little time with the different options. You have many features available to you, but here are a few worth noting:

Choose CSS View CSS , and you'll see all of the styles for the current page, even styles imported from multiple style sheets. If you've ever been to a Web site and wondered "How'd they do that?" this tool gives you a free backstage tour.
Choose CSS Edit CSS , and you can edit the styles of the current Web page. This doesn't do any permanent damage to the real Web page, but it does let you tweak a page's styles and immediately see the results. Think of it as the ultimate WYSIWYG editor.
The Information menu provides a wealth of detailed and often geeky under-the-hood details. The Display Block Size option displays the dimensions of block-level elements such as tables and divs. Display Element Information provides info on any element you hover over (including HTML attributes, CSS properties, and its position on the page). And Display Id & Class Details is a great way to see the names of styles applied to tags on the page. Use it to see how other sites name their <div> tags.
The Tools menu gives you access to online tools for validating HTML and CSS, and even checking links. These tools work only for pages that are online, not ones you're currently working with on your computer.

Microsoft offers a similar tool for Internet Explorer. You can find it by visiting www.microsoft.com and entering IE Developer Toolbar in the search box.)

Figure 14-4. The Web Developer's Extension is a must-have tool for any Web designer. This Firefox extension lets you view the styles of any site on the Web, identify the structure of a page's HTML, find out more information on how any element on a page is styled, validate a page and its CSS in one easy operation, and even edit the CSS of a page and see how the changes you make affect the appearance of the page.

Note: Firefox actually uses a CSS style sheet to format HTML tags. To see it on a Mac, locate the Firefox application file, right click it and then select "Show package contents." Then navigate to Contents

MacOS

res and open the html.css file in a text editing program. In Windows, you'll find that file at C:\ Program Files\Mozilla Firefox\res\html.css . As you can see, it takes a lot of styles to make regular HTML look boring.

Because of these browser differences, it's a good idea to "zero out" the formatting for commonly used tags so your audience can see the beautiful styling you worked so hard to create (see Figure 14-5). All you have to do is set up some basic styles at the beginning of your style sheet that remove the offensive formatting.

Figure 14-5. Doesn't look like much, and that's the point! Eliminate browser display differences by "zeroing out" the normal browser styles. Then create your ownand betterstyles to add margins, padding, and font sizes that are consistent across browsers.

Here are some things you may want to do to make browsers stop meddling with your designs:

Remove padding and margins . Browsers add top and bottom margins to most block-level elementsthe familiar space that appears between <p> tags, for example. This can cause some weird display issues like when the exact margin amount is inconsistently applied across browsers. A better approach is to remove padding and margins from the block-level tags you use and then purposely add the amount you want by creating new styles.
Apply consistent font sizes . While text inside a <p> tag is displayed as 1em, Web browsers apply different sizes to other tags. You can force all tags to be 1em to begin with, and then create additional styles with specific font sizes for the different tags. That way, you stand a much better chance of getting consistent font sizes across browsers.
Remove underlines from links . As you saw in Chapter 9, you can create visually exciting navigation bars that use plain old text links. In fact, if most of the links in your site look more like buttons , or you use other formatting to indicate an element's clickability (maybe by adding hover effects), then start off by removing the underlines. You can later selectively add underlines when you want them. (See "Using Descendent Selectors" in Section 14.4.1.)
Remove borders from linked images . Internet Explorer, Firefox, and other browsers add a colored border around any image inside of a link. If you're like most people, you find this border both unattractive and unnecessary. Remove it and start fresh.

To put these ideas into action, here are a few basic styles you can add at the beginning of your style sheet:

 body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {     padding: 0;     margin: 0; } h1, h2, h3, h4, h5, h6, pre, code {     font-size: 1em; } a {     text-decoration: none; } a img {     border: none; }

The first two styles here are group selectors that apply the same formatting to every one of the tags listed. Add these styles to the beginning of your style sheet, and then, further down the style sheet, override them on a case-by-case basis. After zeroing out the margins and font-size for the <h1> tag, you may want to give the <h1> tag a specific top margin value and font size. Just add another style, like so:

 h1 {     margin-top: 5px;     font-size: 2.5em; }

Thanks to the cascade, as long as this h1 style appears in the style sheet after the group selectors removing the margins and changing the font size, the new values take precedence.

Note: Web luminary Tantek Celic is often credited with introducing the very useful technique of undoing the standard Web browser formatting of HTML. You can see his basic set of undo styles at http:// tantek .com/log/2004/undohtml.css .