Nowadays, when you are visiting websites on the Internet, you are almost familiar with the way some words or even phrases render differently from a regular (normal) font type.

The Italic refers to “cursive typefaces based on a stylized form of calligraphic handwriting”, and the font style originated in Italy. The influence from calligraphy can be seen in their usual slight slanting to the right, and is definitely different from what does mean oblique writing.
When you may use <i> HTML element? It is recommended to use the <i> HTML element when you want to define terms (i.e. "the prime number is a natural number which has exactly two distinct natural number divisors: 1 and itself"), to emphasis foreign words (i.e. "Au revoir - she said, touching his hand with a tender gesture.", names of ships (i.e. "Titanic sunk at it's first and only journey.") etc.
In typography, emphasis is the exaggeration of words in a text with a font in a different style from the rest of the text—to emphasis them. So, in this situation, emphasis could mean an italic or an oblique or a bold face font type, or even small caps or adding space between letters.
A web browser displays the words between the <em> HTML starting and ending tag most often as an italic writing, but some browsers can show the text in a different way.
On the other hand if you think from a search engine optimization for your content, it seems that using <em> rather than <i> HTML element will give to your words more importance.

As a conclusion, the text effect using the <i> HTML element can be achieved using Cascading Style Sheets rules, and the use of this element could be deprecated to some point. Using <em> instead will add more importance to your words or sentences and in most cases the visual effect will be the same.

According to the W3C CSS 2.1 specifications using z-index property for a positioned box element a stack level can be set and the element can be placed “behind” (far from user who faces the screen) or “in front of” (closer to the user) another element. In CSS 2.1, each box has a position in three dimensions, vertical, horizontal and a “z-axis” and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. As a Web Designer you may face situations when elements create strange behavior on a particular web browser. Known situations can be an inaccessible anchor (link) (pointing the mouse cursor over it doesn’t produce any effect such as mouse pointer change and an action on user’s click), a background image which does not appear correctly and maybe the most common example a JavaScript drop down menu which produce a relevant effect on what “one element on top of the other” means. The z-index style property can be set on any integer value, positive or negative, and note that the greatest value draws the element in front of the other elements with smaller z-index value.

An example with three positioned division elements one on top of the other

Follow this link and you will see how z-indes style property places overlapped boxes. It presents three <div> elements, all positioned relatively inside the body container, and inside the first division element are three anchors also positioned relatively. These three containers overlap visually and they are one on top of the other. If the web browser you are using is standard complying according to W3C CSS 2.1 specifications the anchor Link2 and Link3 are not accessible because of the other two containers which are positioned on the top of first container and they cover those two anchors. Setting a value for the z-index style property, following the specifications, for the Link 2 and Link 3 anchors make them accessible and these links can be followed. The good browsers are Firefox v2 (and above) and Safari v3.1. The bad user agents are Internet Explorer v6 and v7 and unfortunately Opera v9.52. These last browsers don’t make any deference between the two situations, and wrongly display the positioned anchor elements.

Given Situation: HTML page was constructed using a division container which encapsulates three positioned division elements which are siblings on DOM tree, first one encapsulating three positioned anchor elements.

An overview for a dropdown JavaScript menu

Searching some information on the Internet, I landed on Sitecore Website. The layout is clean, the colors are well positioned and the information is presented in a professional way. First screenshot presents the landing main page.

Quite nice I might say. But, since the beginning they have a style issue in the presentation page. The white area over the dark grey background definitely has some text for visitors but, unfortunately the text and the background has the same color, white. Anyway, this does not have an important impact on users interaction as the menu has.
The menu, as you can see in the screenshot, it’s an unordered list with left floating elements on the top area of the page. Starting from this point, at user’s action mouse over, a sub menu is displayed, showing relevant links in site. Unfortunately it is not constructed well for all user agents and operating systems, and because the stack level for the sub menu is lower than the stack level for some heading (and other) elements, and when they are sharing the same screen area, the elements of the list in the sub menu are covered by the area of the heading element, and they are not displayed properly. The next screenshots show the undesirable behavior for the sub menu.

and another one …

and another one …

and the last one …

All screenshots present the sub menu which is not “in front of other elements” like the heading on top. The purpose for any menu is to create access to the website pages. If is interrupted in some way, many visitors will think negative about the intentions of the creator of the website.
Setting a value for the z-index style property for the container which holds the anchors of the sub menu will make it visible in front of any other page element.

Given situation: All screenshots were taken using Firefox v3.0.1 user agent on Ubuntu (Hardy Heron) operating system. The behavior described above is a particular situation for the given operating system and the user agent.

In this days a <div> element or a container with rounded corners creates a nice visual effect when navigating a website page. The effect can be done using some small size images, or with only pure and simple HTML code, without any images. If you wonder how can this be achieved I'll present a few techniques which may help you to create a box or a container with rounded corners, with some of my comments on each one.

Nifty corners

First one it's a simple and in some way useful choice of creating rounded corners using Nifty corners. The techniques involves no images just a few lines of HTML code. The idea belongs to Alessandro Fulciniti (we were borne in the same year ) and the main article can be found here. He presents very well how to make a container with rounded corners. It works like this: you have a container when you want to place some text; on top and on the bottom of the <div> element a few <b> elements appear and using some margin attributes for the <b> elements the effect is created. Very simple and efficient.

The result can be seen here.

The HTML code for this container is presented bellow.

<div id="container">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

and the CSS attributes for the elements are on the next lines:

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

It's good to note that, because <b> is an inline element, and to be able to change the margin attribute we have to make it a block element, and this is accomplished using the CSS attribute {display:block}.

Quite impressionable I can say .

Rounded corners using images for top and bottom area

This second method is, I think, the most widespread technique for creating containers with rounded corners. The idea is to generate an image for the container's background, and split it in three pieces, one for the top area, another for the bottom area and the third one for the middle section. The height size of the last one can be as small as possible

The HTML code consists in only few lines:

<div id="container">
<p class="top">some text here</p>
<p>some content here</p>
<p>some content here</p>
<p class="bottom">some text here</p>
</div>

and the styles look like:

#container{margin:20px;background:url(middle.png) center repeat-y;width:420px}
.top{background:url(top.png) no-repeat}
.bottom{background:url(bottom.png) bottom no-repeat}
p{padding:8px 10px 5px 20px}

Following this link you can see an example of rounded corners container.

It's simple and more efficient than previous one, because in this case a border can be used, and it creates a nice visual effect. Note that, all images have less than 1Kb in size. Also the top <p> element can be replaced with a heading tag, like <h3>, so the container looks more interesting.

Rounded corners using an image for each corner

This method uses for each corner a small image representing the corner itself. It is very well presented here with a lot of comments how to create it.

Let's take a look at the HTML code:

<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<!--content goes here-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

As you can see to achieve this effect this method needs eight <div> elements, which is quite consistent. This piece of code has exactly 174 chars (excluding the "content ..." text) which means that 174 bytes are "eating" the bandwidth every time the page is loaded.
The styles also are written with consistency:

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

As a comparison with the previous method, this one uses five images for creating the effect. The good thing is that they are very small in size.

Until the 'border-radius' CSS3 attribute will be implemented in web browsers' engine (you can read the specifications here at paragraph 19), one of those methods presented above is good for creating containers with rounded corners.

Another method to get rounded corners is using JavaScript (ECMAScript), but this is another story .