0

This is possibly the most irritating thing ever.

I've spent a long long time troubleshooting to this to no avail, so please someone help put me out of misery!!

I'm trying to float the sub nav under products over the image below in IE7. Easy? NOPE!

Kara
  • 6,115
  • 16
  • 50
  • 57
Andy
  • 2,991
  • 9
  • 43
  • 62

1 Answers1

0
  • On #menu ul, remove position: relative.
  • On #header, remove position: relative, and add some high z-index value.
    I tested it with z-index: 300.

See this previous answer of mine for further information about the nature of the bug.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Thanks for the feedback, how can i position the other elements? :p – Andy Mar 15 '11 at 01:16
  • Looking at the live site, I see that it worked but I broke something. I'll take another look. Just the yellow triangle thing? – thirtydot Mar 15 '11 at 01:17
  • And the mild gradient which adds a dropshadow below – Andy Mar 15 '11 at 01:19
  • I've figured it out.. I think. On `#bg-promo`, remove the `margin-top`. This moves the gradient thing back to where it was. On `#push`, remove the IE7 specific styling in `ie7.css`. Edit: wait, where is that triangle supposed to be? Like it is in Firefox? – thirtydot Mar 15 '11 at 01:25
  • O god, that's so not sorted. Will look again (try resizing the window..) – thirtydot Mar 15 '11 at 01:29
  • yeh did that one :) Big pain in the ass! I hate iE – Andy Mar 15 '11 at 01:31
  • 1
    This is ridiculously hard because of the liberal use of `position: relative` all over the place. To fix the yellow thing: Move `
    ` to just after the opening tag for `
    `. Remove the IE7 specific styles for `#push`. In the normal CSS, for `#push`, remove the `left` attribute, and add `margin-left: 600px` or whatever number. To fix the gradient, remove the `left` attribute, and adjust the `top` to something like `370px`. The gradient still isn't working in IE7 - but I suggest just sticking `display: none` for it in the IE7 stylesheet - it's very subtle anyway.
     – thirtydot Mar 15 '11 at 01:50
  • just the search buttons not working with the ? mark....other than that i think we're there – Andy Mar 15 '11 at 02:24
  • To `#search`, add `position: relative`. Tweak the `margin-right` from `24px` to `36px` to move it from under the triangle. After this, test your site in all the browsers you care about to make sure we've sorted this. Here's hoping! – thirtydot Mar 15 '11 at 02:31
  • Cheers dude, i just made the graphic smaller in the end. What a nightmare. Thanks again! – Andy Mar 15 '11 at 02:55
  • Yeah, what a nightmare. The hardest I've worked for an accept in a while :) – thirtydot Mar 15 '11 at 02:59