Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 2174

Aug 21st, 2009

Trying to overlap divs in CSS - IE7 problem

Expand Post »

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.

Similar Threads

IMG problem in IE7 in PHP
help for compliance css for ie7 and firefox3 in HTML and CSS
IE7 Problem, Spyware related? HJ this log included. in Viruses, Spyware and other Nasties
CSS and IE7 problem in layout in Site Layout and Usability
CSS Working in FF, not in IE problem :) in HTML and CSS

xylude

Reputation Points: 13

Solved Threads: 11

Junior Poster

Offline

122 posts
since May 2008

Permalink

Aug 22nd, 2009

Re: Trying to overlap divs in CSS - IE7 problem

You should correct your HTML errors first

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

Permalink

Aug 22nd, 2009

Re: Trying to overlap divs in CSS - IE7 problem

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.

xylude

Reputation Points: 13

Solved Threads: 11

Junior Poster

Offline

122 posts
since May 2008

Permalink

Aug 22nd, 2009

Re: Trying to overlap divs in CSS - IE7 problem

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:

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:

(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

(Toggle Plain Text)

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

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

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

Permalink

Aug 22nd, 2009

Re: Trying to overlap divs in CSS - IE7 problem

Troy III,

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

xylude

Reputation Points: 13

Solved Threads: 11

Junior Poster

Offline

122 posts
since May 2008

Permalink

Aug 22nd, 2009

Re: Trying to overlap divs in CSS - IE7 problem

Click to Expand / Collapse Quote 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.

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: ie6 and png transparancy (sorry lol)

Next Thread in HTML and CSS Forum Timeline: List list list

DaniWeb Message

Cancel Changes

User Name
Password