IE 6: Problem w/ last 4 char. repeating itself after DIV containing same text

L

liunx

Guest
I'm experiencing a weird bug in IE 6.0 that is basically repeating the last 3 to 4 characters of the last DIV. The characters are an exact duplicate of the last 3 to 4 characters of the paragraph inside the last DIV.

Has this happened to anybody before, and if so, is there a fix?

Here's the code, which illustrates problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1">
<style>
BODY {
padding: 0;
margin: 0;
border: 0;
background: #cde7f7;
}

P,DIV,SPAN,H1 {
font-family : Arial, Helvetica, sans-serif;
}

.link {
font-size: 70%;
}

#segmentationRow {
width: 582px;
height: 146px;
max-height: 146px;
margin-bottom: 1px;
white-space: nowrap;
}

H1.segmentation {
color: White;
font-size: 12px;
font-weight : bold;
display: inline;
}

P.segmentation {
color: #333333;
font-size: 70%;
}

#segSubHeader {
background-image : url(images/homepage/background_stripe_brown.gif);
background-repeat : repeat;
height: 30px;
text-align: center;
vertical-align: middle;
width: 193px;
}

#segContent {
white-space: normal;
background: White;
padding: 5px 15px 5px 15px;
max-width: 193px;
height: 75px;
width: 193px;/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 163px;
height: 65px;
}
html>body #segContent {
height: 65px;
width: 163px; /* ie5win fudge ends */
}

#segmentationCol1 {
float: left;
width: 193px;
height: 146px;
margin-right: 1px;
}

#segmentationCol2 {
float: left;
width: 193px;
height: 146px;
margin-right: 1px;
}

#segmentationCol3 {
float: left;
width: 193px;
height: 146px;
}

#segHeaderSMALL {
padding: 10px;
height: 41px;
text-align: center;
vertical-align: middle;
background-repeat : repeat-x;
background-image : url(images/homepage/background_stripe_blue.gif);
width: 193px;/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 173px;
height: 21px;
}
html>body #segHeaderSMALL {
height: 21px;
width: 173px; /* ie5win fudge ends */
}

#segHeaderLARGE {
padding: 10px;
height: 41px;
text-align: center;
vertical-align: middle;
background-repeat : repeat-x;
background-image : url(images/homepage/background_stripe_green.gif);
width: 193px;/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 173px;
height: 21px;
}
html>body #segHeaderLARGE {
height: 21px;
width: 173px; /* ie5win fudge ends */
}

#segHeaderCARRIER {
padding: 10px;
height: 41px;
text-align: center;
vertical-align: middle;
background-repeat : repeat-x;
background-image : url(images/homepage/background_stripe_yellow.gif);
width: 193px;/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 173px;
height: 21px;
}
html>body #segHeaderCARRIER {
height: 21px;
width: 173px; /* ie5win fudge ends */
}
</style>

</head>

<body>

<!-- Row -->
<div id="segmentationRow">
<!-- Column 1-->
<div id="segmentationCol1">
<div id="segHeaderSMALL">
<h1 class="segmentation">HEADING 1</h1>
</div>
<div id="segSubHeader">
<span class="link"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link 1</a></span>
</div>
<div id="segContent">
<p class="segmentation">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
<!-- END Column 1-->
<!-- Column 2-->
<div id="segmentationCol2">
<div id="segHeaderLARGE">
<h1 class="segmentation">HEADING 2</h1>
</div>
<div id="segSubHeader">
<span class="link"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link 2</a></span>
</div>
<div id="segContent">
<p class="segmentation">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
<!-- END Column 2 -->
<!-- Column 3-->
<div id="segmentationCol3">
<div id="segHeaderCARRIER">
<h1 class="segmentation">HEADING 3</h1>
</div>
<div id="segSubHeader">
<span class="link"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">link 3</a></span>
</div>
<div id="segContent">
<p class="segmentation">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
<!-- END Column 3 -->
</div>
<!-- END Row -->

</body>
</html>First validate your code.
Secondly, if you use "fudges" then expect strange results.

Note: ie does not actually support application/xhtml+xmlI apologize for sounding rude in advance, but I prefer to hear comments from people that actually KNOW a solution to the problem I am having with my web page instead of preaching to me. If you don't know the answer, then please do not reply.I have found a fix to this bug. The fix is in bold below from the original post. I can't explain why the characters where being repeated in the browser, and not in the actual code, and why it was overflowing in the first place, but if you anyone ever runs into a similar situation, this is how to fix it.

#segmentationRow {
width: 582px;
height: 146px;
max-height: 146px;
margin-bottom: 1px;
white-space: nowrap;
overflow: hidden;
}

P.S. I removed the "fudges" for testing purposes and they did not impact the issue in any way.After seeing the many voice-family... IE hacks, I can only empathize with your frustrations with the IE5 box model bug. The method below is how I get around this bug without using strange hacks.

I first read this at <!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->

It involves two block level tags and some CSS that "emulates" the IE5/PC box model bug.

<style type="text/css" media="screen">
<!--
#parent {
/* Set the width for an element here */
/* Do not set padding, margins or borders */
width: 150px;
}

#child {
/* Set padding, margins, and borders here, but no width */
padding: 5px;
margin: 10px;
border: 1px solid black;
}
-->
</style>
<body>
<div id="parent">
<div id="child">&nbsp;</div>
</div>
</body>

parent ONLY sets the width for the element. child sets the padding, margin and borders you want, but no width. A default behavior of unfloated relatively or statically positioned block-level elements, with no width specified in CSS, is to take up as much width as is available. So the width of child is automatically calculated by the browser, even if you add padding, borders and margins.

It involves nesting more DIVs and other tags than what's really necessary sometimes, but it certainly cuts down on the Internet Explorer "weirdness factor."
 
You must log in or register to reply here.
Back
Top