CSS Float Text Drop in IE7

Hi,

Please go easy on me. This is my first website. :)

I am having trouble getting my text to line up how I want it to in IE7. It works fine in Firefox and Safari. Wondering if someone can help me fix and understand where I am going wrong.

Page is up at:
http://www.doublehappinesscelebrant.com.au/DHappiness/pricing.html

Relevant code as follows: -please let me know if I haven't included enough.

<div id="text">
   <p class="content">
   <img src="../Documents/Website Projects/xxx/girl_1.png" alt="special melbourne weddings" width="250" height="375" class="image_price_girl" /><h1>Pricing   </h1>
   <p class="content">Fees depend on the time of year, services needed and scheduling. I am flexible and negotitable but my fees typically start at $300 which includes all of my basic <a href="../Documents/Website Projects/DHappiness/services.html">services</a>.   </p>
   <p class="content">Please <a href="../Documents/Website Projects/xxx/contact.html">contact me</a> and I will be happy to talk to you about your needs and what I can do to make your day very special. </p>
   <p class="content">&nbsp;</p>
 </div><br class="clear" />

#text {
	margin-top: 20px;
	margin-right: 20px;

.image_price_girl {
	float: left;
	height: 375px;

.content {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-style: normal;
	color: #666;
	width: 900px;
	margin-left: 20px;
}
#container  {
	width: 920px;
	border: 0;
	text-align: left;
	background: #FFF;
	margin-left: 2px;
	margin: 1px auto;
	}

Thanks so much....

Littlemt

3

Contributors

6

Replies

2 Months

Discussion Span

2 Years Ago

Last Updated

7

Views

littlemt

Newbie Poster

10 posts since Jul 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

What I did to fix your layout issues was to one drop the clear class in favor of a different layout fix which incorporates the zoom:1 and clears the content immediately after the float containing element. I also removed the image from the first <p> tag and placed it into its own containing div which I floated left. With the clearfix class I've used you no longer need to add a <br class=clear> or zoom:1 individually.

.clearfix {
    zoom: 1;     /* triggers hasLayout */
    } 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#leftCol{
    float:left;
}
 
</STYLE></HEAD>
 
 
<BODY class="oneColFixCtrHdr">
    <DIV id="container">
	<DIV id="header">
	    <A href="http://www.doublehappinesscelebrant.com.au/DHappiness/index.html">
		<IMG border="0" src="http://www.doublehappinesscelebrant.com.au/DHappiness/working%20images/trans.png" width="920" height="200" /> 
	    </A>
	    <H1>
		Double Happiness Marriage Celebrant 
	    </H1>
	</DIV>
	<DIV id="navigation" class=clearfix>
	    <UL id="navbar">
		<LI>
		    <A href="http://www.doublehappinesscelebrant.com.au/DHappiness/contact.html">Contact Me</A> 
		</LI>
		<LI>
		    <A href="http://www.doublehappinesscelebrant.com.au/DHappiness/pricing.html">Prices</A> 
		</LI>
		<LI>
		    <A href="http://www.doublehappinesscelebrant.com.au/DHappiness/testimonial.html">Testimonial</A> 
		</LI>
		<LI>
		    <A href="http://www.doublehappinesscelebrant.com.au/DHappiness/services.html">My Services</A> 
		    <UL>
			<LI>
			    <A href="http://www.doublehappinesscelebrant.com.au/DHappiness/specialties.html">Specialties</A> 
			</LI>
		    </UL>
		</LI>
	    </UL>
	</DIV>
	<DIV id="text" class=clearfix>
	    <P class="content"></P>
	    <H1>Pricing </H1>
	    <div id="leftCol">
		<IMG class="image_price_girl" alt="special melbourne weddings" src="http://www.doublehappinesscelebrant.com.au/DHappiness/girl_1.png" width="270" height="375" />
	    </div>
		<p class=content>
		    Fees depend on the time of year, services needed and scheduling. I am flexible and negotitable but my fees typically 
		    start at $300 which includes all of my basic 
		    <A href="http://www.doublehappinesscelebrant.com.au/DHappiness/services.html">services</A>. 
		</P>
		<P class=content>
		    Please <A href="http://www.doublehappinesscelebrant.com.au/DHappiness/contact.html">contact me</A> and I will be happy 
		    to talk to you about your needs and what I can do to make your day very special. 
		</P>
	</DIV>
	<P class="main_text">
	&nbsp;
	</P>
	<DIV id="footer">
	    <P>
		Carrie Kong Marriage Celebrant<BR />p: 0418 321 818<BR />carrie@doublehappinessmarriagecelebrant.com 
		<!-- end #footer -->
	    </P>
	    <!-- end #footer -->
	</DIV>
    <!-- end #container -->
    </DIV>

In case you haven't found it before you might check out this blog on IE float issues: http://www.positioniseverything.net/easyclearing.html

scrappedcola

Posting Whiz in Training

227 posts since Dec 2009

Reputation Points: 27

Solved Threads: 45

Skill Endorsements: 0

2 Years Ago

0

THANK YOU Scrappedcola!!

I really appreciate your time. I integrated your code into mine (after I couldn't get it to work on my own, I just cut and pasted your version into my page) and transferred the CSS onto my main.css.

When I look at the page on IE7, the text still drops under the picture....is it just me? I have cleared cookies and deleted my history...still no luck..

Littlemt

littlemt

Newbie Poster

10 posts since Jul 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

I looked back at my test code and I realized that I also removed the width from the .content class. The width to the right of the image is only 600px so 900 px will push it down below the image as it doesn't have the space. Try removing it you don't really need to set a fixed width (if you want the image and text to take up a specific area you should set the width of the containing div.

scrappedcola

Posting Whiz in Training

227 posts since Dec 2009

Reputation Points: 27

Solved Threads: 45

Skill Endorsements: 0

2 Years Ago

0

YAY!!! That's it. THANK YOU!! THANK YOU!! THANK YOU!!. I have spent so many hours aimlessly trying to fix it. I have a lot to learn ;).

I really appreciate your time Scrappedcola. You are SUPER!

littlemt

Newbie Poster

10 posts since Jul 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

On of the books I got when I started my web dev job was http://apress.com/book/view/159059732x. It cleared up some basic stuff and showed me some things I hadden't considered yet. Another thing that will help is getting to know your tools such as firebug for Firefox and the Developer tools for IE. Both tools can cut your debug time in 1/2 just by being able to see how the browser see's your elements and both allow you to edit the html and css in the browser (which you have to remember to copy back to your actual file) with out actually changing the actual code.

scrappedcola

Posting Whiz in Training

227 posts since Dec 2009

Reputation Points: 27

Solved Threads: 45

Skill Endorsements: 0

2 Years Ago

0

FLOAT concept itself is not easy to properly understand, moreover FLOATs are a source of many browser bugs (mainly IE bugs) which make FLOAT constructs difficult to master across browsers... and easy to break.

charlesying

Newbie Poster

23 posts since Apr 2010

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 0

CSS Float Text Drop in IE7

This article has been dead for over three months: Start a new discussion instead