Vertical CSS menu with small icons like on yahoo homepage.

[angel1987]

This is more like a PHP and CSS based question for a very simple application i am trying to create for learning php.

 

Basically, i am adding categories from admin section and it also has a file upload thing to upload a small icon for that category.

 

These categories are displayed vertically on left sidebar along with its icon image just like on yahoo homepage.

I am using a CSS menu script for that which i got from internet. The problem is, at first it displayed perfectly, icon on left and text next to it.

 

But then it suddenly got messed up and nothing is showing up correctly. Here is the CSS code for how the list is displayed.

 

<div id="menu14">
<ul>

<?php
$sqlcat = "SELECT * FROM categories WHERE type = 'main' ORDER BY name";
$resultcat = @mysql_query($sqlcat) or die(mysql_error());
while($rowscat = @mysql_fetch_array($resultcat)){
?>

<li>
<div style="float:left; vertical-align:middle; padding-top:8px; padding-left:8px;">
<img src="img/<?php echo $rowscat['icon']; ?>" border="0" /> </div>
<a href="category.php?id=<?php echo $rowscat['ID']; ?>"><?php echo $rowscat['name']; ?></a>
</li>

<?php } ?>

</ul>

</div>

 

I am attaching before and after screenshots of the menu.

 

I don't know what is wrong because at first on localhost it displayed perfectly, just fine.

Can you pleaseeeeeee help me get it correct...

 

 

 

[attachment deleted by admin]

[haku]

Please show us the HTML output of your script. This is the HTML forum.

[angel1987]

Ok, Here is the HTML output of the script

 

<div id="menu14">
<ul>

<li>
<div style="float: left; vertical-align: middle; padding-top: 8px; padding-left: 8px;">
<img src="img/842199223art%20.jpg" border="0"> 
</div>
<a href="category.php?id=44" title="Link 1">Arts and Print</a>
</li>

<li>
<div style="float: left; vertical-align: middle; padding-top: 8px; padding-left: 8px;">
<img src="img/877000559auto%20car.jpg" border="0"> 
</div>
<a href="category.php?id=48" title="Link 1">Auto and Car</a>
</li>

<li>
<div style="float: left; vertical-align: middle; padding-top: 8px; padding-left: 8px;">
<img src="img/514979454bank.jpg" border="0"> 
</div>
<a href="category.php?id=45" title="Link 1">Bank and Finance</a>
</li>

</ul>
</div>

[haku]

Try adding:

 

clear:left;

 

To your divs.

[angel1987]

Ok, that worked. Thanks very much.