•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,768 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,159 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1601 | Replies: 2 | Solved
 |
•
•
Join Date: Apr 2006
Location: San Jose, CA
Posts: 24
Reputation: 
Rep Power: 3
Solved Threads: 0
Newbie Poster
Text Repeating in IE in 2-Col Layout "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/...ut-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:
Here is my 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!
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/...ut-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!
•
•
Join Date: Apr 2006
Location: San Jose, CA
Posts: 24
Reputation:
Rep Power: 3
Solved Threads: 0
Newbie Poster
Appears IE (6 anyway) has issues with (perfectly valid) comments appearing between multiple float layouts!
http://www.positioniseverything.net/...haracters.html
~(_8^(|) -"Stupid Browser!"
http://www.positioniseverything.net/...haracters.html
~(_8^(|) -"Stupid Browser!"
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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.
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.
Last edited by autocrat : Sep 11th, 2007 at 10:30 am. Reason: For others reading up on the issue!
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
http://www.choose-easyweb.com - Not my design, nor my idea :)
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- Projects for the Beginner (Python)
- Layout Tables to CSS (HTML and CSS)
- Tkinter Spreadsheet (Python)
- Members Create Their Own Webpage? (Site Layout and Usability)
- Which of the 2 designs would you prefer? (Website Reviews)
- Google and Competitive Ads (Advertising Sales Strategies)
- Technology Fallout: Speed of Technology (Troubleshooting Dead Machines)
Other Threads in the HTML and CSS Forum
- Previous Thread: I developd a COM to custom IE printing
- Next Thread: Convent css template to joomla template
