A couple of browser compatibility issues. As almost every web designer knows, how a browser renders a page is very dependent on which browser is doing the rendering.

Here’s a couple of tips to use when trying to get a web page to render the same across most browsers (IE, Firefox and Opera).

Do NOT use <br clear=”all”>

IE does not render this at all. It’s better to use <div style=”clear:both”> which works across most browsers.

Specify CSS definition “margin-top” for lists

The default margin-top for lists differs between the main browsers. IE’s default margin-top is zero. Firefox and Opera has a default margin-top of about 1 em.

It’s best to always specify a margin-top in CSS when using lists.

Cascading style sheets, or CSS, has an import rule that allows you to import a css file into a HTML document or another external CSS stylesheet. It’s used as a method of referencing external CSS stylesheets or other files that may be needed on a HTML document or even an external CSS stylesheet.

The CSS import rule looks like this:

@import

Why use @import? (Read more…)

External stylesheets contain cascading stylesheet, or CSS, information used by a browser to display your web page with the styles you intended to use. These styles can be as simple as defining the font and font color, to as complex as layouts with three column without using tables.

There are four different ways CSS information can be supplied. See cascading order of CSS for more information.

The most efficient way to supply a browser with CSS information is by using an external css stylesheet. (Read more…)

In CSS, it’s possible to have more than one style specified for a HTML element. In simple terms, all styles, no matter how it’s specified will “cascade” down into one virtual stylesheet. This means you can define styles in an external style sheet, an internal stylesheet or inside a HTML element and all these styles will cascade down into one “master” stylesheet.

The order, from lowest to highest priority, is as follows: (Read more…)

Good web design is more than just a good looking web site, it’s also making sure that the web site design is displayed as intended no matter which browser a visitor to the web site uses.

Internet Explorer (IE) has always had issues with displaying CSS styles correctly. It became necessary for web designers to develop hacks to ensure that their designs looked as intended in Internet Explorer as well as other browsers. (Read more…)

Cascading Style Sheets or CSS can be used to give your font or text a unique look. Here are some funky things you can do to your font to make it a little different from the default.

1. Color (color)
2. Letter Spacing (letter-spacing)
3. Text Align (text-align)
4. Text Decoration (text-decoration)
5. Text Indent (text-indent)
6. Text Transform (text-transform)
7. Word Spacing (word-spacing)

(Read more…)

Changing the look of your forms is a great way to personalize your pages. Adding borders, background colors and alignment to your forms are all possible. Here are some examples of how to use CSS to customize your forms and input fields. (Read more…)

The traditional way of creating graphical buttons is using two gif images, one for the default and one for when the mouse cursor hovers over or clicks the link. One would have to use some javascript to show one image and then the second image when the link is being hovered or clicked.

CSS allows the creation of graphical looking buttons, but without using two separate images. Try using this tutorial to create your own graphical buttons using CSS. It basically uses background colors and borders to create a simple graphical button.

To make a graphical button where the button looks pressed when hovering, use the following two style definitions for a standard link, and a hovered link.

a:link.nav {
color: #FFF;
background: #00C;
text-decoration: none;
padding: 0.2em;
border: 3px solid;
border-color: #99f #008 #008 #99f
}

a:hover.nav {
color: #FFF;
background: #00A;
text-decoration: none;
padding: 0.2em;
border: 3px solid;
border-color: #008 #99f #99f #008
}

To use the above styles, you would write your links as:

<a href="/" class="nav">link 1</a>

The above style definition creates a button that looks like the following. Hover over the button to see the effect of the button being “pressed”.

link 1

Here’s a simple way of creating a tab menu using unordered lists and CSS.

First you will need your menu items in a list, preferably unordered, but ordered will work as well. Give the list an id, for example, “tabmenu”.

<ul id="tabmenu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>

Next, define your tabmenu id either in the head section of your html or in an external CSS stylesheet. You will need to set the display to inline, the list-style-type as none and padding on the right to about 20px.

#tabmenu li {
display: inline;
list-style-type: none;
padding-right: 20px;
}

Here’s what the above example looks like:

• menu 1
• menu 2
• menu 3

Vertically centering one line of text can be achieved using one of 2 methods outlined in this article.

To vertically center a number of lines of text using CSS will (unfortunately) not work with the methods outlined in the above mentioned article. To vertically center more than one line of text (with no restriction as the how many lines of text you want to center), use the method outlined below.

Please note that this method currently does NOT work with Internet Explorer. This is because this browser is not able to render “display: table” and “display: table-cell”.

<div style="display: table; width: 25em; height: 25em; position: relative; border:1px solid #CECECE">
<div style="position: relative; top: 50%; display: table-cell; vertical-align: middle">
<div style=" position: relative; top: -50%; border:1px solid #00ff00">
Display any text of any height<br />
or any content, and<br />
everything will be<br />
vertically centered.<br />
</div>
</div>
</div>

We’re still trying to find a solution for vertically aligning more than one line of text that will work in IE and is flexible enough to accomodate varying number of lines. Any and all suggestions are welcome!