Quantcast
Channel: Expression Web Tips» CSS
Viewing all articles
Browse latest Browse all 10

What is browser chrome?

$
0
0

Browser chrome does NOT refer to Google’s addition to the browser market – Google Chrome.

Browser chrome refers to the borders of a Web browser window, which include the window frames, menus, toolbars and scroll bars. When designing a Web page, the browser chrome must be added to determine the width of the page.

If you look at http://www.expression-web-tutorials.com/browser-chrome/ in both Internet Explorer 8 and Firefox, and Opera, you will see that each of them display a slight margin at the top of the page. This is because of the default setting for each of the browsers.

If I add to the body styles on the external style sheet

body {margin: 0px; padding: 0px; }

and view the same page again in all three browsers, you can see the difference.

http://www.expression-web-tutorials.com/browser-chrome/index-two.html

In all three browsers, the top of the masthead is now flush against the top of the browser.

CSS Reset

Adding {margin: 0px; padding: 0px; } to the body tag is referred to as CSS Reset or Reset CSS. Resetting your style or styles  is the process of resetting or setting the styles of an elements to a baseline value,  This allows you to  avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

CSS Reset is important because it removes inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to display differently across the various browsers. The reset can be as simple as setting the margins and padding for the body tag or more complex as the settings recommended by Eric Meyers in CSS Tools: Reset CSS

Each of the Site Templates offered by Migrating from FrontPage to Expression Web, makes use of the following CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
font-size: 100%;
}

You can read more about CSS Resets at:


Viewing all articles
Browse latest Browse all 10

Trending Articles