Hi guys, loving the site, first-time poster here.

I'm working on this site - http://dev.chriscurddesign.co.uk/mayday

It works in everything other than IE7/IE8 compatibility (don't care about IE6), where the vacancies lists on the right aren't hidden correctly by their parent overflow property.

I have been pulling my hair out trying to get to the bottom of this, its driving me up the wall, anyone got any ideas whatsoever?

Here is an image of the issue, chrome on the left, IE8 compat mode on the right:

alt text

Cheers, -Ben

  • Perhaps there's a debugging technique you could point me in the direction of? Ben Beckford over 6 years ago
  • Just tested in Chrome and IE8, looks exactly the same, what's the effect you're going for? Kyle Sevenoaks over 6 years ago
  • The problem is with IE8 compatibility mode / IE7 Ben Beckford over 6 years ago
  • Yes, it's still displaying exactly the same. :) If you can explain the effect you're going for we can help a bit more. I like the layout of this site by the way! Kyle Sevenoaks over 6 years ago
  • AH! I see what you mean now! How odd, sorry about that. Kyle Sevenoaks over 6 years ago
  • Thanks :) I'll add a screenshot of the problem now... Ben Beckford over 6 years ago
  • There's the screenshot Ben Beckford over 6 years ago
  • Thanks, did you try adding the positions? Kyle Sevenoaks over 6 years ago

2 answers

2
points

Try adding position:relative to your CSS class for rssBox. and position:absolute; for its parent. Not 100% sure it'll work, but it's worked for me before.

Answered over 6 years ago by Kyle Sevenoaks
  • Hmmm when I do that all the .tabContent (parent) divs sit on top of eachother at the top like so - http://dev.chriscurddesign.co.uk/mayday/test/ Ben Beckford over 6 years ago
  • Ok, try as Jordan suggested and also add a fixed width or height, I should have suggested it earlier, just overlooked it. That should force IE to crop the elements as you want :) Kyle Sevenoaks over 6 years ago
  • What element needs to be fixed? Ben Beckford over 6 years ago
  • rssBox needs to have position:absolute; and fixed width and heights while rssWrapper should haveposition:relative;. That should do it. Kyle Sevenoaks over 6 years ago
  • with rssBox position:absolute with fixed width and height and rssWrapper with position:absolute it brakes in all browsers - http://dev.chriscurddesign.co.uk/mayday/test/ What could it be?? Thanks for your help btw! Ben Beckford over 6 years ago
  • one of them should have position:relative; Kyle Sevenoaks over 6 years ago
  • Hey thanks for coming back to me. That was a typo, I was using position :relative on the rssWrapper div. Ben Beckford over 6 years ago
  • No problem, sorry for taking so long, and sorry for the hackaround with the code, but try switching the positions, so the one that has relative and the other has absolute.. Kyle Sevenoaks over 6 years ago
Jordan 469
1
point

The above answer which Kyle gave should work, but also try applying a fixed width or height property to the same container (div) as the overflow property, and then, IE will always crop the contents as expected.

Answered over 6 years ago by Jordan
  • The divs with overflow set to hidden already have fixed widths/heights. The only one that doesn't is .mover and when I do give that a fixed height/width it won't animate up/down anymore Ben Beckford over 6 years ago