Nested html elements displaying unintended styling

w3schools html tags
css
css pre tag styling
html elements and attributes
highlight text in pre tag
html <pre> tag
html code
display code in html

I have this code:

<?php $search =$_GET['search']?>

<p>Displaying search results for : <font style="font-weight:bolder;font-style:italic"><?php echo $search?></font></p>

<?php
$mysql_host='localhost';
$mysql_user='root';
$mysql_password='can't see my password..sorry';

mysql_connect($mysql_host,$mysql_user,$mysql_password);
@mysql_select_db('galaxall');
?>

<!--the results-->

<p style="background-color:rgb(250,250,250)">
<div style="background-color:rgb(250,250,250);padding-bottom:3%;margin-right:20%">
<?php
$hello='hello everybody!!!';

$query="SELECT * FROM `galaxall_uploads` WHERE Title LIKE '%$search%' ";
if($is_query_run=mysql_query($query) )
{  
    while($query_execute=mysql_fetch_assoc($is_query_run) )
    {
        echo $query_execute ['Title'].'<br>'.''.'<p style="background-color:blue;padding-bottom:5%">'.'<br>' ;
    }
} else {
    echo"Sorry, something went wrong...";
}
?> 
</p>

It is basically an SQL code to retrieve data from a database in an order. Each record when retrieved should be stylised (beautified using CSS). It works well except that the first and the last result are malformed. e.g. the first result is shown without any CSS styling (while the second, third etc are ok) and the last is shown with CSS styling but the result itself is not there.

Screenshot:

As you can see, the first 'ht' has no blue styling and the last has blue styling WITHOUT 'ht' (almost as if they separated from each other)

Everything You Need to Know About HTML's 'pre' Element, HTML's pre element is a simple and semantic way of displaying formatted and even gave the nested elements color properties using the style attribute. Another issue to watch out for is the appearance of unwanted tabs,  Active learning: Styling a nested list. In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to: Give the unordered list square bullets. Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.

You can't use div element inside a p element and also your code to print databse results has some wrong so i suggest this:-

<!--the results-->

<div style="background-color:rgb(250,250,250);padding-bottom:3%;margin-right:20%">
<?php
$hello='hello everybody!!!';

$query="SELECT * FROM `galaxall_uploads` WHERE Title LIKE '%$search%' ";
if($is_query_run=mysql_query($query) )
{


    while($query_execute=mysql_fetch_assoc($is_query_run) )
    {

        echo '<p style="background-color:blue;padding-bottom:5%">'.$query_execute ['Title'].'</p><br/>' ;


    }

}

else
{
    echo"Sorry, something went wrong...";
}


?> 
</div>

HTML Elements, HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols All HTML documents consist of nested HTML elements. Some HTML elements will display correctly, even if you forget the end tag: It might produce unexpected results and/or errors if you forget the end tag. HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).

Its because you are doing it wrong. try the following

while($query_execute=mysql_fetch_assoc($is_query_run) )
    {
        echo '<p style="background-color:blue;padding-bottom:5%">'.$query_execute ['Title'].'</p><br>' ;
    }

Stop using so many divs! An intro to semantic HTML, Tagged with html, webdev, semantic, beginners. must be hidden with the hidden attribute, which basically acts like display: none; in CSS. When an element is needed only for styling purposes or as a Every time I glance at it for a quick answer, I inevitably learn something unexpected and useful,  In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.

How to Section Your HTML, The one major restriction around nesting sectioning elements is that headers and heading</p> </section> <style> .example { display: flex; flex-direction: column; } are tabbing through the content and focus is sent to an unexpected location. In every version of Cascading Style Sheets (CSS), one can apply a style rule containing a list of style properties to an element or a group of elements known as a selector. False Hue measures the brightness of a color and ranges from 0% (black) up to 100% (white).

Creating Lists, Also, we can decide if a list should be displayed vertically or horizontally. The ordered list element, <ol> , works very much like the unordered list element; Because nesting lists can be a little tricky—and unwanted styles will appear if it's​  Styling elements in a nested list. It's not a separate element. i considered that because on reading the html, I saw that the nested list is inside and one could style the parent when the

New Perspectives on Blended HTML and CSS Fundamentals: Introductory, See sublist section element, HTML 318—320 section tag A tag used to define a attribute, HTML 526 selection list A form control used to display several items in HTML 425 small caps style, HTML 173 source order The order of page content in the document flow. HTML 331 spam Any unsolicited and unwanted email. Ch.3 Designing a Web Page with CSS Provide a style rule to display the text of all address elements nested within a footer element in red. Provide a style

Comments
  • <p><div>.. is not valid HTML. The browser is auto-correcting your bad code and resulting in something you didn't expect.
  • @ Niet the Dark Absol so i should remove one of them?
  • @ Niet the Dark Absol ..i've deleted one but it still didn't work
  • It also looks like you're outputting the 'Title', and then starting a blue <p> tag. Surely that should be the other way around?
  • 'can't see my password..sorry'; is that part of your actual working code? It's showing a parse error here.
  • My mistake, I wasn't using LIKE in my query.
  • Thanks but that didn't work...maybe you can try showing me the whole new code?
  • You are being too lazy man. Common just copy the loop code and replace it with yours. you give me a downvote for this