I’m working on a project where I’m using CSS to add a border radius and background image to an input field. Background images are supported by all browsers, but border radius is only supported by Firefox, Safari, and Google Chrome.
Monthly Archives: September 2008
Vertical Text with CSS
CSSI’m working on a new JQuery Plugin that requires the text to be vertical. This can easily be accomplished using CSS, but I found that the vertical text may appear differently in each browser depending upon the element that is used. I was able to display the text vertically in Firefox, IE8 (and IE7), Google Chrome and Safari. I looked at Opera’s CSS support and it doesn’t appear to support vertical text.
CSS: Create List Style Color Different Than List Text
CSSI wanted to use CSS to create a Unordered List where the color of the list-style (the bullet) was different than the list-item (the text). First I set the color for the Unordered List:
.certsBlock ul { color:#1AB7EA; } .certsBlock ul li { list-style:square; margin-bottom:5px; } |
Then I add an additional element inside the list-item (the text) and change it’s color:
.certsBlock ul li p { color:#fff; /*white*/ margin:0; } |
Now I create my Unordered List:
<div class="certsBlock">
<ul>
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p></li>
</ul>
</div> |
So the color of the list-style (the square bullet) will be a blue and the list-item text will be white. Easy enough.
Relative Image Paths in Drupal
DrupalI’m working on a project that uses Drupal and I wanted to add a few images to the home page.
First I created the folders files/images under the root directory. I then created the home page (Create Content->Page). When adding images to the home page, the file location is relative to the root directory:
<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft"> |
But when I created another Drupal page (a page other than the home page), the relative path for the image is different:
<img src="../files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft"> |
And when I created a page using Drupal’s Panels Module, the relative path for the image is once again relative to the root directory:
<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft"> |
Adding content to Drupal seems to be fairly straightforward, but I did struggle a bit as I tried to figure out the relative paths of images/files so I hope this helps anyone else who may be struggling.
FlashScope – A Marketplace for Flash Components
FlashI recently stumbled upon the site FlashScope.com. It is a website where flash developers can sell their flash files, components, etc. The site contains a lot of great components such as Image galleries, page templates, and games.
A few weeks ago, I started converting some of my Flash AS2 class packages to AS3. I am creating a few new Flash components/products and updating others that I created a few years ago. One of the Flash products that I am creating, I want to distribute a free version and a version that I can get paid for.
I don’t want to take the time to setup an e-commerce site (and promote it) just to sell a few inexpensive products, so I searched for an existing site that marketed Flash products. Flashscope.com seems to be the perfect site.
One other aspect of Flashscope.com that I like is that most of the products on the site are not expensive. While perusing the site, I don’t think that I saw a product that was over $30 (the average cost is probably $10). So, in the event that I don’t want to take the time to create a particular Flash product, Flashscope seems to have enough of a variety of products that I don’t have to reinvent the wheel – and I won’t have to cut deeply into my profits for a project.
Flashscope.com also has a free flash gallery that you can download. You can demo the gallery here. I think that I will be visiting the site quite often in the future.
Blueprint CSS Framework
CSSAs a freelance developer, I am always looking for more work. The other day I was reading the skills required for a particular job and it mentioned that the candidate should have knowledge of the Blueprint CSS Framework. I had never heard of the framework before and was curious as to why one would need a framework for CSS. I consider myself to be an expert CSS designer, but I decided to check out this Blueprint thingy.
The website says that by using the Blueprint CSS Framework, I can cut down my development time and it eliminates the discrepancies across browsers. Sounds intriguing. After a bit more research, I found that Eric Meyer’s Reset CSS is incorporated into the framework. I have learned a great deal about CSS from Eric Meyer over the years:
Since I was beginning a redesign for a client, I decided to use the Blueprint framework as the basis for the effort.

