Category: CSS

CSS · Drupal · Drupal 6 & Drupal 7 · Drush · Web Design

drush cc Not Showing All Options (only showing 2 options cancel and drush)

Posted on by Paul Leasure

Trying to clear your Drupal site chache with drusch cc or drush cc all?
Drush should out put a list in response that looks like this:

But instead, you may see something that looks like this:

Chances are you are not in the document root of the Drupal site on which you are trying to clear the cache.

CSS · Frontend · How To · Web Design

CSS3: Drop Shadow on an Image

Posted on by Paul Leasure

Drop shadows are a nice way to add dimension to a site. Creating them used to be a real task. Combining multiple divs and floats and trickery with CSS that were basically hacks. Not to mention how difficult it was to accomplish creating shadows programmaticlly. Well, making a drop shadow on an image is easy now thanks to CSS3!

Enter the box-shadow element! The box-shadow element is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. The syntax of the box-shadow CSS3 element is as follows:

box-shadow: h-shadow v-shadow blur spread color inset;

The box-shadow element is a comma separated list of properties that effect the position and size and color and even the opacity of the shadow. Note the inset perimeter. That controls wether the shadow is inside of or outside of the object getting the shadow.

CSS3 image drop shadwo

The first to parameters control the horizontal and vertical position of the shadow.

Next is the optional blur distance measure followed by the optional spread (or size) of the shadow.

The next paramiter is the color parameter. Here is where you can use the new CSS3 rgba(0, 0, 0, 0.5) element. With the rgba(0, 0, 0, 0.5) element you can control the opacity as well. Or you could use the color number here if you like without opacity.

OK, well, enough talk. Go try it out!

CSS · Frontend · Uncategorized · User Iterface Design

Form Input Not Working; A Misplaced “float” Declaration in CSS Can Be to Blame for Broken Form Input

Posted on by Paul Leasure

Just a note in case your pulling your hair out. If you have a form that for all intents and purposes SHOULD be working but does not allow user input in a text field then perhaps this cold be your problem.

Try taking a look at the CSS on the element following the form. In my last encounter with this problem, it was a <p> that followed a form within a div.

The <p> had  a CSS declaration of float:left and was inside a div that was floated to the right.

The followinghad 2 declarations:

p {
float:left;
clear:left;
}

To my surprise, this is what broke the form inputs -weird.

I fixed the <p>’s CSS to declare clear:left; and the form straightened back up.

So if you’re having trouble with form inputs and you have narrowed it down to CSS, I hope this helps.

Please feel free to make any comments or even give an explanation.

AJAX · CSS · Frontend · MySQL · Web Design

Screen shot of the up and comming CPI Data Panel

Posted on by Paul Leasure

I havn’t posted in few weeks because I have been very busy with several projects. One of the projects I am particularly excited about the CPI panel. The Cpi panel is new “back end” for LoveFineArt.com. IT used to be that each and every product would take about 20 minuets to enter. With this new panel (incorperating secure AJAX), The products can be entered as fast as the site owner can type!

Here is a screen shot of the new back end.

Screen shot of the up and comming CPI Data Panel

I have also been busy learning the Drupal platform. AS I become more knowledgeable there will be posts and perhaps a special section on this blog devoted to cool new drupalistic methods and problem solving.

AS always, I invite you to leave a coment or sugestion or critisizm.

CSS · Frontend · User Iterface Design · Web Design

Hack for IE7 with ‘Leak’ in Select Multi

Posted on by Paul Leasure
Select element set to multi leaks in ie.

I do not often have a use for the select element in front end web design. In this case, however, I was creating a user interface for a back end product control panel. It needed to be very compact with a lot of options packed into a small place. I ran into a problem when I needed to group four select elements together. The select elements all needed to be set to multi. Everything was fine with the exception of Internet Explorer 7 (big surprise!). IE would “leak” the contents of the select element outside of the element spilling into the surrounding div whenever it was floated in a div. I have not yet discover the exact conditions under which this happens as I was in a time crunch.

No more leak from the select element!
No more leak from the select element!

I spent about 20 minuets searching the Internet for someone who had come across the same problem but found nothing. So I thought I had better post how I decided to deal with this. Before I go on, I would like to mention that I did find a very good post by Nicholas Rougeux, called “Check it. Don’t select it”  . It is worth a look as it may be a better alternative in your case.

Cutting through all the “chase”, it boiled down to a rather simple fix. The only thing I could do was to encase the select multi in a div that had overflow:hidden. Note that this is not the setting of overflow:hidden on the select element set with multi. The overflow:hidden setting is on the div that immediately surrounds the select element set to multi. In this way, the garbage data that ie was leaking out from the element would be hidden away from view.

So, for what it’s worth, I hope this little post will help someone out there who is suffering from the woes of Internet Explore. Oh, and if you have any answers or better solutions, by all means contact me. I’m happy to share and be enlightened.