I found This article but I want to use a picture in ::before and ::after content attribute, not Font Icons.
Original:
.icon-dribbble:before, .icon-dribbble:after {
content: "\e007";
}
The best I've come up so far (Which doesn't work, The pic does show up but It doesn't work as intended like in the article):
.icon-dribbble:before, .icon-dribbble:after {
background-image: url('icon.png');
background-repeat:space;
background-size: 40px 40px;
background-position:center;
top:0px;
content: "";
}
The problem is your pseudo elements, with no content in them, have nothing to size themselves to so you'll need to size them manually. Firstly, set their display value to block or inline-block, whichever suits your needs. Then set the height and width to the size of your image, which I'm guessing is 40 pixels square.
Also, you've set a value for the top property, without setting one for position. I've assumed and used absolute below.
NOTE: While the above points still apply, the below has been heavily edited from the orginal solution provided following many clarifications from the asker.
.icon{
background:#404040;
border-radius:50%;
display:block;
overflow:hidden;
height:60px;
position:relative;
text-indent:60px;
transition:background .5s;
white-space:norwap;
width:60px;
}
.icon:hover{
background:#3c9;
}
.icon::before,.icon::after{
background-position:center center;
background-repeat:no-repeat;
background-size:40px 40px;
content:"";
display:block;
height:40px;
left:10px;
position:absolute;
transition:top .5s;
width:40px;
}
.icon::before{
background-image:url('http://quran.ksu.edu.sa/images/resize3.png');
top:10px;
}
.icon::after{
/* You'll need a different image below */
background-image:url('http://quran.ksu.edu.sa/images/resize3.png');
top:70px;
}
.icon:hover::before{
top:-70px;
}
.icon:hover::after{
top:10px;
}
.icon:hover::before{
top:-70px;
}
<a class="icon" href="#">text</a>
Related
Consider this bar of buttons:
body {text-align: right;}
<button>Save</button>
<button>Cancel</button>
<button>Delete</button>
Now let's say that the last button's content changes:
body {text-align: right;}
<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>
As you can see, this change in the rightmost button triggered all buttons to its left to move.
To avoid this, I'd like the button's original size to fit the larger one of its two possible contents.
Of course, I can try to "achieve" this in many ways. The simplest and ugliest is to experiment how much width the larger content requires and "hardcode" it:
body {text-align: right;}
#del {display: inline-block; width: 220px;}
<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>
However, I consider it a non-solution because it cannot be guaranteed that this width will be the same for everyone else. If someone has a weird font, or uses text magnification, or views the site on mobile, or whatever, then I suppose setting the button's width to a hardcoded value could produce weird results.
Another way, I suppose, would be to (a) Initially put the longer text to the button (b) Get the button's width through JavaScript and save it (c) Put the actual, shorter text to the button and set its width to that value. To my intuition, however, this looks like a horrible hack and overkill.
What is the canonical solution to troubles like this?
I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:
div {
text-align: right;
}
#del {
display: inline-block;
position: relative
}
#del:before {
content: attr(data-text);
position:absolute;
left:0;
right:0;
top:1px; /*there is 1px default padding */
text-align:center;
}
#del:after {
content: attr(data-alt);
opacity:0;
}
#del:hover::before {
opacity:0;
}
#del:hover::after {
opacity:1;
}
<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>
You simply need to know which one will be the wider one to keep it in-flow to define the width and make the other one position:absolute.
You can also keep the main text inside:
div {
text-align: right;
font-size:14px;
}
#del {
display: inline-block;
position: relative;
}
#del span {
content: attr(data-text);
position:absolute;
left:0;
right:0;
top:1px; /*there is 1px default padding */
text-align:center;
}
#del:after {
content: attr(data-alt);
opacity:0;
}
#del:hover span {
opacity:0;
}
#del:hover::after {
opacity:1;
}
<div><button>Save</button><button>Cancel</button><button data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>
trying to get my code to change the background image to "color.jpg" when "spiral.svg" is being hovered over. I think im getting closer, definitely missing something but not sure what that is!
HTML
<div class ="spiral">
<img src="spiral.svg">
</div>
CSS
img {
max-width: ???;
max-height: ???;
}
.spiral:hover {
background:url('color.jpg') center;
z-index: some positive number higher than my orig background image?
}
body {
background:url('orig.jpeg') center;
z-index: -60;
}
You may try something like this.
.twitter{
display:block;
border:1px solid red;
width: 30px;
height:30px;
background-image:url(http://i.imgur.com/qM7IYaM.png?1);
background-position:-32px 31px;
transition:0.1s;
}
.twitter:hover{
background-position:-32px 63px;
}
<div href="https://twitter.com/georgevere12" class="twitter">
</div>
looks like this is not possible with just CSS/HTML however this was the best link i found using a tiny bit of jquery https://stackoverflow.com/a/19770298/5225450
I have a gallery of images with links.
Edit: Here's the code I have to work with:
<div class="gallerypagetabs"><img alt="Free Victorian Purse Pattern" src="https://lh3.googleusercontent.com/-m4y6eS2KGRQ/Ug7TKD3sbYI/AAAAAAAAHNc/6qoeuGedjOY/s200-c/free-victorian-purse-pattern-1.jpg"><br>Free Victorian Purse Pattern<img alt="Natural Form Victorian Overskirt" src="https://lh3.googleusercontent.com/-ZrTDaXEOiiU/US__mPzz3dI/AAAAAAAADWQ/eBm3tO3P8oI/s200-c/IMG_5482%255B6%255D.jpg"><br>Natural Form Victorian Overskirt<img alt="Truly Victorian TV221 1878 Underskirt Pattern Review" src="https://lh4.googleusercontent.com/-GmrRTxJ5NGY/UKfO_SQzymI/AAAAAAAAAHA/A9qx6czpyJk/s200-c/Truly-Victorian-TV221-1878-Tie-Back-%255B1%255D%255B4%255D.png"><br>Truly Victorian TV221 1878 Underskirt Pattern Review<img alt="Truly Victorian TV121 Petticoat Pattern Review" src="http://lh4.ggpht.com/-qTsclIxCTKY/UH7fK3jqKII/AAAAAAAAodI/2GaQOVrGuuA/s200-c/Truly%252520Victorian%252520TV121%2525201879%252520Petticoat%252520with%252520Detachable%252520Train%25255B6%25255D.png?imgmax=800"><br>Truly Victorian TV121 Petticoat Pattern Review..ad naseum..</div>
CSS:
.gallerypagetabs a,.gallerypagetabs p{
float:left;
font-size:.80em;
height:250px;
padding:10px;
text-align: center;
width:200px
}
What I'd like to do is show a transparent image with stars on them when someone hovers over the image. So if a person hovers over the Free Victorian Purse Pattern image, they'll see an image of - let's say - five stars indicating that the pattern has received a rating of 5 out of 5 stars from me.
I've tried both of the following with no luck. The code shows the image on hover, but it shows at the bottom of the image instead of overlapping it:
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit
}
AND
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
z-index:10
}
Any advice? I don't want to use Javascript, and I want to add as little coding to the HTML as possible cannot change the html other than adding another class or id at the beginning of it. It all has to be done through CSS. Here's how I'd like it to look. Thanks for your help!
The code that WORKS! (Thanks cimmanon!)
(Changed gallerypagetabs to gallerypatterntab to isolate the class from the rest of the blog. Screenshot from Blogger - yeah Blogger likes to rewrite things like quotations)
You can use a pseudo element for this purpose. No need for extra markup.
http://cssdeck.com/labs/anxnrkhr
<img src="http://placekitten.com/100/100" />
a {
position: relative;
display: inline-block;
}
a:hover:before {
content: '';
display: block;
background: rgba(255, 0, 0, .5); /* your background */
width: 20px; /* image width */
height: 100px; /* image height */
position: absolute;
top: 0;
right: 0;
}
This is untested, but I think you want something like:
.gallerypagetabs a, .gallerypagetabs img{
position:absolute;
z-index:1;
}
.gallerypagetabs a:hover{
z-index:2;
}
.gallerypagetabs{
position:relative;
}
This is untested, but hopefully gives you an idea about how to realize the effect you are after.
Putting the image on the anchor's background isn't going to work because the image will hide it.
You can add an element containing the stars in an absolute position inside the anchor:
<a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html">
<img src="https://lh3.goog...An-purse-pattern-1.jpg" alt="Free.. Pattern">
<br>
Free Victorian Purse Pattern
<i class="stars"></i>
</a>
And a CSS similar to this (all numbers can vary):
a {
position: relative;
}
.stars {
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
width: 20px;
height: 80px;
position: absolute;
right: 10px;
top: 10px;
display: none;
}
a:hover .stars {
display: block;
}
P.S - <br /> is supposed to be self-closing. And it's better not using it only to make a new line after the image, but maybe give the image this style:
a img {
display: block;
}
I'm trying to get different images to show up for different states of an anchor tag but I can't get it to work. Any ideas on what I'm missing here?
Here's the image => won't let me post images but it's 480x30 pixels
Here's the CSS;
a.image {
background-repeat:no-repeat;
color:white;
display:inline-block;
width:160px;
height:30px;
margin-left:-12px;
margin-top:16px;
padding-top:6px;
text-align:center;
font-size:14px;
font-weight:bold;
cursor:pointer;
text-decoration:none;
}
a.image:link {
background-image:url('images/buttons.png');
background-position:0px 320px;
}
a.image:visited {
background-image:url('images/buttons.png');
background-position:0px 0px;
}
a.image:active {
background-image:url('images/buttons.png');
background-position:0px 160px;
}
Here's the HTML;
<a href='ifp.asp?width=1512&ProjectGroupID=&ProductID=536&model=Addison 536&plan=Lower Level Plan' class='image'>Lower Level Plan</a>
I currently get only "Lower Level Plan" in white text. Thanks!
You are changing your background-positions on the y-axis when you should be changing them on the X-axis if your sprite is 480 W x 30 H. You should also be using -X dimensions to indicate the sprite needs to be shifted in the negative direction (to the left) So you can rewrite like this:
a.image:link {
background-position:-320px 0px;
}
a.image:visited {
background-position:0px 0px;
}
a.image:active {
background-position:-160px 0px;
}
Note that I also removed the background-image declaration here, as you can simply move this up into the a.image style block.
I am working with an existing piece of CSS code that looks like this (excerpted from a much larger body of code):
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
/* zoom:1 */ /* IE Sheet */
}
/* a panel container */
.apl_widget_fourLevel .apl_widget_level {
float:left;
position:relative;
overflow:hidden;
text-align:center;
width:102px;
height:150px;
margin:0 1px 0 0;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level {
height:auto;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level {
height:auto;
width:90px;
}
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected {
width:102px;
}
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
position:absolute;
top:20px;
left:0;
width:100%;
margin:0;
color:#555;
font-weight:normal;
text-transform:uppercase;
font-size:100%;
line-height:1.0em;
z-index:1;
}
/* offset for mini labels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_label {
margin-top:20px;
font-size:85%;
}
/* label cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
margin-top:0;
font-size:100%;
}
/* the value displayed in the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_value,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
position:absolute;
top:45px;
left:0;
width:100%;
margin:0;
color:#fff;
font-weight:bold;
font-size:28px;
line-height:1.0em;
z-index:1;
}
/* offset for mini value */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_value {
margin-top:15px;
font-size:24px;
}
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level .apl_widget_value {
margin-top:3px;
font-size:20px;
font-weight:normal;
opacity:0;
-moz-opacity:0;
-webkit-opacity:0;
filter: alpha(opacity=0);
}
/* value cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
margin-top:0;
font-size:28px;
}
/* range values smaller */
.apl_widget_fourLevel.apl_widget_fourLevelRange .apl_widget_level .apl_widget_value {
margin-top:7px;
font-size:15px;
}
.apl_widget_fourLevel .apl_widget_value a {
color:#fff;
}
/* supplemental value beneath the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore {
position:absolute;
bottom:0px;
left:0;
width:100%;
color:#0072ad;
font-weight:bold;
font-size:28px;
z-index:1;
}
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore a {
color:#0072ad;
}
/* low values will be lighter color */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore,
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore a {
color:#30a2dd;
}
/* the image container element */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel {
overflow:hidden;
width:100%;
height:135px;
position:relative;
}
/* the panel image itself */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel img {
position:absolute;
top:0;
left:-5px;
margin-top:-150px;
}
/* Individual Level image offsets */
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img {
left:-5px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level2 .apl_widget_panel img {
left:-105px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level3 .apl_widget_panel img {
left:-205px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level4 .apl_widget_panel img {
left:-305px;
}
/* mini panel offsets */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_panel img {
margin-top:-300px;
margin-left:-6px;
}
/* reset image offset via margin for highlighted/selected style */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelSelected .apl_widget_panel img {
margin:0;
}
My major problem with this is the complexity: every rule has 3-5 selectors on it, making it really hard to figure out which rule applies. There are 25 rules here for styling four buttons with text. It can't be that hard!
Some background: this CSS styles a widget that shows four bitmapped images, one of which is selected, from a single bitmap using CSS sprites. Unselected images come from one row of the large bitmap and the image in the selected state comes from another row. The selected image is put into a box that is wider and taller than the boxes of unselected images.
So is there a program that will simplify this to something cognitively manageable? Is there a tool that can identify which values are unnecessary because they are replaced by more specific selectors? Are there best practices for dealing with CSS so that you don't get unnecessarily selective paths?
Update: 2010-08-31 12:25
So I looked into less as a way of conceptualizing the CSS code. And because my code isn't in less, I looked up css2less. Here is an excerpt of what css2less produces on the code in question:
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
.apl_widget_level.apl_widget_level1 {
.apl_widget_panel {
img {
left:-5px;
}
}
}
.apl_widget_level.apl_widget_level2 {
.apl_widget_panel {
img {
left:-105px;
}
}
}
.apl_widget_level.apl_widget_level3 {
.apl_widget_panel {
img {
left:-205px;
}
}
}
.apl_widget_level.apl_widget_level4 {
.apl_widget_panel {
img {
left:-305px;
}
}
}
....
}
So here's the thing: apl_widget_levelX are actually unique. I think a good tool could generate this:
img#apl_widget_level1 { left:-5px; }
img#apl_widget_level2 { left:-105px; }
img#apl_widget_level3 { left:-205px; }
img#apl_widget_level4 { left:-305px; }
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
....
}
Similar comments for the selected/unselected elements.
I like where the answers are going but I am looking for tools to make my life easier. The full CSS code in this file is 2500 lines and the entire suite is 11000 lines.
Update: 2010-09-01 09:50
This is what I turned it into by hand:
ul.apl_widget_content {
width: 492px;
height: 140px;
position: relative;
}
ul.apl_widget_content li {
background: url(/home/hbrown/tmp/widget_fourlevel_1.png) no-repeat;
list-style: none;
display: inline;
position: absolute;
text-align:center;
text-transform:uppercase;
}
#apl_widget_level1 {
left:5px; top: 0px;
background-position: -13px -300px;
width: 86px; height: 133px;
}
#apl_widget_level2 {
left:105px; top: 0px;
background-position: -113px -300px;
width: 86px; height: 133px;
}
#apl_widget_level3 {
left:205px; top: 0px;
background-position: -213px -300px;
width: 86px; height: 133px;
}
#apl_widget_level4 {
left:305px; top: 0px;
background-position: -313px -300px;
width: 86px; height: 133px;
}
#apl_widget_level1s {
left:5px; top: 0px;
background-position: -5px 0px;
width:102px; height: 133px;
}
#apl_widget_level2s {
left:105px; top: 0px;
background-position: -105px 0px;
width:102px; height: 133px;
}
#apl_widget_level3s {
left:205px; top: 0px;
background-position: -205px 0px;
width:102px; height: 133px;
}
#apl_widget_level4s {
left:305px; top: 0px;
background-position: -305px 0px;
width:102px; height: 133px;
}
div.apl_widget_label {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.selected .apl_widget_label {
padding-top: 15px;
}
div.apl_widget_value {
font-size:24px;
margin-top:10px;
}
.selected div.apl_widget_value {
margin-top:15px;
}
.apl_widget_value a {
text-decoration:none;
color:#FFF;
}
Previously 175 lines. Now 75 lines. Most of the code (40 lines) does the CSS spriting.
Update 2010-09-01 11:30
HTML now looks like:
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div class="apl_widget_label">Level </div>
<div class="apl_widget_value">1</div>
</li>
<li id="apl_widget_level2">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">2</div>
</li>
<li id="apl_widget_level3s" class="selected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">3</div>
</li>
<li id="apl_widget_level4">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">4</div>
</li>
</ul>
HTML previously looked like:
<div class="apl_widget_strand_fourLevel apl_widget_fourLevelMini">
<div class="apl_widget_content">
<div class="apl_widget_level apl_widget_level1 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">1</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level2 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">2</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level3 apl_widget_levelSelected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">3</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level4 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">4</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
</div>
</div>
The following are just comments; It's hard to give definitive answers to questions like this, esp. when the HTML structure is not available.
The first thing that really got me was the long class names. When you've got so much repetition within the name of the classes, I think you're doing something wrong. Names like
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img
Really should be shortened to (something like):
.apl_widget .fourlevel .panel img
Especially when your selectors are basically 90% repetitive, like
.apl_widget_level.apl_widget_level1
There's just no point for this! In CSS, the cascade guarantees inheritance, so adding a prefix too all your class names is just necessary. Surely if you've gotten to the point of indexing your class names, its time to swap them out for ids, like
#level1
It may seems small, but it really does make CSS more maintainable if you've got selectors that are compact and less repetitious - at least you won't be spending so much time scanning through selectors.
If the HTML structure of the widget is the same throughout the code, then you can actually swap out some of the classes for elements. It will of course reduce style reusability, but given that widgets are often do not share the same structure and design as the rest of the page, it should be possible for simpler widget styles to skimp on classes. Selectors like (say)
.profile img
would certainly be better than to just give that img a class - its both immediately obvious what you're doing, and easy to maintain at the same time.
Something else you might want to do is to only code for special cases, like this very simplified case
a {
color: white;
background: #666;
text-decoration: none;
}
a.special {
color: #B8E9FF;
}
a.brilliant {
color: #FFAFAF;
}
Also, remove the repeated classes that stays the same within each case. Again, use the Cascade to its full potential.
3-5 selectors max is not unusual. 3-5 for every one of them is, though. The CSS selectors should logically go from simple to complex, as more cases are added. Thus, try finding the base of the widget, define a default, and code your way up.
The code snippet itself is not too bad except for the inclusion of too many and overly long class names. Rewriting from the bottom up though can often lead to optimizations, esp. if the requirements of the project has changed since the last developer (We don't need to support IE6 anymore, hurray!) But again, without seeing the structure it's hard to make definitive solutions.
Based on the posted HTML I'd suggest following changes:
The inner classes apl_widget_label and apl_widget_value are unnecessary and can simply replaced with unique elements (that is unique within the li). This may make the selectors slightly longer, but much better structured and more readable. Also the div around the link is unnecessary as the link can be styled directly.
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div>Level </div>1
</li>
...
with
.apl_widget_content li div {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.apl_widget_content li.selected div {
padding-top: 15px;
}
.apl_widget_content li a {
font-size:24px;
margin-top:10px;
text-decoration:none;
color:#FFF;
display: block;
}
.apl_widget_content li.selected a {
margin-top:15px;
}
You also can move the top, width and height properties in the level rules to the ul.apl_widget_content li(.selected) rules:
ul.apl_widget_content li {
...
top: 0px;
width: 86px;
height: 133px;
}
ul.apl_widget_content li.selected {
width:102px;
}
#apl_widget_level1 {
background-position: -13px -300px;
}
It would be great if you could get rid of the "selected level" IDs (the ones ending with s), but I can't think of a reasonable way which still supports IE6.
I just see that you have set the li to display: inline while keeping block elements insde them. You'll need to be careful with that, because despite being technical correct CSS its exact rendering is not really defined. You may consider display: inline-block or float: left instead.
If it's just for four buttons, I'd pull the page up in a modern browser and use a development toolkit (Firebug in Firefox, Dragonfly in Opera, the WebKit developer tools in Safari/Chrome) to inspect the buttons in question and see what the effective styles are on each.
You might want to go over this article I read not too long back, it has a really good overview of the pro's and con's of organizing your css. I'd also take a look at the bottom of the article it has some links to some more information.
From the looks of things your widget styles did seem to go a little overboard with the classitis, but at least its documented, I can't count the number of times I've seen undocumented css classes.
i think that you need to change the name of your clases, i see that you are using ".apl_widget_label" for almost everything and styling the element depending on the selectors.
for example:
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
why not create another class called "mini-display" and then your element would be like:
<div class=".apl_widget_label mini-display">..</div>
and your css would be:
.mini-display{..}
if you don't like it... i've seen some people that creates the classes like this
<div class="left margin-auto big red ...">..</div>
where each class changes something specific on the element (i.e left => float:left;). And they have like a library of classes that they always use.