Author Topic: A Web Dev's Time-Killing Activities  (Read 3908 times)

K

  • 五月雨を あつめて早し
  • 最上川
A Web Dev's Time-Killing Activities
« on: October 12, 2011, 08:28:12 AM »
Behold, Touhou items reproduced in HTML+CSS3.

Made this one evening after dinner for some reason. It looks shiny, I guess.
Cross-browser compatibility? Well, I hear it behaves absolutely marvelously in browsers that aren't Chrome! It probably also looks really nice on systems that don't have the Meiryo font. (Short answer: No. Not-so-short answer: I never got around to taking this silly little diversion from a few weeks ago extremely seriously.)

I swear, it should look something like this:
Quote

Bio

  • resident walker
Re: A Web Dev's Time-Killing Activities
« Reply #1 on: October 12, 2011, 08:34:18 AM »
They're boxes in IE. Checking in Firefox Aurora.

E: Works in Aurora as it does in chrome.
« Last Edit: October 12, 2011, 08:37:34 AM by Biohazurd »

Re: A Web Dev's Time-Killing Activities
« Reply #2 on: October 12, 2011, 10:43:39 PM »
They're boxes in IE. Checking in Firefox Aurora.

E: Works in Aurora as it does in chrome.
but than again, IE isn't known for it's standards support  (in fact, I think that only IE9 has CSS support at all!)

Drake

  • *
Re: A Web Dev's Time-Killing Activities
« Reply #3 on: October 12, 2011, 10:50:57 PM »
ie is dumb and stuff

but yeah this is awesome

A Colorful Calculating Creative and Cuddly Crafty Callipygous Clever Commander
- original art by Aiけん | ウサホリ -

Jq1790

  • Wow I'm back to playing this game.
  • Let's puzzle together again, Karin!
Re: A Web Dev's Time-Killing Activities
« Reply #4 on: October 12, 2011, 11:26:48 PM »
You people need more recent IE...*doesn't use those silly things like FireFox and Chrooooooome*  I'm seeing the pics perfectly fine.
If you're a Pazudora player and aren't on #puzzleandlibrarians, come join us!

KrackoCloud

  • I don't mean to be greedy...
  • ... but white rice is my favorite food.
Re: A Web Dev's Time-Killing Activities
« Reply #5 on: October 13, 2011, 12:46:21 AM »
It looks very nice and crispy. Like something from a board or card game!
Fortunately, I don't see what's wrong when I use Chrome.

Re: A Web Dev's Time-Killing Activities
« Reply #6 on: October 13, 2011, 12:49:20 AM »
You people need more recent IE...*doesn't use those silly things like FireFox and Chrooooooome*  I'm seeing the pics perfectly fine.

Here's a cap from that silly most recent version of IE.
The items do show up, but there are no shadows and the corners aren't round.

Jq1790

  • Wow I'm back to playing this game.
  • Let's puzzle together again, Karin!
Re: A Web Dev's Time-Killing Activities
« Reply #7 on: October 13, 2011, 02:58:42 PM »
I'm CONFUUUUSED![attach=1]
If you're a Pazudora player and aren't on #puzzleandlibrarians, come join us!

DX7.EP

  • Red shroom
  • *
  • Smooth Charisma
    • Sanmaat (site of personal tat)
Re: A Web Dev's Time-Killing Activities
« Reply #8 on: October 13, 2011, 03:56:07 PM »
I'm CONFUUUUSED![attach=1]
It still looks off, especially in the bottom corners of the items.

Gotta love IE and MSFT for stubbornly pushing their own standards and ignoring everyone else's....

*doesn't use those silly things like FireFox and Chrooooooome*
IE is silly from the web developer's standpoint, though.
C:DOS> ayayaya.mid
Bad command or file name

C:>_

KFCbbQ

  • Taking over the world.
Re: A Web Dev's Time-Killing Activities
« Reply #9 on: October 13, 2011, 04:40:24 PM »
Viewing this on a tablet and it looks fine except the alignment is slightly off

Drake

  • *
Re: A Web Dev's Time-Killing Activities
« Reply #10 on: October 13, 2011, 04:52:01 PM »

A Colorful Calculating Creative and Cuddly Crafty Callipygous Clever Commander
- original art by Aiけん | ウサホリ -

K

  • 五月雨を あつめて早し
  • 最上川
Re: A Web Dev's Time-Killing Activities
« Reply #11 on: October 14, 2011, 05:56:40 AM »
If you see them as squares, then whatever browser you're using really doesn't like border-radius. I probably should've thrown more vendor-specific prefix variants into the stylesheet. (for an example of prefix overload, take a look at anything with the word "gradient" in it)

There are bound to be slight positioning/alignment issues, especially if you zoom in/out. If you look really closely, the arcs formed by the rounded corners of the white border won't quite line up with the arcs formed by the rounded corners of the outer edge of the item. The white border will also show its flaws if you keep zooming in. I probably have a vague idea how to fix some of these things.

I know for a fact that this page doesn't exactly look perfect on my Android phone. Font issues totally throw off text alignment. No Meiryo = font alignment issues. Embedding a 1.6 MB webfont also doesn't seem to go over too well with the Android browser.

Fortunately, I don't see what's wrong when I use Chrome.
Yeah, Chrome is my main browser, so I did 99% of the eyecandy testing there.

I'm CONFUUUUSED![attach=1]
...well, wow. That's an interesting one. Hello little grey boxes, what in the world are you doing there?

Summary of most issues encountered so far: HOORAY WEB STANDARDS! (well... we're getting there. Slowly. Maybe.)
« Last Edit: October 14, 2011, 06:35:53 AM by K »

Grimarg

  • B-but you haven't promoted me yet!
  • Thanks Aoshi for the avvy! :3
Re: A Web Dev's Time-Killing Activities
« Reply #12 on: October 14, 2011, 12:20:33 PM »
awesome, i need to change the browser font, but still awesome