Phantom
tag rendered by browsers prior to tag

Question

The browser seems to be rendering a <br> tag prior to my <table>. The entire page is supposed to be rendered in the same table, but there's an irritating whitespace being created by a <br> tag that isn't in the code.

The code looks like this, including when using View Source:

<body>
   <div class='container'>
      <table cellpadding="0" cellspacing="0" width="978px" style="border:2px solid blue;">

But the page has a fat space in the browser, and appears like this when I use "inspect element" in Chrome:

<body>
   <div class='container'>
      <br>
      <table cellpadding="0" cellspacing="0" width="978px" style="border:2px solid blue;">

I've pored over my CSS and my code and I can't figure it out.

Let me know if I need to be more specific somewhere.

Michael Irigoyen · Accepted Answer

Since you don't have any scripts on the page, the only thing I can think of is that it's being injected because your code isn't valid. Try fixing the errors there and see if it solves your problem.

Davy8 · Answer

If there's really a <br> tag as shown through Chrome's Inspect Element, then I would check your Javascript as to my knowledge you can't insert DOM elements through CSS. If you're positive that's not the issue, I'd try disabling all your browser plugins to eliminate the possibility of one of them doing it.

Edit: It is invalid syntax, specifically

            <div>
            <table cellpadding="0" cellspacing="0" width="978px" style="border:2px solid blue;">
                <tr style='font-size:1px'><td width="200px">&nbsp;</td><td width="500px">&nbsp;</td><td width="200px">&nbsp;</td></tr>                        
                        <tr><td rowspan='2' class="logobox"><img src="http://www.frontrowking.com/images/FRK-LOGO.gif" alt="Front Row King Tickets" width="198" height="102" align="left" class="logo" /></td>
                            <td width='771px' height='70px' style='vertical-align:center; text-align:center;'>
                                Test Page Tickets
                                Keyword Text!
                                <div style='vertical-align:bottom;'>breadcrumbs &gt;&gt; breadcrumb</div>
                            </td></tr>
                        <tr><td colspan="2" align="center" style='vertical-align:bottom;'>
                            <table cellpadding="0" cellspacing="0" border-spacing='0' width="100%" style="border:none; max-height:34px; margin-top:8px;">
                                <tr class='navbar'>
                                    <td class="hov" width="18%"><div align="center"><a class="header-link">menu3</a></div></td> 
                                    <td class="hov" width="18%"><div align="center"><a class="header-link">menu</a></div></td> 
                                    <td class="hov" width="18%"><div align="center"><a class="header-link">menu</a></div></td>
                                    <td class="hov" width="30%"><div align="center"><input type='text' /><a class="header-link">search</a></div></td>
                                </tr>
                            </table>
                        </td>
                        </tr>
            </div>

You closed the outer div before closing the table. Moving the </div> after the </table> should do the trick.

Phantom <br> tag rendered by browsers prior to <table> tag

Tags:

html

browser

Kazz

2 Answers

Michael Irigoyen

Davy8

Recent Activity

Donate For Us