Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Container re-sizing yields bizarre result 1

Status
Not open for further replies.
eriksten

eriksten

Programmer
Dec 20, 2003
5
US
These two pages are almost identical:


The only difference in coding is for "Text" that appears at the top of the large table cell in the middle.

On 370px.html it is:
<DIV style=&quot;width: 370px;&quot;>Text</DIV>

On 375px.html it is:
<DIV style=&quot;width: 375px;&quot;>Text</DIV>

The problem is that on 375px.html on the bottom of the table cell to the left there is a quote and the last character of the name of the author of the quote is repeated after a line feed.

The 375px width causes the table cell to expand a bit. I presume that somehow causes the appearance of the extraneous character.

The quote is generated by a PERL script.

This behavior happens in IE and MSN Explorer but not in Mozilla.

I finally have figured out how to avoid the problem but there is an underlying problem to be addressed. Who should be informed of this?

Erik
 
Sort by date Sort by votes
Hey Erik,

That is kind of funny. The more I mess with it the more wierd it gets. I messed with the width of the browser window and you can make it appear/disappear on either page based on the size of your window.

I poked around in your code and can't find a thing that could be causing that. Just to add to the oddity of it all... I erased all of the white space characters inside and after the <p> </p> that contains the quote and it made it show 2 redundant characters.

I don't know how you avoided the problem but adding a non-breaking space at the end worked for me.

Anyway... I would try to post this on the Microsoft IE newsgroup forum and see if you can get there attention.



Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
Upvote 0 Downvote
Yes, it's so strange that I'm relieved to see someone confirms it and it's not a figment of my imagination.

Before posting here, I looked for a MS IE group but it wasn't clear to me where I should go.

I tried sticking &nbsp; into the code following the SSI that calls the PERL quote-script. It didn't work by putting it in that way.

I've no idea why the all of the white space is added. It's cerainly not in my code. I hadn't realized that the extra lines in the source code was thousands of space characters rather than just several unnecessary line feeds. Now, I'd like to know how to get rid of those. My code for the two table cells:

<TD class=&quot;menu&quot;>
<!--#include virtual=&quot;navmenu.html&quot; -->
<!--#include virtual=&quot;tip_fact.html&quot; -->
&nbsp;
</TD>

<TD class=&quot;main&quot;>
<DIV style=&quot;width: 375px;&quot;>
Text
</DIV>
</TD>

I avoided the problem by setting the width to 370.

BTW, this strange behavior occurs with two different site hosts.

Happy Holidays!
Erik
 
Upvote 0 Downvote
Yeah... This is a bizarre one.

I downloaded the HTML and was working with it locally and it still had the extra character. It looks like some kind of word-wrap glitch. I would be careful of fixing it with the width of the <DIV> because it may show up if someone resizes the window. At least it did for me.

I would have suggested that it was something that PERL was doing... adding the whitespace characters and perhaps using a different character set... but I saved it in several different document encoding formats and it made no difference.

I'm stumped... Do you mind if I make a copy of it and show it to more people... or can I direct them to your links?



Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
Upvote 0 Downvote
Erik,

I've also poked around, and have managed to create a really compact test-harness to demonstrate the problem. I also think I've found a fix to your problem.

Here's the test harness code:

Code: 
<HTML>
<HEAD>

<style type=&quot;text/css&quot;>
p.nav
{
	float:right;
}
P.quote
{
	width:200px;
	float:right;
}
</style>

</HEAD>

<BODY>
<TABLE border=1>
<TR>
<TD>
<p class=&quot;nav&quot;></p>
<!-- --><!-- --><!-- -->
<P class=&quot;quote&quot;>Invasion of the Body Snatchers</P>
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

If you run this (in IE only, it seems), you'll see that the last 4 letters of the word snatchers has been duplicated, while appearing nowhere in the source code.

Adding more of the
Code: 
<!-- -->
comment blocks to line 23 makes more of the word appear - and removing them makes less appear - something that seems to me to be a rendering bug in IE.

It appears that the culprit is the float:right command you have in your css for P.quote. If you remove this, all appears to be well.

I suspect what you've stumbled on is one of those IE/CSS bugs we hear so much about... In this case, trying to float content in a table cell.

I hope you can still work around this issue.

All the best!

Dan
 
Upvote 0 Downvote
Very good Dan,

If we could get some information on different versions of IE that would be good.

I've got IE6 on XPpro
 
Upvote 0 Downvote
I've got IE6 on XP Home. The problem also occurs on MSN 8. Not on Mozilla Firebird.

Travis, feel free to direct others to the links. I'm not using them but will leave them up there. My regular site is and the problem appears on
I presume it's the World Wide Web Consortium (W3C) that needs to be aware of the issue. Does a moderator ors someone else in this group have an established working relationship with W3C?

In the process of tracking this down, somebody pointed out that the extra blank lines that appear in the source code aren't just line feeds but a huge number of single spaces, namely 2008 at a time. Since this happens in Mozill also, I'm presuming it is not related to the other problem. However, that's a lot of unnecessary code added to the files.

Erik
 
Upvote 0 Downvote
The 2008 blank spaces does sound like something PERL would do. I've had PERL and CFM add blank spaces on me. I never tracked down why I just grumbled :)


Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
Upvote 0 Downvote
I agree with tlhawkins - your HTML/CSS code isn't creating the spaces. I'd build a test script to grab the dynamic content that's being generated just to see what's actually being sent. From there, you could filter the content and format it correctly before your web page gets it.

There's always a better way. The fun is trying to find it!
 
Upvote 0 Downvote
One problem solved but I'm mortified. The extra spaces come from the end of my .html files that are called by SSIs. It's been some time since I created those files so can't remember how a large number of extra spaces happened to 6 different files. It seems unlikely that I was using one as a template because there was was a significant variation in the number of extra spaces tacked on to each file.

Erik
 
Upvote 0 Downvote
Hey Dan,

I've been having fun playing around with your test harness code.

If the p.nav properties are changed to:

p.nav
{
width:153px;
float:right;
}

then the extraneous text disappears. It's got to be 153px or larger in order to work.

Note that the float:right command in the css for P.quote is still there.

Erik

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
174
pendle666
pendle666
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
134
CoolBreeze007
CoolBreeze007
BobMCT
  • Locked
  • Question
Suggestions on display retrieved date time for editing?
Replies
2
Views
145
BobMCT
BobMCT
1DMF
  • Locked
  • Question
box-sizing - floated elements 2
Replies
7
Views
99
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top