0

"Looks fine in FF, but not in IE" (like no one has heard that one before!).

Ok, I have a more-or-less 2-column layout.
The column on the right contains text, all of which displays ok, except for the last few characters of the last line. What happens is, 2 or 3 characters of the last word in the final paragraph drop to a new line, lose the 20px margin, then repeat themselves.
Its easier to show it than to explain it:
http://www.rickshrum.com/northbeach/new/about-nbps-2.html
It looks fine in Firefox, but in IE the "dropping/repeating" occurs.

All my paragraph (and other tags) are closed, and it validates just fine.
I am hoping it is something simple. I've a feeling this occurrence has something to do with the measures I took to make both columns of equal height, but, of course, I am unsure of what it could be.

Here is my CSS:

body
{
	background-color:#BFB078;
	background-image:url(images/pawprints.gif);
	height:100%;
}

#wrapper
{
	width:930px;
	height:auto !important;
	margin:0 auto;
	margin-top:25px;
	padding: 0px;
	background-color:#f1de97;
	border:1px solid #000000;
	overflow:hidden;
}

img
{
	padding: 0px;
	margin: 0px;
	border:none;
	vertical-align:top;
}

#left-menu
{
	float:left;
	width:198px;
	padding:0px;
	margin:0px;
	background-color:#819ccd;
	height:auto;
	background-image:url(images/vertical-bar.gif); 
	background-repeat:repeat-y; 
	background-position:right;
}

#left-menu img
{
	padding: 0px;
	margin:  0px;
	margin-bottom:1px;
	vertical-align:top;
}

#blurb
{
	float:left;
	clear:none; 
	width:692px;
	line-height:125%; 
	text-align:justify;
	margin:5px 20px 0px 20px;
}

div
{
	margin:0px;
	padding: 0px;
}

Here is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />


<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/home-on.gif','images/products-on.gif','images/about-on.gif','images/specials-on.gif','images/pet-health-on.gif','images/show-dogs-on.gif',images/contact-on.gif')">

<div id= "wrapper">
	<div style="margin:0px;padding:0px;">
		<img src="images/banner-130.gif" alt="North Beach Pet Supplies Banner" width="930" height="130" />
		<img src="images/about-bar-new.gif" alt="mapbar" width="930" height="26" border="0" usemap="#Map" />
		<map name="Map" id="Map">
			<area shape="rect" coords="209,3,262,21" href="index.html" alt="home page" />
			<area shape="rect" coords="285,4,355,22" href="specials.html" alt="specials" />
			<area shape="rect" coords="373,3,448,22" href="products.html" alt="products" />
			<area shape="rect" coords="466,4,555,20" href="pet-health.html" alt="health" />
			<area shape="rect" coords="569,4,661,22" href="show-dogs.html" alt="show dogs" />
			<area shape="rect" coords="680,3,781,22" href="about-nbps.html" alt="about" />
			<area shape="rect" coords="800,3,913,22" href="contact-nbps.html" alt="contact" />
		</map>
	</div>
	<div style="float:left; width:100%;">
	<div id="left-menu">
  		<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home-on.gif',1)">
  		<img src="images/home-off.gif" alt="home buttons" name="home" width="169" height="69" border="0" id="home" /></a>
		
		<a href="specials.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('specials','','images/specials-on.gif',1)">
  		<img src="images/specials-off.gif" alt="Specials Button" name="specials" width="169" height="69" border="0" id="specials" /></a> 
  
  		<a href="products.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('products','','images/products-on.gif',1)">
		<img src="images/products-off.gif" alt="products buttons" name="products" width="169" height="69" border="0" id="products" /></a> 
		
		<a href="pet-health.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pet-health','','images/pet-health-on.gif',1)">
  		<img src="images/pet-health-off.gif" alt="Pet Health Button" name="pet-health" width="169" height="69" border="0" id="pet-health" /></a> 
		
		<a href="show-dogs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('show-dogs','','images/show-dogs-on.gif',1)">
  		<img src="images/show-dogs-off.gif" alt="Show Dogs Button" name="show-dogs" width="169" height="69" border="0" id="show-dogs" /></a> 
  
  		<a href="about-nbps.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/about-on.gif',1)">
  		<img src="images/about-off.gif" alt="About NBPS" name="about" width="169" height="69" border="0" id="about" /></a>   
  		
		<a href="contact-nbps.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact-on.gif',1)">
  		<img src="images/contact-off.gif" alt="Contact NBPS" name="contact" width="169" height="69" border="0" id="contact" /></a>  
		
  		<img src="images/bottom-green-panel.gif" alt="bottom green panel" width="169" height="22" style="margin-bottom:1px; padding:0px;background-color:#f4e099;" />
				
	</div>
 
  <!--<div style="float:left; clear:none;width:29px;height:auto;margin-left:0px; background-image:url(images/vertical-bar.gif); background-repeat:repeat;">-->
		<!--<img src="images/vertical-bar.gif" alt="Vertical Bar" width="29" height="511" />  -->
	<!--</div> -->
 <div id="blurb">
   <p>New <em>North Beach Pet Supplies</em> store owner, Susan Walker, has finally
     realized her lifelong dream of owning her own pet supply store when she
     purchased North Beach Pet Supplies in October of 2005. 
	 </p>
  <p>Susan&acute;s background includes her being an active member of the local
     pet industry for over 30 years. She has also been actively involved in the
     breeding and showing of both Irish Setters and Golden Retrievers for over
     20 years. She has also been a member of the <em>Irish Setter Club of the
     Pacific</em> for several years and has served as both its President and
     Vice President in the past five years. In that capacity she has chaired
     a variety of public events. 
	 </p>
   <p>As an owner and breeder of dogs and cats most of her adult life, Susan
     has had to deal with a variety of pet health issues. Her approach to each
     issue has always included both Western and alternative philosophies. She
     strongly believes in blending the two approaches. Some of the alternative
     methods include acupuncture, chiropractic and Chinese herbs to achieve better
     musculo-skeletal health and aid in the treatment of allergies and digestive
     ailments such as Inflammatory Bowel Disease. 
	 </p>
   <p>Susan currently has three Irish Setters and two cats. Her cats, Serabe,
     10, and Patches, 6, are stay at home cats, but her Irish Setters, Danny,
     9, Tara, 5 and Sox, 2, can frequently be seen in the store. Danny holds
     the title of <em>Champion</em> and he is also a registered therapy dog through <em>Therapy
     Dogs, Inc</em>. He is also the store&prime;s resident celebrity as he was
     recently chosen to model for the latest <em>Purina ProPlan Sensitive Skin
     and Stomach</em> food labels. Tara also holds the title <em>Champion</em> and
     her offspring, Sox, is working toward that goal. 
	 </p>
	 
   <p>Come by and visit the store and meet Susan and her charming companions
     and see all the new pet-friendly changes she has made to improve the store
     and upgrade and expand the inventory, including clothing, collars, leashes, pet dishes, treats and cool toys.
</p>
 </div>
 </div>
</div>
</body>
</html>

Any clues as to what is going on?

NOTE: If you click on any links on this page, the links will look messed up, since I have not adjusted their coding yet.

Thanks! :)

2
Contributors
2
Replies
3
Views
10 Years
Discussion Span
Last Post by autocrat
0

Okay... make sure that any floated columns do not have a combined width of 100% (or more!).

Remove comments from inbetween flaoted elements.

See what results you get.
In most cases, that will solve the problem.

Additionally, beware of using display:none.

Basically, as with most of the IE Bugs, you need to read up on "hasLayout".
Once you are aware of what that entails, what the results are and how to avoid it / use it, your life agaisnt IE gets soooo much easier.

Best of luck.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.