CodePaste.NET - CSS for image - should be inline but with width

Subscribe

Discuss

What's new

What is it

New Snippet

Recent Snippets

Recent Snippets

My Snippets

My Snippets

Web Code

Search Snippets

Search

Sign inor Register

Language: CSS

CSS for image - should be inline but with width

340 Views

Copy Code

Show/Hide Line Numbers

.smallprogress,.smallprogressright
{
    width: 16px;
    height: 16px;
    background-image: url(images/loading_small.gif);
    background-repeat: no-repeat;        
    display: inline-block;    
    xdisplay: none;    
}
.smallprogressright { float: right }
 
 
/*
Usage:
Some text. <span class="smallprogress"></span> 
*/

by Rick Strahl
September 14, 2009 @ 2:21pm

Tags:

CSS, inline-block, inline

Description:

This works in getting the icon to display inline and sized however it would be nice to have it invisible as well so jQuery(el).show()/hide() still works.

Originally I always used display: none because initially the progress display is hidden and made visible when needed only.

The idea is to avoid having to embed images and making it real clean to have small icon images next to controls.

Add a comment

Report Abuse

brought to you by:

West Wind Techologies

If you find this site useful and use it frequently please consider making a donation to support this free service.

Donate