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.

Read the rest of this entry »

I’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.

Read the rest of this entry »

I 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.

As 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.

Read the rest of this entry »

I was demoing a recent web design to a client when I noticed that the menu items were not displaying correctly. The client uses ie7. While Firefox is my primary browser, I usually test my design in IE and Safari (and tweak if necessary). I didn’t this time because I did not think there was a difference for the CSS styles that I was using. I was wrong.

I usually use li elements for menu items:

<ul>
	<li><a>Home</a></li>
	<li><a>About</a></li>
	<li><a>Contact</a></li>
</ul>

To create horizontal menu items, I change the display attribute to inline in my CSS file.

li {
    display:inline;
}

For this particular design, I added a vertical divider (image) between each menu item. In order to do this, I used the inline-block attribute.

#menu li {
	display:inline-block;
	margin:0;
	list-style:none;
	width:122px;
	height:45px;
	background-image:url(images/menu_divider.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:center;
	padding:0;
}

This looks fine in Firefox and Safari, but IE7 (and IE6) only supports inline-block on elements with natural display: inline. See CSS Display declaration.

I found a hack. Adding zoom: 1 and *display: inline will make IE7 display the li’s as inline-block.

#menu li {
	display:inline-block;
	margin:0;
	list-style:none;
	width:122px;
	height:45px;
	background-image:url(images/menu_divider.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:center;
	zoom: 1;
	*display:inline;
	padding:0;
}

Next time, I will remember to test my designs in the major browsers before it is shown to the client.

I have recently discovered two ways to use CSS to place one image on top of another. I am working on a photogallery management plugin (JQuery) and I wanted to add an delete image to the bottom right of each thumb image. The user will be able to click on the delete image to delete the thumbnail. The image below displays how I want the thumbnail to appear:

<img class="alignnone" title="Delete Example" src="http://grasshopperpebbles.com/images/posts/delete_example.png" alt="" width="118" height="85" />

The key to both approaches is to place the first image as a background image of a container.

.thumb {
     float:left;
     width: 100px;
     height: 100px;
     background:url(images/thumbs/pic1.jpg);
}

My first approach for styling the second image was to set the ‘background-position’ to ‘bottom right’.

.thumbDelete {
     width: 100px;
     height:100px;
     background:url(images/delete-24x24.png) no-repeat bottom right;
}

While this positioned the delete button where I wanted, because the dimensions are the same as the thumbnail image, the entire image became clickable (not just the delete image).

So my next approach was to float the delete image and set the margin-top to 50%:

.thumbDelete {
     float:right;
     width: 24px;
     height:24px;
     background:url(images/delete-24x24.png) no-repeat;
     margin-top:50%;
}

This placed the delete image on the bottom right (and only the delete image is clickable).

Creating the HTML is the same no matter which approach you take:

<div class="thumb">
<div class="thumbDelete"></div>
</div>

Easy enough.

I am working on a Dojo widget where I wanted navigation buttons to be vertically centered within a container. Initially, I set the margin-top property in the CSS file to an exact value: (height of the container – height of the button)/2. This worked fine, but as I began to use the widget, I realized that I wanted to be able to change the dimensions of the widget without having to change the CSS file. So I changed the margin-top value of the navigation button to 50%. Didn’t work. I assumed that setting the margin-top property to 50% would center the button vertically within it’s container. Wrong. I then set it to 350% and it still did not center the button.

I googled and found that browsers determine the actual size of the margin by multiplying the percent against the ‘width’ of the parent container. Huh? That’s ridiculous! It’s not even logical. Why would the width of the parent container have anything to do with the margin-top property? So because the width of my parent container is 40px, if I set the margin-top to 50%, the actual margin-top is 40px * 50% = 20px. How assinign! Who approved this CSS spec? I would not have been surprised if IE interpreted the margin-top this way, but Firefox? Can anyone tell me why this is logical?

I read on dojocampus.org that the color of the Dialog’s underlay can be changed. The example on the site shows how to change the underlay color of an individual dialog box:

    #dialogColor_underlay {
        background-color:green;
    }

<div id="dialogColor" title="Colorful" dojoType="dijit.Dialog">
     My background color is Green
</div>

But, this only changes the underlay color of an individual dialog box. It seems to me that unless I am building an Dojo application for, let’s say a kid’s website, that I want the color change to be consistent. I also don’t want to have to create a separate style for each Dialog box that I may have on a page. So, to change the underlay color for all dialog boxes on a page:

.dijitDialogUnderlay {
     background: green;
}

Easy.

In order get the height of a div in IE when the height is set to auto (or not set), use offsetHeight. I generally do not set the height of a div if I want the height to be determined by the the content inside the div. I was working on a YUI widget that is similar to my imAnimTabber JQuery plugin. I used YUI’s animation utility to display the tabbedd content. When using the animation object, you have to specify the attribute that is to animated and the value the attribute should be set to:

{height:  {to:  ‘100px ‘}}

Because the height of the divs for the tabbed widget is dependent upon the content, I do not know what the height of the content will be. To get the height of each div in Firefox, I simply called the getStyle Dom method (YUI):

YAHOO.util.Dom.getStyle(element, ‘height’);

Of course, IE returned ‘undefined’ as the height value. So, I first had to determine if the user was using ie and then use ie’s offsetHeight to determine the height:

if (YAHOO.env.ua.ie) {
     var el = YAHOO.util.Dom.get('element');
     var h = el.offsetHeight;
}

Since we know that Microsoft is not going to change ie, I hope that YUI will change their getStyle Dom method so that it can accommodate the various browser inconsistencies.

While creating my intriguingminds.com site, I ran into a problem with a selection border appearing around images. These images were used as buttons. When I clicked the button, the selection border appears.

To remove the selection border from around an image for Firefox, add this to your CSS file:

:focus { -moz-outline-style: none; }

Now, when you  click on the image it will look like this: