PHP function Messing CSS Layout

[jj-dr]

Hi guys. I am creating website for my church and I am using PHP MySQL generated menu. I am having a CSS parsing issues (I guess).

 

You can see here http://www.maranatha.tv a regular menu list with a nice horizontal layout. This one is a manual list, and not PHP MySQL generated.

 

However, when I use PHP to generate the list, the menu buttons don't see to float. In this example I use a menu generated from the database and apply the css class ".nav" to stylize. And just for testing purposes, I put another manual list (test 1, Test 2, Test 3) right next to the DB list and this one floats properly: http://www.maranatha.tv/index02.php

 

So I guess the issue lies in the way PHP is handling the CSS when importing from MySQL.

 

Here's my code:

1) The HTML

<div id="MENU">       
            <ul class="nav">           
            <li><?php menu();?></li>
           
<!NON-DB Manual List-->
            <li><a href="#">test 1</li>
            <li><a href="#">test 2</li>
            <li><a href="#">test 3</li>
            </ul>           
    </div>

 

2) The function to genarate the Menu  "menu()"

function menu(){

echo '<link href="css/jesus_02.css" rel="stylesheet" type="text/css" media="screen"/>';
$query = mysql_query("SELECT id, linklabel FROM content WHERE showing ='1' ORDER BY id ASC") or die(mysql_error());


// *****DETERMINE which page ID to USE in our query below ******

if (!isset($_GET['jesusid'])) {
$pageid = '1';
} else {
$pageid = preg_replace('#[^0-9]#i', '', $_GET['jesusid']); // filter everything but numbers for security(new)
   } 
$menuDisplay = '';

while ($row = mysql_fetch_assoc($query)) { 
$jesusid = $row['id'];
$postLinkLabel = strtolower($row['linklabel']); //strtolower() lowercase buttons

//Prepare to Show and Highlight buttons

if($jesusid){
//SHOW NORMAL STATE BUTTON
$menuDisplay .= '<ul class="nav"><li class="nav"><a href="content.php?jesusid='.$jesusid. '">' . $postLinkLabel. '</a></li></ul><br />';}//EXTERNAL FILE displayed using jQuery
}

echo $menuDisplay;
}

 

3) The CSS

.nav ul{ display:inline-block;}
   .nav li
   {
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   line-height:20px;      
   padding:4px;
   list-style:none;
   list-style-type:none;
   float:left;
   display:block;
   }
   
   .nav li a
   {
   font-family:Arial, Helvetica, sans-serif;   
   height:30px;
   padding:3px;
   list-style:none;
   list-style-type:none;
   text-align:center;   
   text-decoration:none;   
   }
   
   .nav li a:hover
   {
   font-family:Arial, Helvetica, sans-serif;
   clear:right;
   height:30px;
   padding:3px;
   list-style:none;
   list-style-type:none;
   text-align:center;   
   text-decoration:none;   
   overflow: hidden;
   color:#35A266;
   }

 

This is driving me crazy because no matter what I do, the menu list will not float horizontally if it comes from a php function.

 

Thanks in advance for your help

[Zane]

$menuDisplay .= '</pre>
<ul class="nav">' . $postLinkLabel. '</ul>
<br>';}//EXTERNAL FILE displayed using 

Why exactly are you giving the LI element a class of nav, when the manual entries don't have that class.  Furthermore, your css for the nav class is a little greedy as it will affect ANYTHING with the class of nav

 

If you only want to affect the UL class nav, then do that.

ul.nav {
   .... CSS ....
}

 

Also, that

is unnecessary.  You should use a newline character instead... for source code readability.  In order to use the newline (\n), you'll have to surround it in double quotes though.

$menuDisplay .= '</pre>
<ul class="nav">' . $postLinkLabel. "</ul

 

And there is also and unneeded } at the end of that string.

[jj-dr]

Thank you, Zane.

 

the <br> tag was the one causeing the issue. The css was work, but its being broken by that tag.