Styling a table?

HTML & CSS
1

Hi

I’m having problems trying to align rows within a table correctly. Having been trying for ages and just can’t figure out how to fix it. It doesn’t align too bad in firefox but its a mess in IE. Here is the page:

mo-ait.com/testpage.php

Here is the html:


<div id="container">
<div id="header">
<a href="/" id="logo"><img src="/images/topheader.png" height="100px" width="900px" border="0"/></a>
</div>
<div id="search_container">
<?php
require_once ("mysearch.php");
?>
</div>

here is the php include file that includes the table:


<div id="search_left">

<?php

$quer2=mysql_query("SELECT DISTINCT category,cat_id  

                    FROM cardlist

                    ORDER by category"); 



$cat=$_GET['cat'];  

//This line is added to take care if your global variable is off 

if(strlen($cat) > 0 and !is_numeric($cat)){ 

//check if $cat is numeric data or not. 

echo "Data Error"; 

exit; 

} 

if(isset($cat) and strlen($cat) > 0){ 

$quer=mysql_query("SELECT DISTINCT subcategory  

                FROM cardlist where cat_id=$cat  

                ORDER by subcategory"); 

}else{$quer=mysql_query("SELECT DISTINCT subcategory  

                         FROM cardlist  

                         ORDER by subcategory"); } 

echo "<table><tr><td>";

echo "What's it for? </td><td>";

echo "<form method=post name=f1 action=''>"; 

/// Add your form processing page address to  

//action in above line. Example action=dd-check.php//// 

////////// Starting of first drop downlist ///////// 

echo "<select name='cat' onchange=\\"reload(this.form) 

\\"><option value=''>Select one</option>"; 

while($noticia2 = mysql_fetch_array($quer2)) { 

if($noticia2['cat_id']==@$cat) 

{echo  

"<option selected value='$noticia2[cat_id]'>$noticia2[category]</option>"."<BR>";} 

else{ 

echo "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";} 

} 

echo "</select>"; 

echo "</td><td>";

////////////////// This will end the first drop down list /////////// 

echo "</td><td>";

echo "Who's it for? </td><td>";

////////// Starting of second drop downlist ///////// 

echo "<select name='subcat'><option value=''>Select one</option>"; 

while($noticia = mysql_fetch_array($quer)) { 

echo "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>"; 

} 

echo "</select>"; 

////////////////// This will end the second drop down list /////////// 

// add your other form fields here ////  

echo "<input type=submit value=Submit>"; 

echo "</form>";  

echo "</td></tr></table>";



				echo "</div>";

				echo "<div id='search_right'>";

				echo "<form name='myform2' action='/search.php' method='GET'>";

echo "<input name='search_all' input type='text' value='search'/>";

echo "<input type='submit' value='Submit'/>";

echo "</form>";

				echo "</div>";

?>

and here is the css:


div#search_container{background-image:url(/images/header.jpg);
margin-top:-5px;float:left;height:40px;}
div#search_left{float:left;margin-left:10px;color:#FFFFFF;font-weight:bold;width:650px;}
div#search_right{float:right;margin-right:10px;color:#FFFFFF;font-weight:bold;width:230px;}

I would appreciate any help at all on this, thanks

2

I have changed the contained to have height of 100% and that has helped as the menus were hanging under the div, but the meanus still aren’t straight, how do I straighten the menus? thanks

3

I’m not sure what you mean with ‘straight’, but in the left part you use a table, and in the right part you don’t. That might account for the difference in top margin between the fields and buttons left and right in FF.

By the way, why are you using a table?

Edit: ok, I looked at it in IE and see what you mean :smiley: Let’s see what the experts say.

4

Hi

Thanks for the reply. I am only learning at the moment so forgive the use of the table! I have removed the table totally but the output is still not right and the text runs over two lines and I have no idea why. revised code without table:

<div id="search_left">

<?php

$quer2=mysql_query("SELECT DISTINCT category,cat_id  

                    FROM cardlist

                    ORDER by category"); 



$cat=$_GET['cat'];  

//This line is added to take care if your global variable is off 

if(strlen($cat) > 0 and !is_numeric($cat)){ 

//check if $cat is numeric data or not. 

echo "Data Error"; 

exit; 

} 

if(isset($cat) and strlen($cat) > 0){ 

$quer=mysql_query("SELECT DISTINCT subcategory  

                FROM cardlist where cat_id=$cat  

                ORDER by subcategory"); 

}else{$quer=mysql_query("SELECT DISTINCT subcategory  

                         FROM cardlist  

                         ORDER by subcategory"); } 


echo "What's it for?";

echo "<form method=post name=f1 action=''>"; 

/// Add your form processing page address to  

//action in above line. Example action=dd-check.php//// 

////////// Starting of first drop downlist ///////// 

echo "<select name='cat' onchange=\\"reload(this.form) 

\\"><option value=''>Select one</option>"; 

while($noticia2 = mysql_fetch_array($quer2)) { 

if($noticia2['cat_id']==@$cat) 

{echo  

"<option selected value='$noticia2[cat_id]'>$noticia2[category]</option>"."<BR>";} 

else{ 

echo "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";} 

} 

echo "</select>"; 

////////////////// This will end the first drop down list /////////// 


echo "Who's it for?";

////////// Starting of second drop downlist ///////// 

echo "<select name='subcat'><option value=''>Select one</option>"; 

while($noticia = mysql_fetch_array($quer)) { 

echo "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>"; 

} 

echo "</select>"; 

////////////////// This will end the second drop down list /////////// 

// add your other form fields here ////  

echo "<input type=submit value=Submit>"; 

echo "</form>";  



				echo "</div>";
5

In the left part, put the form tag right after the div.

6

ah, many many thanks, thats done the trick, I really appreciate your help in resolving this for me as I was getting a major headache with it. Cheers and have a good day.