"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´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′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! :)
