Quantcast
Channel: All your code are belong to us
Viewing all articles
Browse latest Browse all 43

Hot off the workshop vol. 2

$
0
0

TK Maxx website rebranding

## After
## Before
 

Website redesign for TK Maxx. Launched just yesterday.
Venda coding all the way in the back end and HTML, JavaScript and CSS in the front end.
View site

What I’ve learnt

The biggest challenge was to make the site work in Internet Explorer 6 and 7. One particularly annoying issue was to make the logo stay on top of the sliding main homepage image. All other browsers were just fine but in IE6 and 7 the logo was hidden behind the image.

![TK Maxx website rebranding, logo bug](http://allurcode.com/wp-content/uploads/2011/03/tkmaxx_rebrand_1.jpg "TK Maxx website rebranding, logo bug")Logo behind image
![TK Maxx website rebranding, logo fixed](http://allurcode.com/wp-content/uploads/2011/03/tkmaxx_rebrand_2.jpg "TK Maxx website rebranding, logo fixed")Logo above image
 

The trick was simple yet not obvious. <div> containing the logo needs not only its z-index set to a higher value than sliding image, but also we have to make sure IE treats it seriously and make our CSS rule important.

logo { z-index: 1000; }

Above will not work whereas below will work like a charm.

logo { z-index: 1000 !important; }


Viewing all articles
Browse latest Browse all 43

Trending Articles