Category Archives: HTML

Firefox 2 Does Not Support inline-block

Those familiar with CSS 2.1 may be familiar with the CSS property display: inline-block. This property allows an object to have the properties of both an inline object and a block object. What this means is that the object can be displayed inline but have height and width qualities of a block object.

This is a property that can be very useful when applying certain layouts. I was using it on a project recently when I discovered that Firefox 2 lacks support for display: inline-block. This was quite shocking to me because I assumed that Firefox 2 had full support of CSS 2.1. After all, Firefox was the number one Mozilla browser until only recently.

Anyway, in searching for a work around, I discovered that there is a similar Mozilla-specific CSS property that works in the same way, display: -moz-inline-box. All you have to do is add that property to your CSS and you will get the same effect in Firefox 2.

However, I discovered another problem with this in that once you apply display: -moz-inline-box to an object you can no longer use position: absolute on any objects contained within that object. I continued to be amzaed by Firefox 2’s misbehavior.

I finally discovered a solution to this as well, although not ideal. After searching a bit more, I found that if you add an second div inside the object, you can apply position: relative to that, which will then allow you to position objects absolutely within that div. Make sense?

In case you were wondering, the reason it is not ideal is that you are adding an unnecessary div to your code for simply presentational purposes. It is never good to do this, but sometimes the trade off is worth it for full cross browser support, when your layouts are more complex.

Nowrap for CSS

Today I learned that there is a “nowrap” equivalent in CSS. Nowrap is an attribute of the td or th tag that is deprecated in HTML 4.01. Nowrap tells the table cell not to automatically wrap the text contained in the cell.

The CSS 2.1 specification has a property called “white-space.” One of the values of white-space is nowrap. I tested this property, and it works the same as nowrap does. I also confirmed that it works in IE6, IE7 and Firefox 2.

So, if text automatically wrapping is a problem for you, don’t use “nowrap” because it is deprecated. Instead use the white-space property, with nowrap for the value. I added the property as an inline style rather than in the stylesheet, so that I didn’t have to create another class and I can use it only where it is needed. How you use it is up to you.

Proper Use and Examples of the small-caps CSS Property

Okay, the other day I was trying to use font-variant: small-caps and I could not get it to work. This sent me off on a wild goose chase of sorts because, as it turns out, I was also using text-transform: uppercase. Needless to say, the two don’t work together as text-transform: uppercase seems to override font-variant: small-caps in every browser I tried.

But, I noticed that I could not find any examples of what it looks like and what fonts it works with. So, I decided to do a blog post about it. Below, you will find several examples of this property in use with the basic web fonts.

Arial normally
Arial in small caps

Verdana normally
Verdana in small caps

Times New Roman normally
Times New Roman in small caps

Georgia normally
Georgia in small caps

One thing that you notice that it only capitalizes the letters that are already capitalized. For some reason, I thought that it capitalized the first letter in every word.

So there you go. It does work with basic web fonts Arial, Verdana, Times New Roman and Georgia. Do you have any more examples of which fonts this will work with?

Wal-Mart Does Not Support Firefox

On Tuesday of this week, Michael Arrington of TechCrunch pointed out on the TechCrunch blog that Wal-Mart had mistakes in the code of their brand new video site that prevented the CSS from loading in Firefox. The blog post has a screenshot of what it looked like. It would appear that whoever designed the site did not even check it in Firefox before launch, and reportedly the mistakes were easily fixable.

Well, today I just went to the site and found something that you will not believe. Not only has Wal-Mart not fixed the site, they put in a browser sniffer to shut all other browsers, except IE, out completely. Now if you go to the site, http://www.walmart.com/videodownloads, you see this message:

Our website requires the browser Internet Explorer version 6 or higher. It appears that you are using Firefox, Safari, or another browser that Wal-Mart Video Downloads doesn’t currently support.

So, rather than fix their mistake, which was apparently easily fixable, they decide to just say screw it and support no other browsers except Microsoft? I guess I should expect this from them, but come on. Wal-Mart is not living in the stone ages here. They are trying to compete with the likes of Netflix and iTunes. This is in effect a slap in the face to Firefox and Safari users, who in fact just might be the types of people that would use an online video downloading service, the very people you would think they would be trying to target.

Maybe the question we should be asking here is Wal-Mart somehow in bed with Microsoft on this?

Update: It appears Wal-Mart has taken the site down altogether. Now if you go to the site it says,

Site Temporarily Unavailable
The Wal-Mart Video Downloads store is currently unavailable due to temporary site maintenance. We apologize for any inconvenience.

Please try again later.

It looks like all this attention provoked some action on their part. It will be interesting to see how this plays out.

Update 2: Now it’s back to what it said at first when you look at it in Firefox.

Unsupported Browser
We’re sorry …
Our website requires the browser Internet Explorer version 6 or higher. It appears that you are using Firefox, Safari, or another browser that Wal-Mart Video Downloads doesn’t currently support. Click here to get Internet Explorer for free from Microsoft.

Thank You

Creating Accessible Cross-browser Compatible Forms

I set out recently to learn how to create forms that utilized standards better. The first thing I learned was that I was not using a very important tag that actually helps make forms more accessible. Accessible forms mean forms that are easier to navigate for those with disabilities. To create a form that is accessible, all you need is 1 tag, label.

The label tag makes this possible by associating text specifically with a form field. To do this use the label tag including the attribute for. The value of for should be the id of the form field. That’s it. Then, all you have to do is make sure you use the label tag for all the fields in your form. This will make your forms easier to navigate for screen readers because it knows which fields to associate with which text.

Other tags you can use include fieldset and legend. Fieldset is used to group a set of fields together while legend is used to give that fieldset a title.

For specific examples of correct usage of these tags, see this post on HTML Dog on accessible forms.

The second part of this is how I learned the best way to structurally markup forms. I was looking for a way to markup a form using CSS and not tables. After experimenting a bit, I learned it is best to use tables for now and to use CSS to style the tables. There is just no way to do it and maintain cross browser compatibility without using tables. I think the reason is that there is so much variance in how browsers display form fields.

Using tables to structurally markup forms, CSS to style the forms, while using label to make them more accessible, allows you to create accessible forms that look the same across all major browsers.

Web Site Validation

This a quick post about validating the code on your web site because I happened to be thinking about it today. Usually, validation is one of the first things I check when something breaks on a site. Running your site through a validator is a good way to spot errors in your code quickly.

Although I support standards and build sites based on them, I am pretty lazy about vaildation. I have the HTML Validator plugin installed in Firefox. Usually, all I do is check for the green checkmark there, and I am good to go. I recommend doing more than that though and making sure you run your entire site through a validator at least once before you launch. However, having the HTML Validator installed will help you check your code for errors on the fly, and save you time in the long run.