View Full Version : Resolved cross browser background issue on a div with hidden overflow

Oct 22nd, 2010, 02:22 PM
all Fixed, sorry for wrong forum. :o

Hi there I'm relatively new to web building and would appreciate a little helping hand, I'm working on a site and thought I'd try out some jquery to expand a section when clicked to reveal it's hidden overflow and it's working fine, but I'm having an issue involving the background image which i've stuck to the bottom of the expanding div tag. In internet explorer the bg image sticks to the bottom of the div's content and vanishes along with that content into the overflow when the section collapses, and in fire fox the bg image sticks to the bottom of the div regardless of where the content starts or finishes. you can see the file here (http://www.qnslimited.co.uk/websites/red/) to take a look.

click "employers" and see the differance between ie and firefox. There are different ways for me to do this I was just wondering if there's a simpler way than what i'm planning. I want it to behave the way it does in Firefox.

here's the css i'm using for the expanding div. if it helps.

#topInfo {
height: 10px;
overflow: hidden;
background-image: url(images/employerlowerbg.jpg);
background-repeat: repeat-x;
color: #00FF00;
background-position:bottom right;


Oct 22nd, 2010, 02:33 PM
I'm struggling to see any difference between FF and IE7 or IE8. Are we talking about the black gradient border? That disappears in all of these browsers for me when the div is hidden.

Or have I misunderstood?

EDIT: Ah, I haven't misunderstood, you've fixed it.