AP div Dreamweaver cs3 shifts in IE8

SweetIowa
SweetIowa used Ask the Experts™
on
The page I am working on is located at http://www.helpingservices.org/mentoring/index.shtml

I am using AP divs over a background image (CSS sprite).  The AP divs drop in an animated gif slideshow and text numbers over "Current Matches" bubble and "Kids Waiting" bubble.

It lines up in Firefox and Google Chrome, but these 3 AP divs appear to shift to the left in IE8 - Internet Explorer 8.
The background image is in a div called subNavigation - css is in the file /CSS/master.css

Thank you in advance for your time. -Sweet Iowa
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
JF0

Commented:
What you can do is load a style sheet specifically for IE8, to correct the nuances.

<!--[if IE 8]>
<link rel="stylesheet" href="ie8-fixes.css" />
<![endif]-->

just place that after your normal css files and create the necessary style adjustments.

Author

Commented:
I understand that, I don't understand how to fix it - SW
JF0

Commented:
Understood.

You have created quite a mess for yourself unfortunately! Because you have used absolute positioning on these elements, and you are centering your page, you are at the mercy of your visitors monitors.

This is a problem because you are specifying a left position of 942px. That means those numbers are ALWAYS going to be 942px from the left of the screen. If a person has for example a 52in widescreen monitor with an extremely high resolution then in order to center your page the page will be moved over thousands of px leaving your numbers hanging waaay left of your content.

When I view your page in IE8, FF, and Chrome then the animated gif, as well as the text numbers are all shown far to the left of where they should be. It is not just a problem with IE8.

Does this make sense to you?

I think this can be overcome using a combination of relative + absolute positioning. But there are many changes that would be required and it is difficult to provide you these changes without being able to modify the files directly.
JF0

Commented:
Go ahead and try this, I think it should get you started.

Give your #container a property of position:relative

Then you will need to adjust the top and left properties of the divs containing your image and two text numbers.

Using a combination of relative + absolute you are telling it to position your elements relative to the #container div, instead of relative to the browser window.

Author

Commented:
I see where you're going with that.  Unfortunately, all 3 browsers disliked that (see the results).  

I will be back in the office July 6th, and will not have a chance to fiddle with this again.  I was a bit doubtful at this approach.  *sigh*

I understand your apprehension also.  Thank you for checking in on this.  I apologize that I need to step away from this problem until next week.

-Sweet Iowa
JF0

Commented:
I was watching as you made the changes : )

However I did not see you adjust the top and left properties of the 3 divs (image, text numbers) after you change the position property of #container. I do believe once you do this you will get the results you want.

Enjoy your vacation. We can follow up on this when you return.


Author

Commented:
JF0-

Sorry, I missed that part.  I just messed with the slideshow picture (not the number bubbles).  It seems to work! - What do you see on your screen?

I am taking off - I will your check your response from home - SweetIowa
Commented:
It looks normal now. I looked at it from 3 monitors.

Author

Commented:
JF0-

Back this morning.  Thank you for your advice!  I have a larger screen at home and I see what you mean.  I will make the other corrections next week when I return to work.

Best Regards,
Sweet Iowa

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial