CSS / 3 columns / header / footer

no javascript, no table, no image

Applying a style to the tag <span>.

The menus of this page use an empty <span> tag which has been styled. Many other tags can be used.
As usual, cross browser compatibility is quite difficult to achieve. Konqueror, Safari, IE Mac or Opera until version 7.5 do not support the styles out of a link.
HTML tidy will display a warning as the tag is empty. We can insert &nbsp;, but MSIE may react unexpectedly.
Once a DOCTYPE has been chosen, margins and paddings have been set, Mozilla and Opera usually have quite the same rendering of CSS rules.
Thus we will need a few filters or "hacks" for MSIE users.

The basics

We will use a style for all the spans:

#maincol .content span {background-color: #D2E1FB;padding: 0 .5em;}

and make it compatible with MSIE:

* html #maincol .content span {display: block;position: absolute;}

In this context, the tag has no height, therefore we must set the container height for MSIE.

div.wrap {height: 1.5em;}

The result:

 
with margin:0 .5em;
 

Also useful

border: .2em solid #0A00B0;

 

border-left: .5em solid #0A00B0;padding: 0 .5em 0 0;

 

Incompatible styles

In this context only MSIE applies width.

An empty <span> in a link

<span> is much more useful in a link.

<a href="#"><span></span> Link<span></span></a>

Applied as it is on the right and on the left:

Link

with MSIE in this context, there is a margin problem:

Link

<a style="padding-left:1em;" href="#"><span style="margin-left:-1em;"></span> Link<span></span></a>

Getting the same as the right menu

This code is not compatible with MSIE 5

Our HTML code:

<div class="menu_right">
<a href="#">
<span class="left"></span>
Link
<span class="right"></span>
</a>
</div>

The global setting of <span> must be reinitialized for our menu

#maincol .menu_right span {padding: 0;}

Here is the style for link containing our two tags:

div.menu_right a {
position: relative;
text-align: center;
text-decoration: none;
background-color: #D2E1FB;
color: #0A00B0;
font-family: "courier new", "sans serif";
display: block;
width: 9em;
height: 1em;
font-size: .9em;
padding: 5px;
border-bottom: 1px solid #0A00B0;
}

Then here is the style which is common to our two tags:

div.menu_right a span.left, div.menu_right a span.right {
position: absolute;
top: 0;
width: 0;
height: 0;
overflow: hidden;
border-top: 10px solid #E9F5FE;
}

Then let's style the one on the left

div.menu_right a span.right {left: 9em;border-left: 10px solid #D2E1FB;}

Then the right one

div.menu_right a span.left {left: 0;border-right: 10px solid #D2E1FB;}

MSIE 5.5

As usual MSIE 5.5 needs width hacks:

/* start IE_Mac hide\*/
* html div.menu_right a{
width:auto;/*value for MSIE 5.x*/
}
* html div.menu_right a/**/{
width:/**/9em;/*value for MSIE 6*/
}
* html div.menu_right a span.left, div.menu_right a span.right{
width:1em;/*value for MSIE 5.x*/
}
* html div.menu_right a span.left, div.menu_right a span.right/**/{
width:/**/0;/*value for MSIE 6*/
}
/* end IE_Mac hide*/


The next pages will deal with the other methods to apply a style and animate a link.

visits: 353542
at 18:46:29 utc+1 on Mon Feb 20, 2017