Hack background-position using sprites in IE7

IEYup, is time for another hack for IE 7, this time I needed to find a way to correct an issue with a sprite that is used as background image to display a set of icons in a list of links (a set of <a> inside a <li>) and depending of the type of recourse is the icon that is displayed. (using the CSS background-position Property)

As usual all works perfect in FF, Chrome, Safari, Opera, and even IE8+, but since IE 7 doesn´t support inline-block property, in some cases, not only the icon of the resource was displayed but some of the rest of the icons in the sprite too!, that happened only in the items where the text of the link was longer that the defined width of the container, in my case an <a> tag (see the image below), so in that cases, I needed to find a way to display only the correct icon.background_images_icons_1The fist step of my solution was to use the hack to mimic inline-block on block elements, since that is what I needed, be able to use inline-block in IE7:

CSS:

.the_rule
{
// more declarations ...
*display: inline;
*zoom: 1;
}

Once applied those declarations in the css rule that is applied to all <a> tags only the text of the links was lined up correctly (see the next image), well, apparently I needed to do something more, ok, the next step was to find a way to only display the correct icon and hide the rest of them (that should not appear from the beginning and are not displayed in others browsers even IE8+ ) and at the same time show all the text of the URL, interesting isn’t?

background_images_icons_2After sometime, the final step of my solution was to add a height value in the css rule, in my particular case the same height of the icons (18px) to force to hide the rest of the icons that are part of the same sprite and also to display the complete URL,  as you can see in the next image, hoooray!!:

background_images_icons_3

Note: The blue border around the <a> tag shows the dimensions of the element <a>.

CSS:

.the_rule
{
// more declarations ...
*display: inline;
*zoom: 1;
height:18px;
}

Be careful with the rest of the elements that may be below the one you add the hack!!, depending of your HTML structure is possible you need to find a way to control or force the position of the elements since they could move up, as was my case, see the next image:

background_images_icons_4Hope you find this information useful!!

:after and :before css pseudo elements hack for IE 7

css3:after and :before css pseudo elements aren’t supported by IE 7 and if you need to offer the same user experience in many browsers as possible (included legacies) without create extra code css/javascript/html/etc.., you can use the following technique that I found in Stack Overflow, kudos to vieron who found this hack!!.

If you want to see how it’s done, read :after and :before css pseudo elements hack for IE 7 in the Base22 Knowledge Wiki.

Hope you find this information useful!!

Images doesn’t resize on IE

IEIn the past days on a new project I discovered that IE doesn’t wanted to resize images even if the HTML tag img has a valid width value and a valid height value on the corresponded attributes, I mean, not in a css property or rule, but a value on the attributes: width and height. I have detected this issue only on IE 7/8/9/10, all works perfect on FF, Chrome, Safari and even Opera.

Here is the HTML of the image:

<img title="" alt="" src="img.png" width="430" height="344" border="0" />

And as I mentioned before, on FF the image is displayed as expected:

img_ff

And here is how it looks on IE 10:

img_ie

The solution I found was to add the same width and height values but now in the equivalent css properties, so, the final code now looks like:

<img style="width: 430px; height: 344px;" title="" alt="" src="img.png" width="430" height="344" border="0" />

Now, IE 7/8/9/10 shows the image as the rest of the browsers:

img_ie_nice

Errata

The previous solution doesn’t works on IE 7, sorry, but exist another approach that works on IE 7+ and its very similar to my previous solution. In our scenario, the image has an immediate div parent and all that I needed to do was to add the same width and height values of the image but now in the equivalent css properties of the div, we use the div to control the position of the image, so, adding the width and height values of the image on the div doesn’t affect our layout.

If you aren´t worry about IE 7, then my original solutions work for IE8+, but, if you need to target all IE version as in on my case, this second approach is a solution you can use.

Now, our code looks like:

<div style="width: 430px; height: 344px;">
   <img title="" alt="" src="img.png" width="430" height="344" border="0" />
</div>

I really hope you find this information useful.

How to prevent jQuery slidetoggle stop “jumping”? – Part II


jQueryA few mounts ago I wrote an article on the Base22.com public knowledge wiki about How to prevent JQuery slidetoggle stop “jumping”?. At that moment I was sure that it will be more easy to find a solution if I cross with the same problem, well, I was totally wrong. I’m creating this new post because non of the previous solutions that I found and share works this time. In this particular case the “bug” only persist on IE8, all works perfect on IE7 and FF, weird doesn’t it?

My “new” scenario is very similar to the previous:

  • In a resent project I use jQuery slidetoggle function to hide/show an error/success message inside of a <div>, the slidetoggle animation works almost fine just that at the end of it, suddenly the animation “jumps” and recalculate it correct height.

Note: Here is the CSS, HTML and JavaScript code of my particular scenario, perhaps if you use the same code you will not be able to reproduce the same error, since as you can see, should work without any problem, that made me take longer than expected to find a way to solve this problem once more time:

CSS style of the parent div

.parentDiv {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #A3B0EA;
    border-radius: 10px 10px 10px 10px;
    display: block;
    margin-top: 25px;
    padding: 5px;
}

Original CSS style of the error/success message div:

#message{
    background-color: #C2E8B2;
    text-align: center;
    height: 15px;
    margin:5px;
}

HTML + CSS

<div class="parentDiv">
	<div style="clear: both; padding: 5px 0;">
		...more HTML code
	</div>
	<form style="display:inline-block;width:100%">
		... more HTML code
	</form>
	<div id="message" style="display: none;">
		The new post has been sent.
	</div>
</div>

JavaScript code:

$("#message").slidetoggle("slow",function(){
    setTimeout(function() {
        $("#message").fadeOut('fast');
    }, 2000);
});

New solution:
Using the above code I couldn’t understand why my div (message) recalculated again the height values ​​when the slidetoggle call ended, but this time, only persist on IE8, after trying some possible solutions (see the links below) nothing seems to works, so I asked myself, What can I do to “force” an element to have a maximum height?, you have the answer?……. yeap, using the CSS max-height property!!!…

So, if you stop with a similar situation, try to define a max-height to the element, in this case, was the only solution that I found to solve the problem on IE8.

Final version of the CSS style:

#message{
    background-color: #C2E8B2;
    text-align: center;
    height: 15px;
    max-height:15px; /* solution */
    margin:5px;
}

List of other alternatives that you can look to solve the same problem:

I really hope you find this information useful.

CSS3 Solutions for Internet Explorer


IEI found a very helpful article for those like me, need support IE7/8+ on projects where a client wants a more accurate cross-browser experience like: Rounded Corners, Box Shadow, Gradients, etc. For each of the cases Louis has added the correspond CSS syntax compatible with all versions of Internet Explorer (IE6, IE7, IE8 & IE9+). The complete list covered in his article includes:

  • Opacity / Transparency
  • Rounded Corners (border-radius)
  • Box Shadow
  • Text Shadow
  • Gradients
  • Transparent Background Colors (RGBA)
  • Multiple Backgrounds
  • Element Rotation (CSS Tranformations)

I will not re-write the full article or the examples that Louis explains perfectly, please check it on Smashing Magazine: CSS3 Solutions for Internet Explorer By

I really hope you find this information useful.