PDA

View Full Version : Proper CSS formatting prob



Sigurney
10-05-2007, 11:00 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:


<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>

Tawni
10-06-2007, 06:06 AM
For Starters Create a Class for your Table

or maybe a Divider with a class name

<div> <----instead of plain, do this
<div class="search"> <-----now in you CSS Style sheet mess with the numbers

for the class named search.

or do the same for table

<table> <-------this is generic or plain

<table class="search"> <----can now be specifically defined in all aspects of your CSS Style sheet, any changes in the colors or measurements should not effect the rest of the site cause in the style sheet you only changed the item defined by the class name "search".