<?php
include("dbFunctions.php");
$query ="SELECT * FROM medical_category";
$result = mysqli_query($link,$query);
//datebase query
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Official form</title>
<link rel="stylesheet" type="text/css" href="stylesheets/jquery-ui.css" />
<script language="javascript" type="text/javascript" src="scripts/jquery- 1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jquery-ui.js"></script>
//javascript
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
// tabs function
</head>
<body>
<div id="tabs">
<?php while ($arrayResult = mysqli_fetch_array($result)){ ?>
// fetch the array , is the vertical data affecting the alignment of tabs
<li><a href="#tabs-<?php echo $arrayResult['Medical_category_id']?> "><? php echo $arrayResult['Medical_categoryName']; ?></a></li>
the php part is working but the tabs based on the id is not aligning well my echo data is currently vertically aligned how to make the tabs work again? the data are also separated by bullets , it is not aligned as a tab suppose to be