CSS compatibility issue w/ IE vs FF?

[gtp1013]

While I seem to be getting more familar with CSS, I still have yet to
figure out a problem that I have been having with image placement
between a float:left div and a float:right div. The problem is
non-existent using Firefox, but is ever-present when viewing the page
in IE. Here's an example of what I'm talking about...

http://www.maptech-inc.com/IndexCSS.htm

I want the div with "globe" image to be on the same "line"
(horizontally) as the div with the "Upcoming Events" image and the
scroller on the left. It appears the way that I want it to in Firefox,
but the float:right div always drops underneath the float:left div in
Internet Explorer whenever I include an image. Is there a way to "fix"
this? TIA.

 

[dorayme]

While I seem to be getting more familar with CSS, I still have yet to
figure out a problem that I have been having with image placement
between a float:left div and a float:right div. The problem is
non-existent using Firefox, but is ever-present when viewing the page
in IE. Here's an example of what I'm talking about...

http://www.maptech-inc.com/IndexCSS.htm

I want the div with "globe" image to be on the same "line"
(horizontally) as the div with the "Upcoming Events" image and the
scroller on the left. It appears the way that I want it to in Firefox,
but the float:right div always drops underneath the float:left div in
Internet Explorer whenever I include an image. Is there a way to "fix"
this? TIA.

Take a peek at http://www.positioniseverything.net/explorer.html

 

[gtp1013]

Take a peek at http://www.positioniseverything.net/explorer.html

Thanks for the heads-up on that link. The "expanding box" problem
seemed to be the most similar problem to what I am experiencing.
However, after trying the "overlap:hidden" work-around and not seeing
any change in the appearance, I realized that my vertical scroller
seems to be the source of the problem. While "overlap:hidden" can
overcome the issue of oversized content when it comes to images and
text, it seemingly has no effect on the problem when the cause is a
java-based scroller (or at the very least, the java scroller that I'm
trying to use). I checked the width of the scroller, and it is set at a
fixed 150px. I tried setting the div container to 250 px, just to make
sure that the scroller wasn't oversized, but it did not alleviate the
problem, so I switched it back to 150 px. Any ideas where I'm going
wrong?

http://www.maptech-inc.com/IndexCSS.htm

The corresponding files for the scroller are...

vscroll_code_GTP.js
vscroll_data_for_css.js

I'm not sure how one would provide links for those two files via a url.

-George

 

[dorayme]

Thanks for the heads-up on that link. The "expanding box" problem
seemed to be the most similar problem to what I am experiencing....

http://www.maptech-inc.com/IndexCSS.htm

I am on dial up and it is taking simply ages to load.

I would remove overflow:hidden; from

..Cont_Content {
width:100%;
height:auto;
background-color: #000000;
overflow:hidden;
}

to make it behave better - at least it does behave better in FF
when you do this.