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:

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
  • 256 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by charlesying

Dani AI

Generated

A quick diagnosis and durable fixes for the IE7 float-drop symptom.

The immediate cause in this thread was not the float itself but the page structure and sizing: block-level elements were nested inside a paragraph and the text block had a large fixed width that left no room beside the floated image. Modern browsers often forgive invalid HTML, but older IE versions (IE7 and earlier) can reflow badly when the markup or box math is inconsistent.

A practical, robust approach is: (1) clean the HTML so the image and heading are siblings (no <h1> or other block elements inside a <p>), (2) float only the image and give it a right margin, (3) avoid a fixed text width wider than the available space to the right of the float, and (4) contain the float using the parent (overflow or a clearfix). The following minimal pattern illustrates the structure without repeating code already posted in the thread:

<div id="pricing">
  <img class="price-photo" src="girl_1.png" alt="..." />
  <h1>Pricing</h1>
  <p>Fees depend on the time of year...</p>
  <p>Please contact me...</p>
</div>

#pricing { overflow: hidden; }        /* contains floats in most browsers */
.price-photo { float: left; margin-right: 12px; width: 250px; }

Troubleshooting checklist: validate the HTML to catch nested/missing tags; check computed widths with browser dev tools to confirm available space beside the float; if a containing technique fails in IE7, trigger hasLayout (legacy fix) or use a clearfix variant that supports older IE. As demonstrated, removing an oversized fixed width often resolves the issue; ’s comment about floats being brittle is worth remembering — for long-term projects, modern layout methods (flexbox/grid) avoid many float pitfalls, but for IE7-era support the steps above are the safest path.

Recommended Answers

All 6 Replies

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="">
		<IMG border="0" src="" width="920" height="200" /> 
	    </A>
	    <H1>
		Double Happiness Marriage Celebrant 
	    </H1>
	</DIV>
	<DIV id="navigation" class=clearfix>
	    <UL id="navbar">
		<LI>
		    <A href="">Contact Me</A> 
		</LI>
		<LI>
		    <A href="">Prices</A> 
		</LI>
		<LI>
		    <A href="">Testimonial</A> 
		</LI>
		<LI>
		    <A href="">My Services</A> 
		    <UL>
			<LI>
			    <A href="">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="" 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="">services</A>. 
		</P>
		<P class=content>
		    Please <A href="">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:

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 . 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.