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.
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?
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.
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.
Related
I recently just created a website for a company, http://visionaryminds.com/ , For the most part everything is good except for a few browser inconsistencies.
The reason I am posting is an inconstancy I noticed between Chrome and Firefox (IE also had this problem but I used conditional statements to fix them not realizing the problem bled into Firefox)
http://www.visionaryminds.com
When you open the page you will notice a section in the dark gray rounded container that says "Welcome!". In chrome, it is placed where it should be, creating a nice even margin around the entire container. However in Firefox and IE the margin is triple the size.
It appears that despite being in it's own container it's being pushed by the header container outside of it. Anyone have any ideas? I have been at this for days, playing with positioning and z-index with little luck.
Thanks to all who reply,
Spencer
Welcome to the world of negative margins.
In .content_container remove margin-top: -50px and use top: -50px instead.
My website that I'm currently working on have a problem in Firefox 7. A margin pushes the gradient in #wrapper up from the bottom and ruins the flow. I've reset the margin to 0 on body and html already and can't seem to find anything to explain this. Firebug tells me nothing of value on this case.
My code is here and you can look at the website yourself here
Just set the body height to 100%. This might help.
And also add background-attachment:fixed; to avoid the background scrolling just in case your page scrolling.
See this link:
http://lsp2.tpdserver2.co.uk/test.htm
Displays fine in IE/Chrome but in Firefox (6.0.1) there is a 1px border around the blue header.
If I add a background color to the #header-content, the 1px white border dissapears. This seems crazy.
I cannot work out what is going on with this and the related page I am trying to build depends on not having a background colour for the 2nd fixed container.
Here is an image of the problem I see:
Link to Image
It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.
Try #header { opacity:0.9999999; }
Bugzilla : Bug 677095
EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore
Browsers add different defaults if you don't "reset" the CSS, that may be what is going on here.
If the z-index value of your #header-content is not greater than 10, then the bug is fixed. If it's 11 or greater then I can see the mysterious gap too.
Really weird.
I cannot reproduce in FF 6.0.1; however, you can probably work around this with
background-color: transparent;
on the #header-content, or white if you don't want it being see through.
This should still give the fix you mentioned while remaining a blank div as required.
Update:
Ok thanks for the screenshot, still cannot reproduce, this time with ff 6.0.2 - I had a look around after noticing I can reproduce a similar issue on different zoom levels.
Blog post explaining the zoom border bug, which includes this test page. I am not sure if this is involved, seems similar but not the same thing, zoom bug will take off a slice of the whole page including the border of #header-content.
As for your comments around transparent, you can use it and still supply a background image, does this not work for you?
I have been pulling my hair out on this one all day, and I'm hoping someone smarter than me can figure it out.
I'm working on a new design for my site, and I've run into what appears to be a Firefox bug. I am using background-attachment: fixed for a gradient on the <body> element and then I have a full width <div> with another background image at the top of the page. Only in Firefox, there is a small white border at the top of the page and on either side of the <div> background.
I've tried at least a half-dozen different ways of coding the HTML and CSS, and they all produce the same results. Also, the white gap doesn't appear to be there in earlier versions of Firefox (I noticed it in version 6). I even did a clean reinstall of Firefox without any add-ons, and I'm still seeing it. Any ideas on what's causing this? Is my code wrong in some way?
See simplified test case here: http://mygemologist.com/bg-fixed-test.html
Note: This question may be related to: Crazy CSS Issue in Firefox Only - position fixed and background color, but I'm not sure on that.
Dominic, see https://bugzilla.mozilla.org/show_bug.cgi?id=677095 for this issue and https://bugzilla.mozilla.org/show_bug.cgi?id=677095#c47 for a possible workaround.
Maybe use a smaller width image? It seems firefox has issues rendering it, when zooming it goes from properly displayed to having a 1-2px white border above it.
EDIT
When I change the body css to background-position: scroll the problem seems to go away
body {
background: url("http://www.mygemologist.com/resources/bg-gradient.jpg") repeat-x scroll left top transparent;
}
I have a interesting problem with position: fixed in Opera Mobile 11:
Test page: http://dl.dropbox.com/u/841468/testcase/opera/fixed.html
The red <div> should stay fixed on top. If I scroll page down, element moves a bit from top edge of viewport (exactly 93px in device pixels); but if I scroll up, element returns to correct position.
(Screenshot on HTC Desire):
My findings:
Changing zoom level didn't help and didn't change element position from top edge.
It works correctly in Opera Mobile emulators (both 10.1b and 11)
Setting or removing "top" / "left" properties didn't help
Setting "z-index" or "display" properties to some value didn't fixed it
It shows this behavior even when I move viewport with window.scrollTo(x, y)
Setting "zoom" to "reset" didn't work
Mouse events get through this element to element under it (if it is in that incorrect position)
Trying IE hacks didn't work :)
Thanks
This issue has been fixed internally, and the Opera Mobile 11.5 version should roll out with this working correctly.
Unfortunately there is no fix for this, it seems to be a known bug at Opera and they are working on it.
I worked around this bug by using a little Opera specific CSS hack and putting the div to position absolute in the mean time:
noindex:-o-prefocus, div { position: absolute; }
It is a known issue at Opera and we are actively working on a fix. It is though a complex issue involving the painting when rendering.