Member Avatar for littlemt

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

Edited by Nick Evan because: Added tags, removed name
  • 3 Contributors
  • 6 Replies
  • 232 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by charlesying
Member Avatar for scrappedcola

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

Member Avatar for littlemt

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

Member Avatar for scrappedcola

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.

Member Avatar for littlemt

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!

Member Avatar for scrappedcola

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.

Member Avatar for charlesying

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.