Proper CSS format for IE + Other browsers (IE compatibility)

Sigurney · 10-05-2007, 11:17 PM

Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!!

My probably terrible code is as follows

Code:

<table>
  <tr>
    <td valign="middle">
	<a href="/home"><img src="logo.jpg"></a>
    </td>

    <td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
	<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">

	<select name="FTS"> <!-- FTS = File Type Selections -->

	<option value ="File_Type">File Type</option>

	</select>
	<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
    </td>
    <td nowrap>&nbsp;&nbsp;<a href=/advanced_search.phpf>Advanced Search</a><br>&nbsp;&nbsp;<a href=/preferences.php>Preferences</a>
    </td>
  </tr>
</table>

Fang · 10-06-2007, 10:33 AM

Code:

<style type="text/css">
form {margin:0;} 
td {vertical-align:top;}
</style>

Why use tables for layout?