Resetting the Browser Default Style

Posted in CSS by Joe Valdez
Dec 10 2009


I’m sure you’ve all been there. You create a web page and it looks great in Firefox, then you preview it in Internet Explorer and…doh! You scratch your head and wonder, where did I go wrong?

Every browser has their set of built-in default styles for just about every tag. Most are the same but some aren’t, especially between the two main browsers (FF & IE).

Some of the most common differences are the margins and padding in the tags. Below is an example of the differences in spacing between Firefox 3 and Internet Explorer 7.

Example of Standard Spacing in Firefox

Example of Standard Spacing in Firefox

Example of Browser Spacing in Internet Explorer

Example of Browser Spacing in Internet Explorer

As you can see above, there are differences in spacing in both browsers.

You can also view this example yourself, if you have multiple browsers installed, here: http://www.redicedesigns.com/blog/wp-content/links/reset_example.html

The way to make sure all your spacing’s are the same across all browsers is to reset all the tag properties. This will set all properties for all tags to minimum, or zero. From there you can style the page exactly how you intend to.

You can find the most commonly used reset CSS file from yahoo, here:
http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css

There are a few keys things to remember when using a reset CSS file.

  1. Always make sure when using a reset CSS file to list it FIRST, in the <head> section, in your list of styles. From then on you can add your own styles to supersede the reset styles.
  2. The reset file will reset everything.
    This means your lists will be without spacing and properties, so initially the list items will appear as regular text lines. The <em> tag will not show text in italics and the <strong> tag will not show text in bold.
  3. Always keep your reset CSS file separate from other styles.
    Keep it separate from the styles you will use to style your pages. The last thing you want to do is to mix up your styles. This also helps because you can always come back to the reset file to modify it a lot easier.
1 Comment »
Tagged as: CSS, Firefox, header, Internet Explorer, reset, tag

DIV Basics Using CSS

Posted in CSS by Joe Valdez
Nov 30 2009


Introduction

Divisions or “div” are a ‘block level element’, meaning they have the “block” attribute already inherited. Divs are used to display content in a block format much like tables but also used to define sections of a web page.

General Layout

Divs are the best way to layout information on a web page because of the properties that can be applied using the simplest and cleanliest code. It is always better to use divs over tables whenever possible.

The best way to organize a web page using divs is to create specific sections for each part of the page. For example: a header, navigation, content and footer. For each of the different sections, an ID can be used to identify and style each div. It is always better to have each section or div inside one main div, normally this div is called the “container”, this “container” div will allow for more options, which will be described later.

Below is how to organize the container and its inner sections or divs.

<div id="container">
<div id="header">Header Content</div>
<div id="navigation">Navigation Content</div>
<div id="content">Main Content</div>
<div id="footer">Footer Content</div>
</div>

Below is a picture of a box model of the four sections inside the container, which also shows the style that applied to each section.

Div Layout Model Using A Container

The example shows the navigation being used on the left hand side. You can set the “navigation” and “content” divs side-by-side using the “float” property. The “navigation” div will have the “float” property along with a specified width. The “content” div will have the “margin-left” property for the same value as the navigation width. Using the same value will allow the content to only flow to the right of the navigation.

Below is an example of the style applied to each section:

#header {
height:120px;
text-align:center;
}
#navigation{
width:150px;
float:left;
}
#content {
margin-left:150px;
}
#footer {
text-align:center;
}

Using a Container

By using a “container” div, you can set the width of the overall content. By not setting a “width” property, the content will fill the browser window-no matter what size. To set a maximum width for the overall content, you would do so by adding a “width” property to the container. The default alignment for the container is left, but you can also center the “container” div. You can see how to center the div below.

Centering

Unlike tables, divs do not have the “align” property, so you cannot center a div in the same way. The way to center a div element is to use the margin property. Below is how to absolutely center a div:

#container {
width:820px;
margin-left:auto;
margin-right:auto;
}

The value to use for the margin properties is “auto”. This will automatically calculate the distance from each side, left and right, and position the div in the center.

Links

You can also create a link from a div itself. Most of the time you will see this in the header, a link created from the header that points to the home page. This can be done with a bit of javascript. The easiest way to create a link from a div is below:

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

The only property that is applied, via css, is the “cursor” property, this is so the visitor knows the div is a link.

No Comments yet »
Tagged as: CSS, div, footer, header, ID
Get Adobe Flash player