Trying to overlap divs in CSS - IE7 problem

[xylude]

I am working on a website ( http://www.jasonacrider.com/meisseTest/cypress/index.html ) and it looks right in Firefox (of course) but IE doesn't want to let the DIV's overlap the way I want them to - it just keeps pushing it under the floating div on the right and centering it.

Can anyone check out my stylesheet at http://www.jasonacrider.com/meisseTest/cypress/styles.css and let me know if or what I can do to make this work?

I have a plan b, but I would prefer to do it this way if I can.

[Troy III]

You should correct your HTML errors first

[xylude]

All 3 minor html goofs are fixed, but your reply really had nothing to do with my question. Regardless, I am just gonna go with plan b and make the background for the div in question part of the background image since I am strapped for time to get this project done.

[Troy III]

Here,

First thing you should do is to remove your script from HTML element and place it somewhere before HEADER element closure.

Second:
Something on the right should follow something on its left, not the opposite, this adds confusion.
Put your HTML back to its normal order of its rendering flow, like this:

<DIV class=body>

 <DIV class=bodyTxt>
  <DIV class=bodyTxtInner>
	<H1>HOME</H1>
	<P>Gary Jones and Rick Taylor are the owner/operators (under the direct 
	supervision of their wives Janice and Carol) of the 
	<SPAN class=yellow><STRONG>
	Cypress Hill Winery</STRONG></SPAN>.
	 The current location 
	was opened in June, 2009.</P>
	<P>This small urban winery is in the lower level of an old sandstone and brick 
	building located in the downtown Carrousel District of Mansfield, OH. This is a 
	true wine cellar where the tasting room is situated in the midst of a working 
	winery. The exposed stone walls, the oak wine barrels and the rustic 
	surroundings all contribute to the ambiance and relaxing atmosphere. 
	</P>
  </DIV>
 </DIV>

 <DIV class=floatyImg>
  <IMG height=362 src="images/hompageImages.png" width=400>
 </DIV>

</DIV>

So you won't need the "z-index" anymore.

Third, - the CSS:

.body {
	background: url("images/BG.png"); 
	overflow: auto; 
	width: 100%; 
	height: 379px; }

.bodyTxt {
	padding: 5px 0 5px 10px;
	background: url("images/bodyBg.png"); 
	width: 400px; 
	color: #fff; 
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px;
	position: absolute;
	margin:10px; /* optional */}

.floatyImg {
	float: right;
	width: 400px; 
	position: relative;
	margin-right: 20px; }

.bodyTxtInner {
	padding: 0 0 0 15px; /* optional */
	width: 265px }

additionally .separator {
background: url("images/separator.png");
height: 11px;
overflow:hidden; /* required */

@ element .outer , you should remove "text-align: center"

[xylude]

Troy III,

I really appreciate all the help! I decided to go ahead with plan b anyways - but the advice did help some.

[Troy III]

Troy III,

I really appreciate all the help! I decided to go ahead with plan b anyways - but the advice did help some.

I never knew you were fighting with your deadline, and was not ready to examine your css, before correcting html problems - simply because it is impossible to control the css content interpretation with a broken structure.

But soon after I realized that those 11 html errors reported were all caused by improper placing of your script inside the html element. And since these errors are forgiven and corrected by most of the browsers - I decided to look further in the code.
I noticed that switch of appearing divs you made. But that was just the half of the problem solved.
Than I looked in your CSS and found that both elements are floated and relatively positioned. It worked in FX by accident and only because of a bug known as content bleed-in/out of element containers there. Otherwise floating elements should drop down as soon as there is not enough space to fit them all.

The code I provided will work perfectly in all agents supporting float and positioning...

You can go with your plan B, but I wouldn't recommend it - your page is already too heavy for that near 600 bytes of content. While on the other side your server is equally slow. In addition, you have >27KB of dense javascript code just to make them corners appear round. And your images are too heavy already...

And again it's your choice...
p.s.:
I happen to look at your new code and realize that you've already implemented my solution suggestions...

Thanks for your feedback.