HTML and CSS

Trying to overlap divs in CSS - IE7 problem

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2008

Posts: 27

Reputation: xylude is an unknown quantity at this point

Solved Threads: 0

xylude

Offline

Light Poster

Trying to overlap divs in CSS - IE7 problem

Aug 21st, 2009

I am working on a website (http://www.jasonacrider.com/meisseTe...ess/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/meisseTe...ess/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.

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Trying to overlap divs in CSS - IE7 problem

Aug 22nd, 2009

You should correct your HTML errors first

•

Join Date: May 2008

Posts: 27

Reputation: xylude is an unknown quantity at this point

Solved Threads: 0

xylude

Offline

Light Poster

Re: Trying to overlap divs in CSS - IE7 problem

Aug 22nd, 2009

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.

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Trying to overlap divs in CSS - IE7 problem

Aug 22nd, 2009

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:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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:

Help with Code Tags

(Toggle Plain Text)

.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

Help with Code Tags

(Toggle Plain Text)

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

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

•

Join Date: May 2008

Posts: 27

Reputation: xylude is an unknown quantity at this point

Solved Threads: 0

xylude

Offline

Light Poster

Re: Trying to overlap divs in CSS - IE7 problem

Aug 22nd, 2009

Troy III,

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

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Trying to overlap divs in CSS - IE7 problem

Aug 22nd, 2009

•

Originally Posted by xylude

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.