edit
this not great question means; fluke discovered , rather delete question leave posterity.
end - edit
i'm not sure how search this, came across while styling table , it's odd. outputting data in php , populating in table. if echo string @ top of page, formatting of table changes - looks better - can't figure out why it's happening. using twitter bootstrap , php 7.
here table:
and here looks when echo string @ top of page:
i can't imagine effect echoing string causing on table styling, table looks better, in opinion, when echoing string. have 2 questions:
- why effect occurring?
- how can achieve effect without echoing string on page?
edit
output html before:
<html lang="en"><head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"><!--personalized stylesheet--> <script type="text/javascript" src="js/jquery-3.1.1.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="message"> <span id="stats"></span> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <p id="logo" class="navbar-brand"><img src="images/logo_circle.png"> page title</p> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class=""><a href="#n">problems or suggestions?</a></li> <li> <p class="navbar-btn"> <a href="mailto:myname@email.com?subject=;body=please enter comments here:please include screenshot if have run error:" target="_top" class="btn btn-info">e-mail support</a> </p> </li> </ul> </div> </div> </nav> <div class="container"> <form class="form-inline" name="search_records" method="post" action=""> <div class="form-group"> <label for="active">active? </label> <select name="active"> <option value="y">yes</option> <option value="n">no</option> </select> </div> <div class="form-group"> <label for="sort">sort by: </label> <select name="sort"> <option value="effective_date">effective date</option> <option value="minmargin">min margin</option> <option value="maxmargin">max margin</option> <option value="commission_percent">commission percent</option> <option value="aopgoal">aop goal</option> <option value="last_modified">last modified</option> </select> </div> <div class="form-group"> <label for="order">order: </label> <select name="order"> <option value="asc">ascending</option> <option value="desc">descending</option> </select> </div> <button type="submit" class="btn btn-default" name="submit_search_records">search</button> </form> <div class="row clearfix center"> <h2>active records</h2> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>effective_date</th> <th>min margin</th> <th>max margin</th> <th>commission percent</th> <th>year</th> <th>month</th> <th>aop goal</th> <th>last modified</th> <th>modified by</th> </tr> </thead> <tbody> <tr> <input type="hidden" value="2"> <td>2017-04-05</td> <td>60100</td> <td>126000</td> <td>.030%</td> <td>2017</td> <td>april </td> <td>26000</td> <td>2017-04-05 10:49:57</td> <td>localhost\dev</td> </tr><tr> <input type="hidden" value="3"> <td>2017-04-05</td> <td>60100</td> <td>126000</td> <td>.030%</td> <td>2017</td> <td>april </td> <td>26000</td> <td>2017-04-05 10:50:00</td> <td>localhost\dev</td> </tr><tr> <input type="hidden" value="4"> <td>2017-04-05</td> <td>60100</td> <td>126000</td> <td>.030%</td> <td>2017</td> <td>april </td> <td>26000</td> <td>2017-04-05 10:50:06</td> <td>localhost\dev</td> </tr> </tbody> </table> <div class="spacer"></div> </div> <div class="spacer"></div> </div> </body></html> output html after:
<html lang="en"><head></head><body>table looks better <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"><!--personalized stylesheet--> <script type="text/javascript" src="js/jquery-3.1.1.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <div id="message"> <span id="stats"></span> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <p id="logo" class="navbar-brand"><img src="images/logo_circle.png" > page title</p> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class=""><a href="#n">problems or suggestions?</a></li> <li> <p class="navbar-btn"> <a href="mailto:myname@email.com?subject=;body=please enter comments here:please include screenshot if have run error:" target="_top" class="btn btn-info">e-mail support</a> </p> </li> </ul> </div> </div> </nav> <div class="container"> <form class="form-inline" name="search_records" method="post" action=""> <div class="form-group"> <label for="active">active? </label> <select name="active"> <option value="y">yes</option> <option value="n">no</option> </select> </div> <div class="form-group"> <label for="sort">sort by: </label> <select name="sort"> <option value="effective_date">effective date</option> <option value="minmargin">min margin</option> <option value="maxmargin">max margin</option> <option value="commission_percent">commission percent</option> <option value="aopgoal">aop goal</option> <option value="last_modified">last modified</option> </select> </div> <div class="form-group"> <label for="order">order: </label> <select name="order"> <option value="asc">ascending</option> <option value="desc">descending</option> </select> </div> <button type="submit" class="btn btn-default" name="submit_search_records">search</button> </form> <div class="row clearfix center"> <h2>active records</h2> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>effective_date</th> <th>min margin</th> <th>max margin</th> <th>commission percent</th> <th>year</th> <th>month</th> <th>aop goal</th> <th>last modified</th> <th>modified by</th> </tr> </thead> <tbody> <tr> <input type="hidden" value="2"> <td>2017-04-05</td> <td>60100</td> <td>126000</td> <td>.030%</td> <td>2017</td> <td>april </td> <td>26000</td> <td>2017-04-05 10:49:57</td> <td>localhost\dev</td> </tr><tr> <input type="hidden" value="3"> <td>2017-04-05</td> <td>60100</td> <td>126000</td> <td>.030%</td> <td>2017</td> <td>april </td> <td>26000</td> <td>2017-04-05 10:50:00</td> <td>localhost\dev</td> </tr><tr> <input type="hidden" value="4"> <td>2017-04-05</td> <td>60100</td> <td>126000</td> <td>.030%</td> <td>2017</td> <td>april </td> <td>26000</td> <td>2017-04-05 10:50:06</td> <td>localhost\dev</td> </tr> </tbody> </table> <div class="spacer"></div> </div> <div class="spacer"></div> </div> </body></html>
as pointed out lgson, head elements (title, link, etc) being rendered in body tags whenever echoed string. altering linked css stylesheets , changing formatting of table seen in above screenshots. have personalized stylesheets besides using twitter bootstrap altering table differently.
Comments
Post a Comment