Positioning problem with #inner element with Chrome

HTML & CSS
1

I can’t work out how to fix a positioning problem with #inner which doesn’t display correctly in Mac Version 10.8.2 Google Chrome Version 22.0.1229.79. The #inner is pushed down by about 212px. But in Firefox and Safari (all latest versions) it displays correctly.

In Chrome: http://www.diigo.com/item/image/2ow5n/8mqb
In Firefox: http://www.diigo.com/item/image/2ow5n/2eom
Website Link: http://www.leadershipqld.com.au/

Can anyone help?

2

Hi nikcree . Welcome to the forums. :slight_smile:

Hm, tricky. Somehow, it seems to be the JavaScript causing troubles. With JS off, the slideshow disappears altogether. One thing I’d suggest is to set a height for the slider-wrap div in the CSS, such as

#slider-wrap {height: 614px;}

That way, the div below might get less confused trying to find its position. Worth a try, anyway. :slight_smile:

3

Thanks for the suggestion ralph.m. I set the height of the slider-wrap and it pushed the #pagewrap done OK but the #inner does not seem to position correctly. It should be higher as in Firefox.

4

Have you removed the style? I don’t see it there. It would be interesting to see it in place, as I suspect that’s the first step, if not the whole solution. Maybe even post a test page with that style in there.

5

Got it now. Altered the CSS as follows and this did the trick:

#slider-wrap {
background: none repeat scroll 0 0 #EEE;
margin: 0 0 -170px;
padding: 0;
position: relative;
z-index: -100;
}

#pagewrap {
background: url('images/shadow.png') no-repeat scroll center 0 transparent;
padding: 0;
position: relative;
clear: both;
top: -170px;
}

Thanks for your help

6

Glad you found a solution. The only thing I didn’t like about that solution (and why I didn’t suggest it) is that it creates a big gap before the footer. I guess you could pull that up too, but it’s not ideal.

7

Thanks for pointing that out. I hadn’t scrolled down to check that yet. I have pulled that up now.