As 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(https://www.websitesinaflash.com/wp-content/uploads/2022/05/websites-in-a-flash-logo.jpg.webp) center no-repeat; height:20px;”> </div>
These two don’t work correctly in Internet Explorer:
<div align=”center”><img src=”https://www.websitesinaflash.com/wp-content/uploads/2022/05/websites-in-a-flash-logo.jpg.webp” alt=””></div>
<div style=”text-align:center; margin:0 auto”><img src=”https://www.websitesinaflash.com/wp-content/uploads/2022/05/websites-in-a-flash-logo.jpg.webp” alt=””></div>
Enjoy,
Ashton