Category Archives: CSS

Internet Explorer Ignores Bottom Margin

Posted on by Jonathan Kemp

Well, I noticed something strange today that I had not noticed before. Internet Explorer ignores the bottom margin I had set when it is the last item on the page. I had the same problem in IE 6 and 7, but not in Firefox or Safari.

To elaborate, I set a bottom margin on the last element on the page. IE ignored it and displayed the element flush with the bottom of the browser instead of showing a margin. When I added another item below it, it showed the margin, so it has something to do with being the last item on the page. This only happened in IE 6 and 7.

Solutions I thought of included setting a transparent border, increasing the height of the footer and setting padding on the body. The transparent border didn’t work in Firefox or IE. Increasing the height of the footer wouldn’t work because there was a bottom aligned background that needed to appear at a certain height. I felt that setting padding for the body was also not a good practice.

I tried everything I could think of to get around it. I ended up adding an empty div below the element and setting the height to what I wanted the margin to be. This worked. It was the best solution because all of the other things I could think of wouldn’t work because of the design constraints.

Layout Fix for Internet Explorer

Posted on by Jonathan Kemp

A friend of mine, David Ross, just gave me a hot tip the other day. I have a lot of problems with layout in Internet Explorer 6 and 7, usually so much so that I have to have extra IE-only styles for the builds that I do.

David told me to make sure when you use floating divs that you use display: inline for Internet Explorer. That did the trick! I have way less problems with layout in IE now thanks to this tip.

Flash Showing Underneath Dropdowns

Posted on by Jonathan Kemp

Ever want to use dropdowns, but you can’t because a Flash animation underneath the dropdowns shows through? We had this problem on multiple occasions. There is a simple solution. Make the Flash transparent by setting wmode=transparent in the code. Works every time.

I’m not sure if this will work with sIFR or not, or if sIFR even causes this problem, but I would recommend trying that first if you are stuck. You can set wmode to transparent in sIFR by adding wmode:"transparent" to the sIFR parameters.

Proper Use and Examples of the small-caps CSS Property

Posted on by Jonathan Kemp

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?

CSS Bugs in IE 7

Posted on by Jonathan Kemp

Okay, word on the street is that Internet Explorer 7 has already gained more browser market share since launching in January than Firefox currently has. This means that if you are not designing for IE 7, you should be. IE 6 still has the majority, but according to Microsoft, IE 7 is around 25% and growing. I believe this since I have actually seen statistics backing this up.

So, I am now checking all sites that I build in IE 7. And yes, I am discovering that, while IE 7 is a huge improvement over IE 6, it still has problems rendering CSS. So much so that on my latest project, I had to create 2 IE only stylesheets, one for IE 6 and one for IE 7.

If you are using Firefox, which I hope you are, you may know about the web developer toolbar for Firefox. This is an extension for Firefox that gives you tools to easily debug all kinds of problems with web pages. Today I found a similar tool to help debug IE 7 display problems.

IE 7 copied many of it’s new features from Firefox, including the ability to add third party plug-ins called add-ons. You can find a directory of these add-ons here. The Internet Explorer Developer Toolbar is similar to the web developer toolbar for Firefox. It is not nearly as easy to use or as functional, but it has many of the same functions and can be useful for debugging in IE 7. It is a big improvement over debugging for IE 6.

Incidentally, one thing I noticed is that while this add-on is free, Microsoft charges for many of the add-ons on this site. I saw some as high as $300. While I don’t necessarily agree with that, it could be very lucrative for developers, if you are so inclined. That is if Microsoft is sharing the revenue.

I also see how it could give Microsoft an edge over Firefox. If they are sharing revenue with developers to build extensions and Firefox is not, they could in theory build better extensions and take more market share away from Firefox. Somehow though, I don’t see many people paying for browser extensions, so maybe not.

Revised CSS Flyout Menus

Posted on by Jonathan Kemp

Last month, I posted about a method to generate vertical multi-level suckerfish css dropdowns by revising the code from HTML Dog’s Son of Suckerfish. Well, this week I have been working to implement this code into a build that I am doing, and I figured out that my original css worked great in Firefox and Safari but not in Internet Explorer 6.

Looking at this in IE6, I saw there were gaps in the list items in the first and second tiers of the navigation, but not in the third. If you click on the example here in IE6, you should see what I am talking about. After much testing, it still does not make sense to me why that would happen in the first and second tiers but not in the third. But I basically figured out what is going on.

In IE6, although the nested lists are using position: absolute to remove them from the flow of the document, a 3px space appears at the bottom of each list item, where there should be no space at all unless a margin is being set.

To correct this, all I had to do was set margin-bottom: -3px for the specific list items in my IE6 only stylesheet. However, this creates another problem because as I said the problem only occured in the first two lists but not in the second nested list. So this fix causes the second nested list to be 3px shorter on every list item.

Luckily, all we have to do to correct this problem is reset margin-bottom: 0 in the list items of the second nested list in your IE6 only stylesheet. Now you will have flyout css menus that look as good in IE6 as they do in Firefox and Safari!

Wal-Mart Does Not Support Firefox

Posted on by Jonathan Kemp

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

Simulating Position Fixed in IE

Posted on by Jonathan Kemp

Good CSS designers know that one of the faults of Internet Explorer 6 is that it doesn’t recognize the CSS property position: fixed. This is a CSS property which allows one element on a page to remain stationary while the other element scrolls, resembling frames in a browser.

Our company launched a web site for Ty Pennington last fall. For this site, the footer, along with the transparent logo at the bottom of every page, not only needed to be stationary, but also always needed to align at the bottom of the page no matter how long the content or the browser window. This is a desgin challenge for any CSS designer.

Luckily, I found a kickass CSS hack that not only allowed me to simulate position: fixed in IE but also solve the other problem I had by always keeping the footer at the bottom of the page. It worked perfectly, but it currently breaks in IE 7. It may be fixable, but I haven’t taken a look at it yet to try and fix it.

Ty Pennington is a site we are really proud of. It uses lots of other tricks with Javascript and CSS to create a beautiful, branded work of art. So go on over there to see how it was done. Also click on the example above and bookmark it so you can do this in the future.

Creating Accessible Cross-browser Compatible Forms

Posted on by Jonathan Kemp

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.

Correctly Setting Z-index

Posted on by Jonathan Kemp

One thing I always have had trouble with in building web pages with CSS is setting the “z-index” property. In CSS, the “z-index” is the stacking order on the page. It makes sense if you think of it as adding a third dimension to the web page.

I run into the problem often where I need an element to load on top of another element, and they always seem to want to load in the opposite order. Many times I have tried to change the z-index without much success. So much so, that I gave up trying to use it.

Well, I finally figured out what I have been doing incorrectly all this time. To get z-index to work, both elements have to have the same parent. What this means is that if two elements have different parents you cannot change the z-index relative to each other by setting the z-index for those elements. You have to change the z-index of the parent element.

Duh! Solving this problem is a major help to me though because now I can correctly set the z-index and solve a lot of CSS design problems I have been having.