Ridiculous background-image bug in Chrome 3/Safari 4

[aj_nsc]

This is one of the stupidest bugs I've ever encounter and it makes me mad(der than usual) to have to create code to satisfy different browsers.

The page:

http://www.memoriesforever.ca/wrdc

When you load up the page in Safari or Chrome, the background image of the login box is cutoff on the bottom - this becomes obvious when you enter something into either of the inputs (a blank space will suffice). If your browser automatically remembers the form values, then as soon as you focus on one of the fields that has content in it, the background will load in full.

Has anybody come across this before? I can't seem to find a bug report on it anywhere.....

[ssystems]

check if you taking out the overflow: hidden for #login helps

[aj_nsc]

It doesn't....and that's kind of silly anyway, why would overflow: hidden "work" only when there's no content in focus in either of the input fields?

Besides, the overflow: hidden is just a method of getting a parent container to clear all child floats (the login button is floated left....so I want the fieldset to clear it to apply the background image to the whole box). If I take that out altogether and apply a height: 1000000000px (so I know there's enough room for the background image to get displayed), I get a whole lot of scrollbar, but the image still gets cut off until I enter something in the input fields.

[ssystems]

Apologies for the silly suggestion, I just looked at what you have roughly. A not so "silly" solution was to isolate the problem. Take out your js file and you'll find out that it's somewhere in that file that's causing the issue.