Here’s the latest IE rendering stupidity I don’t understand…
I have some code for a simple web page that looks like this:
</td>
</tr>
</table>
<img src="footer.jpg"/>
It’s the end of a table with a JPG graphic placed right below it. The JPG is also very simple, a thin field of gray that bumps up against a thin field of white, with rounded corners. I wrote the code and created the page using Safari as my previewer and everything looked fine. It looked fine in Firefox for Windows and Mac. But guess, just guess, which browser screwed up a simple JPG image that should be static. Yep, Internet Explorer.
How something static like a JPG graphic can magically change its properties in a single browser and not any other is beyond my understanding. Since the people looking at the site this morning are IE users, I corrected the graphic to display correctly in IE for now. I’ve provided some pictures to illustrate the problem.
In IE, after modifying it to look right after it already looked right in other browsers:
Firefox for Windows:
Safari:
I’m not sure why the same JPG looks different in different browsers, but there you have it.
My .Mac Web Gallery
Loading ...
September 29th, 2005 at 12:28 pm
In the last year or so I’ve been avoiding doing designs that REQUIRE things to line up. I know it sounds weird, and very anti-designy, but it seems to work out a lot better.
(Not promotion):
http://www.iconizeme.com was a complete rewrite for me. I’m not great at HTML, so no critiques :-). But the elements can move a few pixels here and there, and for the most part everything will work still- visually.
However, I threw that entire mentality out the window when I decided everything on the page would be transparent PNGs- which Win IE can’t begin to handle.
September 29th, 2005 at 12:38 pm
Avoiding line-ups is a good idea and I’d like to do that more in what little web layout work I do. As for transparent PNGs and IE, I’ve given you a solution to that privately, but if anyone else reading this is interested let me know and I’ll pass it along, or maybe publish it here on the page.
September 29th, 2005 at 2:25 pm
It’s not just the lack of a space before the closing slash on the img tag, is it?
September 29th, 2005 at 2:33 pm
I will test that hypothesis at the first available opportunity.
October 3rd, 2005 at 4:57 pm
The space didn’t make a difference, but I know what does.
The width of the box the graphic is supposed to cap off is different in IE than it is in any other browser. It’s not a problem with the JPG, as I originally thought, it’s a problem with the width of the column above it. For whatever reason, because of some element contained inside the box or because of some glitch with IE, it renders the box at a different width than what is set in the stylesheet - it makes the box too narrow. Firefox on Windows using the same font renders the box correctly, as does Safari. So it’s not a problem with JPG rendering, but it is a problem with IE’s stylesheet handling.
October 4th, 2005 at 10:53 am
Problem solved.
Box Model Hack