[Derek]

[color=#000000ost_uid0]Yeah, I noted that ... idiosyncrasy myself. Before the boards were purged, I had posted an explanation because I (ever the geek) took the effort of figuring out why that happens. And because I (still ever the geek) am bored, here's the explanation again.

If you've read enough Mozilla propoganda, then you won't be surprised by my saying that Mozilla's implementation is the correct one. Here's why (relevant portions from 5MV's front page):

[bost_uid0]HTML[/bost_uid0]

[color=#333333ost_uid0] <[color=blueost_uid0]img[/colorost_uid0] name="[color=orangeost_uid0]d[/colorost_uid0]" alt="[color=orangeost_uid0]5MD[/colorost_uid0]" border=0 src="[color=orangeost_uid0]images/5mdlogo.png[/colorost_uid0]" width=15%> <[color=blueost_uid0]img[/colorost_uid0] name="[color=orangeost_uid0]s[/colorost_uid0]" alt="[color=orangeost_uid0]5MS[/colorost_uid0]" border=0 src="[color=orangeost_uid0]images/5mslogo.png[/colorost_uid0]" width=15%> <[color=blueost_uid0]img[/colorost_uid0] name="[color=orangeost_uid0]vg[/colorost_uid0]" alt="[color=orangeost_uid0]5MVG[/colorost_uid0]" border=0 src="[color=orangeost_uid0]images/5mvglogo.png[/colorost_uid0]" width=15%> <[color=blueost_uid0]img[/colorost_uid0] name="[color=orangeost_uid0]s5[/colorost_uid0]" alt="[color=orangeost_uid0]Sci-Fivers[/colorost_uid0]" border=0 src="[color=orangeost_uid0]images/s5logo.png[/colorost_uid0]" width=15%> <[color=blueost_uid0]img[/colorost_uid0] name="[color=orangeost_uid0]f[/colorost_uid0]" alt="[color=orangeost_uid0]5MF[/colorost_uid0]" border=0 src="[color=orangeost_uid0]images/5mflogo.png[/colorost_uid0]" width=15%> [/colorost_uid0]

The key is "width=15%". According to the W3C standards, the width attribute on an image tag says, "scale the width of the image to 15% of the remaining width of the page". This is what Mozilla does. However, IE and others read width=15% to mean "scale the width of the image to 15% of the width of the page". One word difference and yet what a difference. (Worth noting that both implementations keep the aspect ratio of the images, so the height gets scaled as well as the width.)

So if your browser is 1000 pixels wide, then here's what the width of the second row of images on 5MV's front page work out to be:
[bost_uid0]IE and others[/bost_uid0]
5MD image = 15% * 1000 px = 150 px
5MS image = 15% * 1000 px = 150 px
5MVG image = 15% * 1000 px = 150 px
5MSF image = 15% * 1000px = 150 px
5MF image = 15% * 1000px = 150 px

[bost_uid0]Mozilla (and other Gecko-based browsers)[/bost_uid0]
5MD image = 15% * 1000 px = 150 px
5MS image = 15% * (1000 px-150 px) = 127.5 px
5MVG image = 15% * (1000 px-150 px-127.5 px) = 108.375 px
5MSF image = 15% * (1000 px-50 px-127.5 px-108.375 px) = 92.11875 px
5MF image = 15% * (1000 px-150 px-127.5 px-108.375 px-92.11875 px) = 78.3009375 px

So as you can see, Mozilla shrinks the images smaller and smaller until the fifth image is nearly half the first because it calculates 15% from the percentage of the width [iost_uid0]remaining[/iost_uid0] while other browsers just calculate it from the precentage of the [iost_uid0]total[/iost_uid0] width every time.



Well, [iost_uid0]I[/iost_uid0] find it interesting.[/colorost_uid0]