• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 180
  • Last Modified:

Cannot Figure why HTML code is functioning as it is

Although far from being an expert (even a beginner, maybe), I cannot figure out why the code below is displaying with such a huge # of lines between the table and the sentence above.  If you need to go to the page it's on, it's http://www.best-family-photography-tips.com/eliminate-blinking-from-photos.html.

Thanks.
By now, youre probably wondering...
<table>
<tr>
<td colspan="2"><center><p style="font-family:verdana;font-size:135%;"><b><I>What will the <font color="#3333FF">Blink Eradication System</font> do for you?</i></b></p></center><BR></td>
</tr>
<tr align="left">
<TD VALIGN="top"><img src ="http://www.best-family-photography-tips.com/images/checkmark2WB.gif"
align ="left" border="0"></a></td>
<TD valign="top"><p style="font-family:arial;font-size:115%">
<B>Allows you to</b> take group photos in a relaxed, confident manner, since you can minimize blinking BEFORE taking the photo</font><BR><BR>
</p></td>
</TR> 
<tr align="left">
<TD VALIGN="top"><img src ="http://www.best-family-photography-tips.com/images/checkmark2WB.gif"
align ="left" border="0"></a></td>
<TD valign="top"><p style="font-family:arial;font-size:115%">
<B>Eliminates concern</b> about downloading a few "blinkers," since the software will quickly and easily produce a perfect final image</font>
</p></td>
</TR><BR><BR>
<tr align="left">
<TD VALIGN="top"><img src ="http://www.best-family-photography-tips.com/images/checkmark2WB.gif"
align ="left" border="0"></a></td>
<TD valign="top"><p style="font-family:arial;font-size:115%">
<B>Provides print-on-demand "Cheat Sheets"</b> that will help minimize blinking whether taking pictures INDOORS or OUTDOORS</font>
</p></td>
</tr><BR><BR>
<tr align="left">
<TD VALIGN="top"><img src ="http://www.best-family-photography-tips.com/images/checkmark2WB.gif"
align ="left" border="0"></a></td>
<TD valign="top"><p style="font-family:arial;font-size:115%">
<B>Arms you with a simple calculation</b> that tells you how many pictures should be taken to get one "non-blinking" photograph</font>
</p></td>
</tr><BR><BR>
<tr align="left">
<TD VALIGN="top"><img src ="http://www.best-family-photography-tips.com/images/checkmark2WB.gif"
align ="left" border="0"></a></td>
<TD valign="top"><p style="font-family:arial;font-size:115%">
<B>Detects two outdoor situations</b> that once corrected, will significantly improve all your group pictures</font>
</p></td>
</TR><BR><BR>
<tr align="left">
<TD VALIGN="top"><img src ="http://www.best-family-photography-tips.com/images/checkmark2WB.gif"
align ="left" border="0"></a></td>
<TD valign="top"><p style="font-family:arial;font-size:115%">
<B>Identifies the one thing</b> you should never use your camera's LCD screen for</font>
</p></td>
</TR>
</table>

Open in new window

0
photoman11
Asked:
photoman11
  • 6
  • 4
  • 3
  • +2
4 Solutions
 
Ryan ChongCommented:
try change (line 3 to 5):

<tr>
<td colspan="2"><center><p style="font-family:verdana;font-size:135%;"><b><I>What will the <font color="#3333FF">Blink Eradication System</font> do for you?</i></b></p></center><BR></td>
</tr>

to:

<tr>
<td colspan="2"><center><p style="font-family:verdana;font-size:135%;"><b><I>What will the <font color="#3333FF">Blink Eradication System</font> do for you?</i></b></p></center></td>
</tr>
0
 
Ryan ChongCommented:
alternatively add this if you wish make a line after that:

<tr align="left">
  <TD VALIGN="top">&nbsp;</td>
  <TD valign="top">&nbsp;</td>
</tr>
0
 
b0lsc0ttCommented:
photoman11,

I think this odd problem is caused by the 8
 tags that appear in that part of the page.  They aren't seen in the html source but the browser is getting them and they are in the "generated source" (see the snippet below).  The odd thing is disabling scripts and even style sheets so far hasn't seemed to remove them.  Let me look a little more to see if I can see how to fix it but they are the culprit it seems.

Let me know if you have any questions or need more information.

b0lsc0tt
<br>
By now, you?re probably wondering...
<br><br>
<br><br>
<br><br>
<br><br>
<table>
<tbody><tr>
<td colspan="2"><center><p style="font-family: verdana; font-size: 135%;"><b><i>What will the <font color="#3333ff">Blink Eradication System</font> do for you?</i></b></p></center><br></td>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Imme-emosolCommented:
It is because of what b0lsc0tt says.

I don't know why they dissapear in the source-code.

I am saying dissappear , because when I wget the html-file they are there.
(For as far as I know there are _no_ browser-conversions , etc. with wget)
0
 
photoman11Author Commented:
I always thought my code was haunted. Now, I have proof!

I'm at a loss as to what the extra tags are. If not created in the code, what caused them to materialize? Ghosts?
0
 
Imme-emosolCommented:
I'm sorry I cannot help you with that at the moment.

But I can suggest to tell more about your specific server-setup if you would like an answer to that question of some other expert.
i.e. : Does the HTML get parsed , or is it filtered?
0
 
photoman11Author Commented:
I don't even know what those are. I use SBI, and they have a block-builder approach to generate code. I've used it over 4 years and never had anything like this happen.
0
 
b0lsc0ttCommented:
photoman11,
It isn't just your server. I have been able to take your html and duplicate the "mystery <br>s" on another server. I believe it has something to do with the way you have the elements on the page. I am most suspicious of the tables but I haven't been able to figure out how. It isn't just a server side issue though unless it is something general to IIS (and maybe other web servers if you use a different one).
I have no more time for this tonight but it should give you something to work with. My suggestion or next step would be try to strip the html and content "part by part" until I can see what seems to cause it. Basically start with the overall simple layout and add pieces until the problem occurs. That could give you something to work with now and even find this if you want to pursue it now.
Let me know if there is a question.
bol
0
 
b0lsc0ttCommented:
It sure is an odd one though and even when I have seen a browser mishandle html elements I have never seen that result show with "added" elements.  I still can't believe I am seeing those 8 br tags.
bol
0
 
Imme-emosolCommented:
@b0lsc0tt :

I do not think it would be the browser , since wget is no browser ,
just a program that receives the data.

And in this data , there are already those <br>`s.

So it `must` therefore be something on the server-side of town.

No clues about that though.
0
 
b0lsc0ttCommented:
Imme-emosol,
I understand your disbelief (and I even share it some) but I have html source that doesn't have those tags but does have the same problem as the site above.  Not only is there an odd vertical gap but generated source in FF shows the 8 br tags.  Your comment did make me think of some odd characters that for some reason were being rendered as <br> tags but there is nothing between the line break in the line and the table tag on the next (I viewed the html file in hex editor).
I am not an expert on wget but most of those "tools" I believe are still based on the "engine" of the browser.  It may not process javascript, etc but still shares some common components to a browser.  Your test with wget was useful in my mind because it showed the css and script are most likely not culprits.  Although I tested this I couldn't say the tool I used to disable them wasn't at fault so I was glad you mentioned your result.
Of course I might be wrong about part of this too and so on the wrong track.  My response is just to provide some details and thoughts but not to try to change your efforts or disuade you.  It is an interesting problem and I look forward to more info and an explanation no matter how it comes or from whom.
Let me know if there is a question about any of this.
bol
0
 
Jason C. LevineNo oneCommented:
Folks, it's not server side.

I just took the original code snippet and previewed it locally.  No Apache, no IIS and the extra <br> shows up in FF, IE, Safari, and Chrome.

Weird, weird, weird.
0
 
photoman11Author Commented:
Well, I'm at least glad I haven't lost MY mind. Should I start over and recreate the code?
0
 
b0lsc0ttCommented:
I really do have to head off to bed now. Good luck guys and enjoy. :)
>> Should I start over and recreate the code? <<
It all depends on how bad you want to solve this and how much time it is worth. If it really is some "bug" how flexible are you in changing the layout to avoid the "bug"? If you do pursue a test then add parts and test each step to see if you can find the trigger or cause. It might not be easy to find though or prevent so I just mention the above before you spend "hours" for nothing.
bol
0
 
Jason C. LevineNo oneCommented:
Found the answer thanks to someone else who had the same problem with some PHP code:

http://www.phpfreaks.com/forums/index.php?topic=244220.0

You have <br> tags in the table but they are outside of the cells and rows. This occurs four times:

</td>
</TR><BR><BR>
<tr align="left">

(line 19 in the original code snippet)

So what happens when a <br> tag is not part of the proper table structure is the browsers move them up outside of the <table> tag. Two breaks, four instances each is 8 <br> and that's what we are all seeing.

Remove those extra <br> tags and the issue is resolved.

Phew.  I can go to sleep now.
0
 
photoman11Author Commented:
You guys are the best! I wish I had 1000 pts assigned because after they're divided, it gets too small.
0
 
b0lsc0ttCommented:
Your welcome!  Don't worry about the points we actually get.  You offered all you could and closed this well.  That is what matters. :)
Good find by Jason1178.  I am glad I could help some and none of us had to find this out by testing the page piece by piece.  Thanks for the fun question, the grade and the points.
bol
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now