Category Archives: CSS

Getting Overflow Hidden to Work in IE

Posted on by Jonathan Kemp

This is an easy fix, but I thought it was worth a post anyway, in case someone comes across it.

Setting overflow: hidden on a block element does not work in IE, if width and height are not set. But, it does in other standards aware browsers.

You may come across this situation if you have an element nested inside another element where width and height are set, and the nested element is inheriting the dimensions of the parent element. In that case, there is no need to set width and height usually. Well, in IE, overflow: hidden will not work if no dimensions are specified.

So as you may have already guessed, the fix is pretty simple. Setting a width and height on the element, or even just a width, will cause IE to obey the property.

I’m not sure if IE is doing the correct thing or not, in this case. It does make sense that you would have to specify dimensions, so that the browser will know where to cut it off at. It seems though, that IE is dumb here, as other browsers assume the inherited dimensions. I’ll leave that up to you to decide.

Firefox 2 Does Not Support inline-block

Posted on by Jonathan Kemp

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.

Repeating Background Bug in IE 6 and 7

Posted on by Jonathan Kemp

I discovered an interesting bug that occurs in both IE 6 and 7 the other day. Actually, I had seen it before, but I had never been able to figure out a cause or a fix until now.

The bug occurs when you have a background set to no-repeat on an element with an undefined width. When no width is set on the element, usually because it’s inside a parent element that has a set width, the background repeats vertically in IE 6 and 7 even when the background is set to no-repeat.

The fix is easy. Obviously, if this bug occurs when no width is set on the element, simply setting a width fixes the problem. The background will no longer repeat and will show up as it is specified. There you have it!

Bizarre Empty Div Line-height Bug in IE6

Posted on by Jonathan Kemp

File this one under, you may have seen it before, but I ran across a very weird IE6 bug yesterday. This bug gave me a fit, and I hadn’t encountered it before, at least I don’t remember it.

The problem was an empty div with a height set to 6px. The actual height in IE6 was 18px. If I set the height to 20px, it would be 20px, but if it was less than 18px, it would stay at 18px. Well, it just so happens that 18px is the line-height. So what’s happening is the empty div is inheriting the line-height, even though there is no text inside the div. Go figure.

Another interesting thing is that reducing the line-height doesn’t fix the problem. No matter how I tried, it stayed at 18px. Even setting the line-height inline doesn’t work. What does work is setting the font size to 0. This fixed it instantly. So remember, if you are using empty divs in IE and they are smaller than the line-height, you need to set font size to 0.

See the screenshot below and click on the link to see an example.

Line-height Bug in IE6

Nowrap for CSS

Posted on by Jonathan Kemp

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.

Downgrading Web Page Layouts for IE6

Posted on by Jonathan Kemp

Lately, I have found that it is easier to allow a page to display differently in IE 6 than it is to make that page display the same way in IE6 as it does in other browsers. Think about it. Let’s say you have 4 browsers. Your page looks the same in 3 of the browsers, but in one of the browsers, it doesn’t quite look like it should. You could choose to spend extra time to find a work around to make it display the same across all 4 browsers. You could even go so far as changing the layout of your page. Or you could simply allow it to display differently in that one browser, and move on to the next project.

If someone has a problem with it, the solution is simple. Upgrade. Or change browsers. It makes sense, and it pisses me off I didn’t start doing it sooner.

Now before people go and get all upset, I am not advocating designing your site to purposely look bad or crappy in IE6, just different. For example, say you have a div with a transparent PNG as a background. IE6 lacks support for transparent PNGs, thus requires a work around hack to display a transparent PNG as a background. You could implement the work around hack. Or you could just set the background as a solid color in an IE6 only stylesheet using conditional comments. The solid color background won’t look as good as the transparent PNG, but it works fine. Someone using a browser that supports transparent PNGs will have a better experience, but it still works.

Finally, I know that we all have clients, and our clients drive most, if not all, of the work that we do. If a client wants it to look a certain way in a certain browser, then sometimes that’s just the way it is. But I bet if you tried reasoning with your client using the above argument, you just might persuade them to see things your way.

Update: I forgot to add that making things display differently in IE usually requires the use of an IE only stylesheet with conditional comments.

CSS Support in IE7

Posted on by Jonathan Kemp

If you ever wanted to know how support for CSS improved in IE7, this post is for you. Apparently in August 2006, before IE7 was released, Microsoft posted these details on the IE Blog. The post details all the bugs that were fixed, added support for W3C specifications and features added for CSS 2.1. I always wanted to know this, and this is the first time I have seen it.

They go on to talk about how fixing support for CSS will cause a lot of the hacks that worked before to break in IE7. This page details specifically which workarounds that previously worked in IE6 will not work in IE7.

I believe IE7 has now been out for over a year. I admit I am impressed with Microsoft’s support for CSS in IE7. It is worlds ahead of IE6. However, the adoption rate that I have seen for IE7 over IE6 is still very slow. In addition, how long will it take for Microsoft to release IE8? Five more years? By that time, IE7 will be outdated as IE6 was. Unfortunately, as many inroads as Firefox has made into browser market share, we are still living in a Microsoft world. Maybe by releasing Safari 3 on Windows, Apple will be the one to change that. It is still in beta as of this writing, though.

On Using Reset Styles

Posted on by Jonathan Kemp

I don’t usually do link posts, but I thought in this instance it was worth mentioning. I recently discovered 2 posts on Eric Meyer’s blog dealing with reset styles. So what are reset styles and why do we need to use them? For that, read Eric’s post, Reset Reasoning. In this post, Reset Reloaded, Eric lists exactly what his reset styles are so you can use them.

I think that Eric is right in using them. It does seem like reset styles are a better alternative than using a universal selector to remove margins and padding because, as Eric says, the universal selector removes padding and margins from everything. There are some cases where you might not want to do this, such as form elements.

I think I am going to give reset styles a try. How about you?

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.