Why PHP generated HTML is rendered with glitch?

Question

My problem is that php generated html content differs from the hard-coded one, while they are absolutely the same. This picture shows the wrong behavior, as said, generated by a function.

As you can see, the tabs are overlapping. Now, if I look at the generated source code (via Firebug in Firefox, or directly in the page source), and simply copy and paste it manually in the page, the result is this (the desired one):

The same result is presented in Chrome, IE and FF (all for Windows, but I guess in other OS is the same as well).

This is the generated code (copy/paste from the generated source):

                 <ul>
                    <li><span data-link="/">Pagina principala</span></li>
                    <li><span data-link="/piscine">Piscine</span>
                        <ul>
                            <li><span data-link="/piscine/piscine-rezidentiale">Piscine rezidentiale</span></li>
                            <li><span data-link="/piscine/piscine-publice">Piscine publice</span></li>
                        </ul>
                    </li>
                    <li><span data-link="/spa">Spa</span></li>
                    <li><span data-link="/saune">Saune</span></li>
                    <li><span data-link="/wellness">Wellness</span>
                        <ul>
                            <li><span data-link="/wellness/sauna">Sauna</span></li>
                            <li><span data-link="/wellness/spa">Spa</span></li>
                            <li><span data-link="/wellness/baia-de-aburi">Baia de aburi</span></li>
                            <li><span data-link="/wellness/infracabine">Infracabine</span></li>
                            <li><span data-link="/wellness/solarii">Solarii</span></li>
                            <li><span data-link="/wellness/dusuri">Dusuri</span></li>
                            <li><span data-link="/wellness/fantana-de-gheata">Fantana de gheata</span></li>
                        </ul>
                    </li>
                    <li><span data-link="/aquaparcuri">Aquaparcuri</span>
                        <ul>
                            <li><span data-link="/aquaparcuri/tobogane">Tobogane</span></li>
                            <li><span data-link="/aquaparcuri/jocuri-acvatice">Jocuri acvatice</span></li>
                            <li><span data-link="/aquaparcuri/tobogane-copii">Tobogane copii</span></li>
                            <li><span data-link="/aquaparcuri/atractii-de-apa">Atractii de apa</span></li>
                        </ul>
                    </li>
                    <li><span data-link="/irigatii">Irigatii</span></li>
                    <li><span data-link="#">Galerie foto</span></li>
                    <li><span data-link="#">Contact</span></li>
                </ul>

No weird characters, no extra characters, no inline style applied. I don't understand this behavior. The css rules are the same. Tried to put the generated html in a temporary db table, then read it from there. Also tried to put into a file, and read it back. The result is the same (as in the first picture) all the time, expect if I manually put that list in the page. Why?

These two functions are generating the the html

function return_middle_menu() {
   $item = '';
   $query = mysql_query("SELECT * FROM `category_top` WHERE `active` = 1 ORDER BY `sort`");
   while($row = mysql_fetch_assoc($query)) {
    $cat_number = $row['id'];
    $sub_menu = return_middle_menu_sub($cat_number);
    if ($sub_menu != '') { $sub_menu = '<ul>'.$sub_menu.'</ul>'; }
    $temp_name = strtolower($row['name']); $temp_name = ucfirst($temp_name);
    $temp_link = $row['page_link'];
    $temp_link = str_replace($row['name'], $temp_name, $temp_link);
    $temp_link = str_replace('<a ', '<span ', $temp_link);
    $temp_link = str_replace('</a>', '</span>', $temp_link);
    $item .= '<li>'.str_replace('href', 'data-link', $temp_link).$sub_menu.'</li>';
}
return $item;
}

function return_middle_menu_sub($cat_number) {
$item = '';
$query = mysql_query("SELECT * FROM `sub_category_top` WHERE `active` = 1 AND `cat_number` = $cat_number ORDER BY `sort`");
$numrows = mysql_num_rows($query);
if ($numrows >= 1) {
    while($row = mysql_fetch_assoc($query)) {
        $temp_name = strtolower($row['name']); $temp_name = ucfirst($temp_name);
        $temp_link = $row['page_link'];
        $temp_link = str_replace($row['name'], $temp_name, $temp_link);
        $temp_link = str_replace('<a ', '<span ', $temp_link);
        $temp_link = str_replace('</a>', '</span>', $temp_link);
        $item .= '<li>'.str_replace('href', 'data-link', $temp_link).'</li>';
    }
}
return $item;
}

And the applied CSS rules are here

    .middle_menu { background: #a29f9f; min-height: 25px; padding: 10px 5px 0; }
    .middle_menu ul {
        text-align: left;
        margin: 0;
        list-style: none;
    }
    .middle_menu ul li {
        font-family: 'SegoeUI-SemiBold', Segoe UI, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #00334d;
        display: inline-block;
        margin-right: -2px;
        position: relative;
        padding: 7px 30px 7px 39px;
        background-color: #ffffff;
        cursor: pointer;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    .middle_menu > ul > li {
        background-image: url(../img/menu_triangle.png), -ms-linear-gradient(top, #E6E6E6 0%, #FEFEFE 100%);
        background-image: url(../img/menu_triangle.png), -moz-linear-gradient(top, #E6E6E6 0%, #FEFEFE 100%);
        background-image: url(../img/menu_triangle.png), -o-linear-gradient(top, #E6E6E6 0%, #FEFEFE 100%);
        background-image: url(../img/menu_triangle.png), -webkit-gradient(linear, left top, left bottom, color-stop(0, #E6E6E6), color-stop(1, #FEFEFE));
        background-image: url(../img/menu_triangle.png), -webkit-linear-gradient(top, #E6E6E6 0%, #FEFEFE 100%);
        background-image: url(../img/menu_triangle.png), linear-gradient(to bottom, #E6E6E6 0%, #FEFEFE 100%);
        -webkit-border-top-left-radius: 5px !important; -webkit-border-top-right-radius: 5px !important; -moz-border-radius-topleft: 5px !important; -moz-border-radius-topright: 5px !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important;
        background-repeat: no-repeat, repeat-y;
        background-position: 13px center, top left;
    }
    .middle_menu ul li:hover {
        background: #555;
        color: #fff;
    }
    .middle_menu ul li ul {
        padding: 0;
        position: absolute;
        top: 36px;
        left: 0;
        width: 200px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        display: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
    }
    .middle_menu ul li ul li {
        background: #555;
        display: block;
        color: #fff;
        text-shadow: 0 -1px 0 #000;
        padding: 7px 10px;
    }
    .middle_menu ul li ul li:hover { background: #666; }
    .middle_menu ul li ul li a:hover { background: #666; }
    .middle_menu ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
        z-index: 9;
    }

Answer 1

Like already stated in the comments, the reason is definitely the lack of whitespaces and/or linebreaks in your php output. Most likely this produces problems in connection with your :before and :after (speudo-)selectors in CSS, since they usually apply to the characters between the tags. If you just insert some whitespaces and/or linebreaks (for example changing the '</li>' to '</li> ' or '</li> ' . PHP_EOL) after the closing tags, the problem shouldn't occur anymore.