petegale

Sorry, I should have been a little more specific. The height is there on the div itself – this is “inline styling”, so it won’t be in the stylesheet. It’s probably being set by a JavaScript function which is trying to work out the height of the page dynamically, and then fix the div at that height (for some odd reason I can’t fathom).

If that’s the case, it’s hard for me to diagnose in Firebug as the resizing will be done on page load. Try putting an overflow hidden on that div, and let me know what happens. So:

.art-layout-cell { overflow: hidden; }

Going on your mention of ‘console’, I had a quick look and I’ve found the problem. Console logs are being made in the JQuery, like this:

console.log('Message');

In your case, the word ‘Message’ is a number representing the filter used. Console.log is for logging messages in a browser’s developer console for help with debugging etc. The problem is that IE’s support of the console feature is pretty poor.

If you go to the page in IE9 and press F12, the developer window should open. Along the 2nd toolbar, between CSS and Script, is the Console tab. Click this, and then try using your filters. You’ll see that you can use more than one, and that the console is now logging numbers.

Basically IE’s support of console only works when the developer tools are actually open, and breaks if they’re not.

Hi Max,

The element containing your content on the homepage has a fixed height on it. Showing you open div tags just so you can see where it is (each div I’m showing you is inside the previous one):

<div id="art-main"><br />
<div class="art-box art-sheet"><br />
<div class="art-box-body art-sheet-body"><br />
<div class="art-layout-wrapper"><br />
<div class="art-content-layout"><br />
<div class="art-content-layout-row"><br />
<div class="art-layout-cell art-content" style="height: 547px;"><br />

Hi there!

I think I can spot the inconsistency here.

The grey gradient background transition is activated when you hover over the link (a tag) within the list item (li tag). Your text changing colour, however, happens when you hover over the actual image, which is inside the link but smaller than the link element is. So you can mouse over the link element without actually hovering over the image to prompt that transition.

I’m not sure how the AnyFont plugin works. The hover doesn’t seem to be changing anything in the CSS, so I assume it’s the plugin doing this with JavaScript – swapping the src of the image element between an image with the text in white and an image with the text in colour.

It’s a little tricky. The simplest solution I can think of is to remove the padding you have on your link elements in the menu, and add padding to the image itself. Then take the hover CSS you’ve got and apply it to the image element instead, so that when you hover over the image it’s the image that gets the grey gradient background.

This should allow you to cover the same surface area both with the size of the grey highlighting and where the mouse triggers this change.

Hope that helps.