CODEWITHSUNDEEP
htmlcssinternet-explorer-8opera
user1318194
user1318194

Reputation:

Opera and IE8 - gap below body

At http://www.duncannz.com I have a problem that only occurs in Opera Opera prior to v12.0 and IE 8. If you open either of those browsers, visit that website and try to scroll down... it will. Even though the body is only 100% width. When you scroll you see a gap that is part of the <html> element not the <body> element, judging by how that extra bit's background looks.

opera problem

Why the gap on the bottom in Opera when you scroll down? Also occurs in IE 8.

Any ideas?
Thanks

EDIT: It's not caused by that footer you see - if you visit a longer page like http://www.duncannz.com/pages/text-to-code.php and scroll down that gap is there.

EDIT 2: So this problem seems to be fixed in Opera 12, aswell as the img border-radius not working bug. But I was on an older version and I frequently apt-get update && apt-get upgrade. If I'm on an old version and have never been told about a new one I'm sure others are too. Plus still need IE 8 fix.

EDIT 3:

I've found the reason, but not quite the solution. I have a box-shadow (and PIE workarounds) on my body. When you apply a blur to a box-shadow, the shadow expands. This expansion causes the shadow to dip below the body, and out of sight. However this glitch in older Opera versions, and in IE8, caused the blur of the shadow that was dipping below the body to not be out of sight, and instead create a scrollable area so you can see the whole box-shadow.

If that's unclear here's a demo - set the first value - "Angle" to 0deg, set the 3rd value - "Blur" to 0px and look. Then increase the blur and you'll see the blur of the shadow dipping below the rectangle. Unfortunately on IE8 this blur creates a gap below the body (so user sees the whole blur)

If I remove the blur there is no scrollable area. However I want the blur - it looks horrible without.

How do I do this?

Upvotes: 0

Views: 205

Answers (2)

karlcow
karlcow

Reputation: 6972

Is there any reason why you have chosen 

body {min-height: 100%;}

instead of 

body {height: 100%;}

btw it still occurs sometimes in Opera 12.0 when you slowly resize the window. There are states where it is happening. I would say that it must hit something like a rounding error or so in the code.

I would also slightly increase the body padding only for the bottom.

Upvotes: 1

alf
alf

Reputation: 18550

You need to remove the margin of the hr:

hr.blackhr {
  margin: 0px;
}

More generally, what you need is a CSS reset to avoid this kind of problems.

Upvotes: 0

Related Questions