Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

CSS Difficulties – Centering Images

WiaF MascotAs most designers know, there is a difference between Internet browsers. Internet Explorer and Firefox displays websites differently. Some differences are hardly noticeable, and others are huge.

From my experience, Firefox follows HTML and CSS rules to the letter while IE only follows most of them. Here is an example I ran into today having to do with Centering Images using CSS:

Using CSS to Center Images:
I have the same image three times. Here is the image:

As you can see it is just a simple 2×26 pixel image. In the following link example, I have this same image centered three different ways.

CSS Image Centering

If you are viewing this in Firefox, those three images will create one perfectly centered, two-pixel wide, vertical line (as it should). But in Internet Explorer, the bottom two images move to the left one pixel…. I would ask Micro, “Why?” But I’m sure I wouldn’t get an answer.

Three Cheers for open source!

BTW, Here is the Code for the three above images, so you can tell the different centering techniques that I used:

This one works correctly in both browsers:

<div style=”background: url(http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg) center no-repeat; height:20px;”> </div>

These two don’t work correctly in Internet Explorer:

<div align=”center”><img src=”http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg” alt=””></div>

<div style=”text-align:center; margin:0 auto”><img src=”http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg” alt=””></div>

Enjoy,
Ashton

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment