Customer Street CSS

Here at Ufindus Customer Street we always strive for good clean code in the sites we build. I’m not personally accustomed to using CSS ‘Hacks’ when coding websites so I wouldn’t ever recommend using those dirty hacks to get around Internet Explorer bugs because there are plenty of cleaner ways of doing it. However, this short list compiles some very useful CSS tricks that I now use everyday when building sites with CSS.

For example, did you know that Internet Explorer and every other browser handle heights differently? Shocking I know. Internet Explorer 6 and below do not recognise the CSS property ‘min-height’, which does exactly what it says it should in Mozilla and the other browsers. That is, a section given min-height will never shrink to a height less than that value. This becomes very useful with dynamic sites where you don’t know how much content there is going to be and you would like your page to have some form of height whether there is content to fill it, or not.

Height in every browser other than Internet Explorer will set the maximum height of an element and won’t expand beyond that. We can’t use this in our example because the content might be longer than our set height. Internet Explorer incorrectly adjusts for this stretching the element to fit the contents inside, which should be the functionality of ‘min-height’ not ‘height’. This means that unless we use ‘overflow: hidden’ the element will stretch in Internet Explorer. A real pain that can be.

However, the fix for this can be found in this list and it’s simple to implement as it requires setting a min-height (for browsers that support it), a height (for Internet Explorer), and the middle value with !important resets the min-height for Internet Explorer, whilst not conflicting with the value set for the other browsers.

A very helpful fix and plenty more can be found at Stylized Web.com

4

after 2 Votes