Site broken in IE and Firefox

Hey guys,

Was wondering if you could help me debug my banner at

Top Right corner is not lining up with the content area

seems to be the clearfix

How do I remove the clearfix?

Looks ok to me unless i’m looking at the wrong thing ? :slight_smile:

For me, it doesn’t.

In Chrome, the gap is almost invisible

But in IE is really big

I’m not seeing a problem in Firefox 33 (and I don’t have IE handy just now to test).

I think i fixed it by changing the img tag from

Max-width 100%

To just

Width 100%

1 Like

Well done! Sorry that I couldn’t help more

Could you guys please check IE, using a Mac so can’t tell atm

Not bad, if I wasn’t looking for it I wouldn’t have noticed.

Looks like IE has a “1px jog” thing happening.

Thanks Mittineague,

1px aint too bad, IE sucks balls anyway!

Yes it’s the old IE6 1px jog rearing its ugly head again. They never really fixed it they just tried to hide it better but in some situations it reappears.

In your case its the border-radius that triggers the bug.

Simple demo.

<meta charset="utf-8">
<title>Untitled Document</title>
body {
.container {
.header {

<div class="container">
        <div class="header"> </div>

Just close the IE11 browser window one pixel at a time as the jog is only evident on every odd width pixel of the browser viewport.

There is no fix even though some suggest using fractions of pixels but this just makes the jog appear on even pixels instead.

The only fix is to remove the border-radius and the bug goes away. Or alternatively use a transparent logo instead of matching the top of the layout exactly.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.