PoD Redesign Contest

[Kurt_]

Latin? I thought it was something like the damned microsoft publisher filler...

[bicostp]

Okay folks the new shiny version is up! It's not on PoD yet, but at least it's a functional demo page.

http://bicostp.portablesofdoom.org/sandbox/shinypod

I know it kinda glitches in IE 6. Not much I can do about that unless someone else knows how to rewrite the css so it works right and looks the same. (And of course the logo gets a light blue box because IE6 is too dumb to render png transparency properly... Grrr...)

How's this? If you like it I'll start working on the different color CSS files.

[Rellizate]

Coolio, but the random portable doesn't change.


xD

[marshallh]

Coolio, but the random portable doesn't change.

It's called a mock-up

Nice clean design, Bic. You might ditch PNG transparency and make several JPEGs of the logo, for each template. Lots of people don't use Firefox.

[bicostp]

Well it apparently renders properly in IE7, and since Microsoft stuffed it down the throat of everyone who runs Automatic Updates there should be less of a problem.

The problem with JPEGs on images like the logo is that in order to get a decent looking picture you have to jack up the quality, which makes the file big. I could do what you suggested using PNGs instead, but that would suck up more bandwidth. (As though that's a problem since nobody ever looks things up on PoD anyways... )

How about a script that loads a GIF version of the logo instead of the PNG if you're viewing the page with IE 6? You'd lose the nice transparency effect but it would look better.

[gannon]

Aren't there transparancy fixes for IE using css/javascript (.htc files or something..)
Edit: yeah, http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

[bicostp]

Fixed one issue with the script... still having a problem though.

Hmm... I'm trying to use Javascript to choose between using the filter and directly calling the .png file, but this script isn't working.

Code: Select all

		<script type="text/javascript">
		var logo2;
var browser=navigator.appName;

if ((browser=="Microsoft Internet Explorer"))
  {var logo2 = '<img class=logo src="dummy.gif" style="width: 317px; height: 118px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'\homedata\images\logo.png\', sizingMethod=\'scale\')" />'}
else
  {var logo2 = '<img class="logo" src="homedata/images/logo.png">'}
document.write( logo2 );
</script>

This should run the image through the filter on IE, or use the image directly under any other browser. So far it loads the .png in Firefox, but IE gives me a broken image box the size of the logo. What's wrong?

( /me is unfamiliar with Javascript)

EDIT: Stomped a pretty major bug that caused the navigation bar to spaz out in IE:


Now at least that part renders the same in both browsers.

[bicostp]

Come on, at least one of you must know Javascript!

There's a syntax error in there somewhere... where is it? (I just BS-ed some code together, honestly I have no knowledge of JS.) This is the last step in getting the logo to look right on IE.

[gannon]

Why use JS to load the filter when you can just use css?

Code: Select all

img { behavior: url("filter.htc"); }

[bicostp]

Because Firefox doesn't like it when you use that filter (All it renders is the empty GIF that the script fills.)

Turns out I had the wrong slashes in the part of the script that calls the PNG. ("\" as opposed to "/". Small mistakes make a big difference.) I also got rid of the extraneous "logo2" variable and had the if/else loop call document.write directly.

Here's the final code:

Code: Select all

<script type="text/javascript">
var browser=navigator.appName;
if ((browser=="Microsoft Internet Explorer"))
  document.write("<img class=logo src=\"dummy.gif\" style=\"width: 317px; height: 118px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/homedata/images/logo.png', sizingMethod='scale')\">")
else
  document.write('<img class="logo" src="homedata/images/logo.png">')
</script>

I updated the sandbox page to the latest version. It shouldn't make IE spaz out anymore.

http://bicostp.portablesofdoom.org/sandbox/shinypod/

For some reason it doesn't work on the server. It works on my local machine...

[SpongeBuell]

I like that, although I think I'd move the search to the side, around the random portable or something.

[bicostp]

Like this?

http://bicostp.portablesofdoom.org/sand ... sponge.htm

[Unidentified Assilant]

Do you care that much for IE users? All IE should be used for is downloading Firefox.

[Mageslayer]

Quoting the previous poster's sig really doesn't strike me as original... That said, the more compatible your site is the more people will look at it. It's that simple.

[Unidentified Assilant]

I didn't quote him for that reason. It's true.