Solved

Cannot Figure why HTML code is functioning as it is

Posted on 2009-04-02
17
168 Views
Last Modified: 2012-05-06
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
Comment
Question by:photoman11
  • 6
  • 4
  • 3
  • +2
17 Comments
 
LVL 49

Assisted Solution

by:Ryan Chong
Ryan Chong earned 50 total points
ID: 24056104
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
 
LVL 49

Expert Comment

by:Ryan Chong
ID: 24056107
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24056130
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
 
LVL 3

Expert Comment

by:Imme-emosol
ID: 24056422
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
 

Author Comment

by:photoman11
ID: 24056606
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
 
LVL 3

Expert Comment

by:Imme-emosol
ID: 24056623
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
 

Author Comment

by:photoman11
ID: 24056886
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24056909
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24056979
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
 
LVL 3

Assisted Solution

by:Imme-emosol
Imme-emosol earned 50 total points
ID: 24056991
@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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24057046
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24057054
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
 

Author Comment

by:photoman11
ID: 24057072
Well, I'm at least glad I haven't lost MY mind. Should I start over and recreate the code?
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 150 total points
ID: 24057091
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
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 150 total points
ID: 24057136
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
 

Author Closing Comment

by:photoman11
ID: 31566092
You guys are the best! I wish I had 1000 pts assigned because after they're divided, it gets too small.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24061868
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now