This page best viewed by coming over to my office and looking at it on my monitor

The tumblr: tu-ra.tumblr.com The theme: Mona Lisa by unemotional.

First of all, something I’ve complained about every single time in every single one of these posts:

  font: 9px verdana;

Sigh. Moving quickly along…

<script language=JavaScript>
<!--//Disable right click script III- By Renigade (renigade@mediaone.net)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_lowgww0RMI1qeh4w5.gif), progress;}


::-webkit-scrollbar {width:0px;}

S…sigh? This removes the scrollbar in webkit browsers. Who the fuck would want to do that?

But that’s not all! This theme has some new, inventive tricks up its sleeve!

First, we look at it in a 1200 pixel wide window:

Looks fine! But if we narrow it down to 1000 pixels…

…and the navigation box slides off to the side, rendering all the links it had unclickable. The scrollbar is 0 pixels wide, so you can’t scroll over to it, either.

Gosh, that sure is dumb! But understandable, in a way. Most people don’t test for smaller monitors, because they’re Satan worshipers. Maybe this person had a 1920 pixel wide screen. Let’s check it at that resolution!

Well done.

Just absolutely top notch. Good job, there! Let’s look at the code responsible for such a masterpiece:

  position: fixed; 
  top: 130px; 
  left: 915px;

Not only is the selector overqualified (you just need #sidebar) but it’s fixed to 915 pixels from the left of the screen.

It is perhaps comforting that Tumblr theme designers still manage to surprise me with the depths of stupidity they sink to. It’s innovation, of a kind.

11:00am | author:
Filed under:CSS HTML CSS disasters
  1. c1qfxugcgy0 posted this