IE Issues With slider

HTML & CSS
1

Hello,

Ok this site looks perfectly fine on all other Browsers except for IE of course, now I can modify the code too much, but is there a simple way to move the slider/image up to the top like it looks on FireFox, Chrome and Safari, take a look at it in IE I only used Adobe BrowserLAb to check and the image is way down below the Navigation.

http://modocom.ca/theclub/

Thanks,

Mike

2

You have quite a weirdly coded page. Kind of awkward to fix. Random margin values of over 300 pixels. This is the best I got without offering a complete recode.

#MainMenu{margin-top:0!important;top:379px}#TopPanel ul.section-tabs{overflow:hidden;}




#MainHeader{position:relative;}
#Logo {left:80px;margin:0;top:-20px;}


#Top #PageTop{position:absolute;margin-top:0;margin-left:-482px;left:50%;top:20px;}
.inner-2{position:relative;}

I’ll go through each. On #MainMenu, I basically just make use of the top: coordinate instead of margin, that way the flow of the document won’t be affected, and you can place it easier. Not the best way to do this, but considering your page, it’s all I got.

The ul that has overflow:hidden; was just something you needed on your page. You could take it out and I doubt anything bad would happen. But you needed to contain your lfoats there. Not a biggie.

The #MainHeader{} was to give a parental stacking context for the big golf image.

The #PageTop code basically removed the huge margin-top (-358px off the top of my head?) and instead places it absolutely. This was a huge part of your problem. This is a more …stable way to place it, although not the best. The position:relative on .inner-2 makes the placement as accurate as can be for the countryclub image.

3

Thanks Ryan!!!

Your a genius I’m looking at it in Adobe Browserlab and for the most part it looks great except in IE 7 the slider image is off by a bit and looks to be infront of the navigation but looks fine in IE 9. Any ideas how to fix that.

Thanks,

Mike

4

It seems you didn’t impliment all the fixes. Did you only put a bit of my code into use? For example, I’m looking at #PageTop and it still has a -426 top margin applied.

5

Ok made, that change sorry forgot to remove that.

I think I got everything, still looks off just in IE7 just a bit, maybe I’m missing something.

Thanks

6

Long story short, my IE7 doesn’t work, and my IE7 emulator (the META tag) isn’t working to show the issue (although browsershots.org does show me it).

I don’t think the college campus computers have IE7 (they might). If noone has answered this by the morning tomorrow, I’ll have a peak in it then.

Right now the solution I gave you is hoping to make it show properly via pixel perfection. Never a perfect thing. I’d just set a conditional comment for IE7 to give it a different top: value.

ACTUALLY, what I’d do is completely recode that page. I don’t know why you have it set up like that to begin with. You know better than that :).

7

Thanks Ryan,

Appreciate that, looking forward to hearing from you tomorrow morning.

Yea, I know about the coding, it was a template given to me that I had to adjust stuff with so it wasn’t proper to begin with on any browser so been modifying it to work with what I can.

Your the best man!!!

8

Hi Ryan,

Did you get a chance to take a peek at this on IE7

Thanks,

Mike

9

No, sorry. Was busy doing homework (due in the next class).

Sorry about this. Hopefully someone with IE7 can chip in. Otherwise this will be delayed until Thursday morning (if I even get to it then).

Did you try the suggestion in post #6? Probably not the best solution, although if noone else chips in, at least you have a way to fix it.