April 10, 2008

Firefox, Safari and IE Compatible CSS min-height

All webmaster should already knows that some CSS code may not compatible from one browser to another. You may noticed that on the CSS code would be a list of redundant code in order to hack this out.

However, while surfing today, I found one good simple tricks for min-height and min-width CSS code that is compatible across all common versions of Safari, Firefox and IE. Maybe you already found and use it. I'm posting this for my notes and maybe it could be helpful for others too...

The Cross Browser min-height CSS

.foo {
min-height:100px;
height: auto !important;
height: 100px;
}


This works because all of the more recent browsers will understand and respect the min-height setting as well as the !important designation. So in the example above, the block will be given the min-height setting you specify, and the height:auto will take precedence over the height:100px, even though it appears earlier in the code. With content shorter than 100px, the min-height setting is observed, and with content that is longer, the block is sized to fit the content.

By the way, in the case of older versions of IE, neither the min-height parameter nor the !important designation are supported. Instead, the browser essentially sees a height:auto, immediately followed by a height:100px, and the latter takes precedence. Lucky for us, height parameter in older versions of IE function exactly like the min-height parameter. When content expands past the size of the element, it grows to accommodate it. When content is shorter, the specified height is respected.

Logically, this should also works on min-width.

The Cross Browser min-width CSS

.bar {
min-width:100px;
width: auto !important;
width: 100px;
}


If you wonders, I got this trick from Hackszine. Enjoy!!!

Share This Article:


Bookmark This Article:
Feed Me Digg Technorati del.icio.us Best to Stumbleupon Reddit Blinklist Furl Spurl Yahoo Simpy

2 comments:

Dratski! said...

I have a question regarding expandable summaries on posts. I managed to create summaries, but when I added the suggested cocde it automatically changed the spacing between my text, which gave me an idea. I would like no (or minimal) spacing between the text on the summary part (to keep it taking up less space on the main page which was the idea in the first place) and then one line spacing between the text on the individual post once it's linked to.
Do you know how I could go about this?
If so, thanks in advance !

Justin said...

This doesn't work... I tried it on FF 3.5 and Chrome with no success. Think about what you're doing... height: auto !important and then setting height again, it's obviously going to use the !important one and just ignore the next one.