FT.com advanced search field dropped into the missing-else-hole

The page

<http://search.ft.com/search/totalSearch_New.html>

says "Enter text here:" and if you're using Opera you'll be asking "Where??". The box where one is supposed to type the search phrase has gone AWOL.

Here is the code:

<!– script displays appropriate input box length –><script>writeBox();</script>

So, in order to gain more control of exactly how long box is displayed for search in various browsers, they use a JavaScript to write the code for the box. This page was obviously made by a designer who had not heard about controlling the display and styling with CSS.

Here is the entire function that adds the code to the document:


function writeBox() {
var ht='';
var myvalue = '';
var inputBox1 = '<input type=text value="' + myvalue + '" size="';
var inputBox2 = '" maxlength="200" name="vsc_query" class="all">';

if (is.ie && is.win) {
ht += inputBox1 + '50' + inputBox2;
} else if (is.ie5 && is.mac) {
ht += inputBox1 + '45' + inputBox2;
} else if (is.ie4 && is.mac) {
ht += inputBox1 + '32' + inputBox2;
} else if (is.nav4 && is.win) {
ht += inputBox1 + '33' + inputBox2;
} else if (is.nav4 && is.mac) {
ht += inputBox1 + '58' + inputBox2;
} else if (is.nav4) {
ht += inputBox1 + '28' + inputBox2;
} else if (is.nav6) {
ht += inputBox1 + '30' + inputBox2;
}

document.write(ht);
}

They do sniff for an amazing array of browsers – but they have forgotten to add a "catch-all" rule at the end to do something sensible for browsers they do not detect specifically.

Advertisements

2 thoughts on “FT.com advanced search field dropped into the missing-else-hole

  1. … that's the hover red underlined text on articles caused by :

    .allWide:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #990000;
    text-decoration: underline;
    }

    This is probably because element:hover is correct CSS, but not widely supported unless element is "a", so the FT have not noticed this bug in their CSS. A post at http://my.opera.com/forums/showthread.php?s=9181b41005edbc3e43a5d165ac216cd5&amp;threadid=38685&amp;highlight=ft.com explains the problem.

    The cure is to activate user stylesheets in author mode, add your own to the list by eg :

    [Local CSS Files]
    ….
    Name 12=Hacks for FT and other broken sites
    File 12=D:ProfilesAdministratorApplication DataOperaOpera75profilestylesmyhacks.css
    Active 12=0

    in opera6.ini, and put :

    .allWide:hover {
    color: #000000 !important;
    text-decoration: none !important;
    }

    in the stylesheet myhacks.css. Along with anything else to fix broken sites, naturally.

  2. The problem is more widespread than I thought at first. The code needed to correct it is actually :

    .all:hover, .allWide:hover, .Headline:hover, .bigHeadline:hover {
    color: #000000 !important;
    text-decoration: none !important;
    }

    a.all:hover, a.allWide:hover, a.Headline:hover, a.bigHeadline:hover{
    color: #990000 !important;
    text-decoration: underline !important;
    }

    so that text in the miscoded styles is not red underlined, but links are – this presumably being the intended effect.

    The problem, of course, is that the coders at ft have specified something different from what they intended, but because ie and mozilla accidentally render it as they intended they don't know that. It's the classic "unimplemented feature" trap, where an unimplemented feature is unknowingly invoked – the code works fine until that future day when it's finally implemented, then breaks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s