What are we facing?

I want to manage the font size using CSS instead of the size attribute in the font tag, but at the same time I want to keep my pages looking the same.

The solution

If you have used font sizes in the 0 to 6 range, you are on the right spot, your pages are going to render identical using CSS, As you can see in the table below:

The font sizes that fall out of this range need some extra work to get them to look the same in CSS, If you need to get them to work you can play with the relative values ‘smaller’ and ‘larger’.

Some external resources

• http://www.w3schools.com/CSS/pr_font_font-size.asp
• http://css-discuss.incutio.com/?page=FontSize

How can I entirely remove that Topic Bar (some folks call it "toolbar") about US Election 2008 from my Twitter page?

Possibly juggling with ways for setting the bases for a monetization model, Twitter launched the following Topic Bar about US Election 2008

Even if I click the "X", an E08 button remains.

The Solution

First of all, we have to recognize the piece of HTML that is displaying the Topic Bar:

<h1 class="elections-promotion"> ... </h1>

Gotcha!

The first attempt is a cross browser solution using your browser's user style definition. Take a look at this previous post about how to do find the user style for Firefox and Internet Explorer, or this for Opera, or this one for Safari

Now just add h1.elections-promotion { display:none !important } to your user style. No more Election Bar!

The second attempt consists in using the very useful Firefox addon called AdBlock Plus:

1. Install AdBlock Plus:in Firefox
2. Go to "Tools" menu option, then AdBlock Plus...
3. Click in Add Filter ...
4. Paste the following code twitter.com#H1(class=elections-promotion)
5. Enjoy a clean Twitter page!

Some external resources

• How do I remove the Twitter Election Toolbar?
• How to Remove the Twitter ‘Election’ info

What are we facing?

I want to reference a word or phrase by suppressing some characters or syllables, and in that way provide very useful information to the viewers, the browsers, search engine indexers, spell checkers, etc..

The Solution

The usage of the tag abbr denotes the use of a shorted word or phrase, but the real importance is that it's the semantic way for marking up abbreviations.

You can also use the attribute title to specify the whole word or phrase that the abbreviation refers to. With this some browsers must show over the abbreviation the specified text and this will help you to increase your web page accessibility.

Examples.

Some external references

• HTML ABBR TAG (w3schools.com).
• Mastering Text.

What are we facing?

I want the simplest solution to have a drop shadow effect on an image using just CSS. What is the shortest piece of code for drop shadow?

The Solution

The shortest piece of code for making a drop shadow is found in the book CSS Mastery of Andy Budd et al.

The shadow is a constructed via an outer "div" element wrapping the image. For example:

<div class="img-wrapper"><img src="tiny-logo.gif" alt="Aggiorno" /></div>

The tiniest CSS code you need to do drop shadow is:

.img-wrapper {
       background: url("shadow.png") no-repeat bottom right;
       clear: right;
       float: left;
.img-wrapper img { margin: -8px 8px 8px -8px; }

Displaying the pretty drop shadow you wanted:

Some external references

• Easy CSS drop shadows
• Simple fluid drop shadows

What are we facing?

I have forms with lots of fields and controls to request information from users. I want improve my forms by creating groups of related elements.

The Solution

The FIELDSET HTML element allows the grouping of related form elements. It is a nice alternative of a TABLE or DIV tag since it is created for this specific propose. The optional LEGEND tag specifies a description of the grouping.

Example:

<form action="InsertInfo.aspx">
     <fieldset>
        <legend>Personal information</legend>
        Name: <input type="text" />
        <br />
        Age: <input type="text" />
        <br />
     </fieldset>
     <fieldset>
        <legend>Subscription information</legend>
        <input type="radio" /> Year <br />
        <input type="radio" /> Six months <br />                       
        <br />
     </fieldset>
     <fieldset>
        <input type="submit" value="Submit"/>
     </fieldset>
</form>

Some external references

• HTML <fieldset> tag
• HTML Techniques for WCAG20: Grouping form controls
• Styling fieldset elements with CSS

What are we facing?

I liked the post about Rollover Image for links using pure CSS but I would like to have just one image, not two: one for the "regular state" and another for the "hover state". There could be a delay between loading the first image and the second image, causing flickering. Is it possible doing that with just pure CSS? Am I being too demanding?

The Solution

Fortunately, CSS provides the power to do that. It is called the Pixy-style rollover. Let's use the same example of the previous post.

Here is the same image but merged vertically:

Using the following link code:

<a href="http://www.aggiorno.com/try.aspx" id="pixy"><span>aggiorno</span></a>

And using the following CSS

  a#pixy {
       background:transparent url(“Aggiorno-sprite.jpg”) no-repeat scroll center top;
       display:block;
       height:110px !important; 
       width:110px;
  }
  a#pixy span { display:none; }
  a#pixy:hover { background-position:center bottom; }

You then will get the link showing the top part of the image when regular state. In hover state, the bottom part is displayed. Hover it and believe your eyes:

Some external references

• CSS Sprites: Image Slicing’s Kiss of Death

What are we facing?

I want to publish source code listings in my website. These listings should be easy to read, visually attractive and I don’t want to spend a lot of time formatting them.

The Solution

Using a syntax highlighting library can save you lots of time while also delivering very nicely formatted results.

There are several options to choose from, ranging from server-side options like Actipro’s CodeHighlighter(ASP.NET) or Javascript based options like Google’s SyntaxHighlighter.

Formatting code using these libraries is very easy, for example, to present a snipped of C# code you only have to type the following:

1. Reference the library

<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css"/>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>

2. Annotate the element that contains the source code listing with the programming language name:

<pre name="code" class="c-sharp">
   public static int fact(int v) 
   {
      if(v == 0) 
      {
         return 1;
      }
      else
      {
         return fact(v-1)*v;
      }
   }
</pre>

3. Invoke the Syntax Highlighting script:

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

The final output looks like this:

Some external references

• SyntaxHighlighter: Free syntax highlighter written in JavaScript
• Actipro CodeHighlighter - ASP.NET Control
• GeSHi: Generic Syntax Highlighter
• GNU Highlight

What are we facing?

I want to achieve a button like effect for some of my links. For instance, it's a matter of positiong the "Download" link more prominent and catchy. I want that link to behave like a button when I hover it. Another option is to have a clickable image with change a little bit when hovering. Of course, I want that effect made entirely in CSS. Is it possible?

The solution

Yes, there is a way, let's based the following example of rollover with images on the Stuart Robertson's post about it.

Choose a image for the regular state of the link (no hovering state):

Just for simplicity, do a silly change to that image to produce a rollover image

Build the link wiht a "span" element with a meaningful description inside. Never forget those image based browsers.

<a href="http://www.aggiorno.com/try.aspx" id="rollover"><span>aggiorno</span></a>

We are almost there. Now the following style for achieving the rollover effect:

  a#rollover { background-image:url("Aggiorno-regular.jpg"); 
               height: 110px; width:110px; display:block; }
  a#rollover span { display:none; }
  a#rollover:hover { background-image:url("Aggiorno-rollover.jpg"); }

This style set background image for the regular state of the link, hides the span content and shows the rollover image when hovering. Our baby now looks like (hover it):

Some external references

• CSS rollover buttons
• Roll Over, Rollovers -- CSS Style by Eric A. Meyer

What are we facing

I want to provide my links with tooltips, those little boxes that pop up when users hover the mouse over the links. How do I implement tooltips with pure CSS?

The Solution

The trick is made by inserting the text for the tooltip in a "span" element inside the "a" element. Then, use some CSS to hide it and to show it as a pop up when you hover. The good thing about this technique is that the tooltip text is inside the HTML markup, hence is visible to web crawlers. Let's see some examples.

A pretty good CSS code can be found in Pure CSS Tooltips, which gives the following style

a.info{
     position:relative; /*this is the key*/
     z-index:24; background-color:#ccc;
     color:#000;
     text-decoration:none} 
a.info:hover{z-index:25; background-color:#ff0} 
a.info span{display: none} 
a.info:hover span{ /*the span will display just on :hover state*/
     display:block;
     position:absolute;
     top:2em; left:2em; width:15em;
     border:1px solid #0cf;
     background-color:#cff; color:#000;
     text-align: center}

Let's see how it looks (hover the mouse over the links):

• homeIn this page you will have to understand and get in love with aggiorno in just five seconds
• productsTake a look at the Aggiorno software, the web productivity you always wanted
• downloadGet a fully featured demo version for 30 days!
• buyYou know you need Aggiorno, save all that maintenance time
• aggiorningsWhat Aggiorno can do for you?
• blogAll that valuable content for you!
• contactWe are listening, please talk to us

If you want a simpler way to do it, Kollermedia.at provides a shorter code

a.info2 span
  {
      display: none;
      padding: 2px 3px;
      margin-left: 8px;
      width: 130px;
  }
  a.info2:hover span
  {
      display: inline;
      position: absolute;
      background: #ffffff;
      border: 1px solid #cccccc;
      color: #6c6c6c;
  }

Let's see how it looks (again, hover the mouse over the links):

• homeIn this page you will have to understand and get in love with aggiorno in just five seconds
• productsTake a look at the Aggiorno software, the web productivity you always wanted
• downloadGet a fully featured demo version for 30 days!
• buyYou know you need Aggiorno, save all that maintenance time
• aggiorningsWhat Aggiorno can do for you?
• blogAll that valuable content for you!
• contactWe are listening, please talk to us

Some external references

• Pure CSS Popups by Eric Meyer

What are we facing?

I want to help my website users with orientation on links navigation. I want to provide them visual clues of links already visited by them so they don't do unnecessary backtracking. Can I do that with CSS?

The solution

Before going ahead, please visit this link and return back to mark as visited the following links to that same page.

A first option is using the "radical" sign (√). The following example (thanks Mike Davidson) explains it:

a:visited:after {     
     content: "\00A0\221A";     
     font-size: 75%;
  }

How it looks.

A second option is a really simple implementation. The following code draws a line through the visited links

a:visited { text-decoration: line-through; }

How it looks.

A third option is using coloring the visited links while hovering in order to avoid cluttering in your page. For instance:

a:visited:hover {  color: red; }

How it looks (hover over me).

Some external references

• The ways to style visited links
• Control Visited Link Colors With CSS