Seeing <br> elements being inserted into a <div> element in the page source

I have encountered an issue where my code does not contain any br tags between the beginning of the div tag and table tag, but when I view the source, several br elements appear.

Below is the code snippet from a .php file:

<div id='tx_addAccountpopup_frame' style = "height: 100px" class='txPopupFrame'>
        <table class="addNewTable"  id = "table" >
        <tr><td align="left" class="spaceUnder"><label for='clearingAccount'>Clearing Acct</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "clearingAccount" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='tposAlloc'>Tpos Alloc</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "tposAlloc" style="text-transform: uppercase" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='tposPortfolio'>Tpos Portfolio</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "tposPortfolio" style="text-transform: uppercase" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='tposGroup'>Tpos Group</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "tposGroup" style="text-transform: uppercase" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='serverCode'>Server Code</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "serverCode" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='clearingFirm'>Clearing Firm</label></td><td align = "right" class="spaceUnder"><select id = "clearingFirm" style="text-transform: uppercase" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='vtk'>VTK</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "vtk" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='clearingAllocAccount'>Clearing Alloc</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "clearingAllocAccount" style="text-transform: uppercase" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='portfolioDesc'>Portfolio Desc</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "portfolioDesc" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='groupDescription'>Group Desc</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "groupDescription" class="txAddNewField"></td></tr><br>
        <tr><td align="left" class="spaceUnder"><label for='masterDescription'>Master Desc</label></td><td align = "right" class="spaceUnder"><input type = "text" id = "masterDescription" class="txAddNewField"></td></tr><br>
         </table>
         <button id = "submitNewAccount" onclick ="txSubmitNewAccount()"class = "txDefender_PermissionAddRecordButton" type = "button" width ="100" height="30">Submit</button>

         </div>

Upon inspecting the source in Google Chrome dev tools, extra br tags can be seen added in:

<div id="tx_addUserpopup_frame" class="txPopupFrame">
         <br><br><br><br><br><br><table class="addNewTable" id="table" cellspacing="10">

         </table>
         <button id="submitNewUser" onclick="txSubmitNewUser()" class="txDefender_PermissionAddRecordButton" type="button" width="100" height="30">Submit</button>
         </div>

What could potentially cause this issue? How can it be resolved or prevented in the future?

htmlcss

Answer №1

The PHP code you're working with contains unnecessary <br> tags at the end of each line within a <table>, making it both syntactically and semantically incorrect. This issue is causing Chrome to automatically correct the code by moving the <br> tags to the top. To resolve this, simply remove all these misplaced <br> tags from your code.

...
<tr><td align="left" class="spaceUnder">[...]</td></tr><br> 
                                                        ^-- this should be removed
...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the Image Path According to the Device's Retina Ratio

I'm currently setting up a website for a photographer and working on creating a gallery. To streamline the process, I have automated many aspects such as file names, paths, widths, lightbox classes, etc. All I have to do in the HTML is write an <a ...

jquerycssretinaretina.js

What is the best way to conceal a portion of a child element that exceeds the size of its parent container?

My <div> contains a <p>, but sometimes the text in the <p> exceeds the boundaries of the div. <div style="width: 100px'; height='100px';"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ...

htmlcss

Aligning Content in the Middle of a Bootstrap Row

I'm struggling to horizontally center the content in the "row" class div. I've attempted using justify-content-center and other variations. <div class="container"> <div class="row"> <div class="col-md-4 portfolio-item ...

htmlcssbootstrap-4

Using the onClick function to set attributes in React JS

I am currently working with 2 functions: addBookmark() and removeBookmark(). There is a variable called IsBookmarked that can be either true or false. In my JSX code related to bookmarks, it looks like this: {props.singleCompany.IsBookmarked ? ( ...

javascripthtmlreactjsjsx

New Feature in Bootstrap4: Navigation Bar Alignment Shift to the Left

I need help aligning my links to the right side of the page I attempted to use mr-auto but it was not effective <body> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top mr-auto mt-2 mt-lg-0"> <a class="navbar-brand" hre ...

cssbootstrap-4navbar

Having trouble reaching the upload file in PHP

I am attempting to transfer files to a remote server using JavaScript, with PHP as the backend. The JavaScript code seems to be functioning properly, but on the PHP side, the $_FILES and $_POST arrays are empty. However, the $_SERVER array contains some da ...

javascriptphphtmlajaxupload

Exploring the concept of nested views in AngularJS's UI Router with multiple views integration

I am facing an issue with configuring multiple views on one page, where one view is nested within another. My code in app.js does not seem to be working properly. Below are the details: This is my index.html file <body ng-app="configuratorApp" > ...

javascripthtmlangularjsangular-ui-router

When an absolute positioned element exceeds the right border of its relative parent, its width will be truncated

When position: absolute; divs are placed inside or around a position: relative; parent, their height and width are based on the size and length of the text they contain. However, if one of these divs extends beyond the right border of the relative parent, ...

htmlcsscss-position

How can jQuery be used to adjust the width and height of an iframe?

After researching a solution on a website, I attempted to implement it but encountered issues. It seems like there may be another script dictating the styling, so I need to add some code directly to the page to override it. This is what I tried: <scri ...

jquerycssiframe

Using JavaScript Functions to Resize Buttons and Change function on Click

I have a button in my code that triggers CSS changes by adding and removing classes. The JavaScript for this function works as intended - clicking once adds the class, clicking again removes it, and so on. However, I also implemented a feature to remove t ...

javascripthtmljquerycss

The Bootstrap nav-link class functions perfectly in Firefox, smoothly guiding users to the appropriate section. However, it seems to be experiencing some issues

I am currently working on customizing a one-page web template and I don't have much experience with Bootstrap. The template can be found at . My issue is that the menu items are not functional in Chrome. When I click on any menu item, nothing happens ...

javascripthtmlcsstwitter-bootstrap

Using PHP, jQuery, and HTML to submit a form and insert data into MySQL, all while

I am facing an issue with my PHP intranet site, which includes an HTML form with 2 input fields. My goal is to take the user's input from the form and insert it into a MySQL database without redirecting the user to another page. I have a separate PHP ...

javascriptphpjqueryhtmlmysql

Step-by-step guide on downloading an image in HTML with the click of a button

I have a photo gallery on my website created using PHP and HTML. I am looking to add a functionality where users can click on a button to download the image that is currently set as a background of a specific div element in the gallery. The download button ...

phphtmlcssimagedownload

Mobile values in tailwindcss take precedence over breakpoints values, overriding them

I have encountered a puzzling issue that seems to have no answers thus far. Whenever I set paddings or margins for mobile devices and attempt to adjust these values for larger screens, the original mobile base value stubbornly persists and overrides my sp ...

cssnext.jstailwind-css

Adding identifiers to columns in DataTables depending on the value of another attribute

I am facing a challenge with inserting the <span> tag into the "salesStatusName" column cell that already contains some data. This should only happen when the value of the last column, "completelyDelivered", is true. However, I do not want to display ...

javascripthtmljsonajaxdatatables

Step-by-step guide on building an engaging Donut chart using jQuery

After spending several hours working on it, I'm struggling to draw my donut graph with JavaScript. Can anyone provide a solution? I am looking for a way to add 25% when one checkbox is selected and +25% when two checkboxes are selected. Thank you in a ...

javascripthtmljquerycss

Placing images inside a div causes them to vanish

I encountered a strange issue where the images I added to a background disappeared. .Background1{ position:relative; top:0%; left:0%; height:100%; width:100%; content:url("/assets/backgroundlayer1.jpg") } .Background2{ posi ...

htmlcssangular

Creating a straightforward text/logo design for your HTML website?

After creating a standard website using HTML and PHP, I am now looking to add an exciting text/logo effect for when users first visit the site. Essentially, I want the logo to break apart and transition into loading the homepage once a user lands on the si ...

jqueryhtmlflash

Apply a different color to every other header using the nth-child selector

I'm attempting to create alternating color headers without defining multiple header styles. I've opted to use the nth-child selector for this purpose, but I'm having trouble achieving the desired colors. JSFiddle: http://jsfiddle.net/CRh6L/ ...

htmlcsscss-selectors

Can you tell me about the feature called "Inspect Browser" box?

Can you identify the significance of this enigmatic purple box while inspecting elements in the browser's developer tools? It does not correspond to padding, margins, or borders, yet it seems to be occupying space within the designated div. [1]: http ...

cssinspectweb-inspector