Examples of Broken CSS Wanted!

Ricky Onsman
SitePoint Managing Editor

We know in the brave new world of 2013 there is a lot of wonderful CSS being implemented across the web, delivering high quality visitor experiences and often pushing the boundaries of what people thought could be done on a web page without resorting to Flash.

There’s probably no better recent example than our own SitePoint Christmas Sale. If you’ve forgotten what that was like (already?), you can check it out again here, and read the story of how Alex Walker put it together.

Sadly, we also know that there is also a lot of less than wonderful CSS out there, delivering cracked, broken and poorly constructed web experiences that turn people off certain sites and sometimes the web itself.

How good would it be if we could find all the broken CSS and, well … fix it?

As people who value the web, we all know that things are at their worst when they look broken to users. Here’s an example.

Broken CSS

Yikes! Broken images, overlapping text, page elements flowing into each other: it’s a mess.

Using the comments below, we’re asking you to point out sites to us that look broken, either because of CSS or JavaScript problems on desktop, tablet or smartphone screens.

We do have an aim for this exercise, but we’ll let you in on our plans when we’ve gathered enough material to make a good start.

So, go ahead, give us some links to broken sites you know about and be part of making a better web in 2013 and beyond.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.xhtmlcoder.com/ xhtmlcoder

    Ricky, do you also mean poor implementation of JavaScript and CSS, for example where you cannot use core functionality like; access a simple site ‘Feedback’ form unless JS is enabled in your browser?

    There are many sites where they stupidly use a pure CSS lightbox-style effect; covering the ‘whole screen’, which sometimes hostilely tells the user to; “Enable JavaScript before they can actually use the site…” or words to that effect. I’m not talking of using scripting for “dynamic” aspects; etc; like it is designed for that is fine.

    What I mean is unnecessarily placing a barrier in-front of the user regarding actually viewing and navigating of what most would consider standard static text content.

    I’d consider the above scenario “broken CSS” since it’s making it a pain in the neck to actually try to view content or interactive with it, e.g. preventing pointing devices from allowing you to activate typical hyperlinks – in the absence of JavaScript.

    Sites where some ‘progressive enhancement’ appears to have been thrown out of the window type of thing: http://www.ukwda.org/ would be a nice example (please view with JavaScript disabled) where they seem to misunderstand some basic web accessibility principles.

    I’m pretty sure that styled NOSCRIPT, “JavaScript required” lightbox-style message didn’t have to take up the whole viewport?

    • http://www.onsman.com Ricky Onsman

      Yes, I’d describe that as breaking the user experience through poor CSS implementation. The UKWDA site taking over the whole viewport to deliver the JS warning is bad enough, but that they won’t allow me to ignore it and instead demand I go to a Google page is just silly and counter-productive. We’re interested in both poor decision-making (such as this) and good choices poorly coded and implemented.

      BTW, we’re aware that our own sites have issues – it’s part of what drove us to explore this. Some of our sites – and some pages within our sites – definitely need fixing. Part of this is about devising a tool to do that, and understanding other examples of broken CSS and JS will help.

  • http://www.davidclick.com David

    Great concept :-) If i come across one I’ll ping it over!

  • Joshua Paling

    On buyinvite.com.au, the top nav is broken in the latest Firefox, though you have to have signed in with an account to see it.

  • http://www.ilmiguy.com shayan sheikh

    i am having an overlaping problem of images in my website as shown in the fig. i have designed my website in dreamweaver CS5. i left the homepage and designed the inner pages. later i added easy rotator application and put a slide show on my website. Now, i see my homepage perfect on IE, firefox and chrome but in dreamweaver, i have set 100% width for the slideshow and it goes way outside the box. Google and Bing views a website on Lynx browser. Lynx browser also shows my picture slider way outside the frame. The same case is with my Spry horizontal bar.

    I have tried everything. but of no use.

    Ricky please take a look at my website. the website is http://www.ilmiguy.com

    and why my menu bar is not covering the complete area and leave a white area on the right. if i add new menu item, it goes into second line. why ?

  • http://www.ilmiguy.com shayan sheikh

    and also on my webmaster profile and on google search when clicked on view picture of website shows a distorted overlapping page.

  • B Ward

    This one is fine on the desktop, but is a broken (or just poorly implemented) responsive design when viewed on mobile.

    http://xbox.com/en-US/xbox360/consoles/entertainment-for-all

    This is the current Xbox promotion that Microsoft is running. I went to the site from my phone, to find they have a beautiful responsive design… That doesn’t work.

    It scales and locks everything to the screen width like a good responsive design should, unfortunately it chops off about 50% of the content! Look at the chart for the most obvious problem.

  • http://caseypalmer.com Casey E. Palmer

    I’m pretty sure that my friend’s PB&J Mag http://www.pbjmag.ca/ and my site http://caseypalmer.com don’t QUITE work the way they should across all browsers….

  • http://blog.vinhkhoa.com/ Khoa

    When I just read the title, I thought you are going to show me examples where a brokens css is wanted (done deliberately), maybe because it allows you to do something that correct CSS can’t deliver :-)