Form Formatting Issues

[nj_jcarter]

Greetings ALL!

I come to you with a most perplexing problem. I am having an issue with a simple search form that works fine in IE (of course it does) but is a little wacky in Firefox. It doesn't completely distort the page or anything, it just moves around a lil' bit. I've tried doing every sort of adjustment but it doesn't want to budge.

I have, after doing a little research, come to conclude that it is my css that is making this feature behave funky.

BUT, not being a CSS uber-jedi-guru, I am unable to figure out how to correct it. For further verification, I downloaded the Firefox Web Developer Toolbar extension. Upon disabling the "Browser Default Styles" it seems to correct itself. However, this fix affects only my computer, so I need to know if there is a way to have this happen on the client's side.

I'll post some pics of the phenomenon as well as the .css file. Don't hate me as I've already validated it and w3c HATES it, so I know it's terrible, but I am still learning. Feel free to make suggestions as to correcting it's many errors though.

IE version...
http://img141.imageshack.us/img141/7013/iees4.jpg

Firefox version...
http://img141.imageshack.us/img141/3919/ffpv2.jpg

[duncanhall]

With only the CSS it's a little hard to judge exactly what's going on, but one thing that stands out is the fact that you have declared the search input's border 5 times.

Replace your line




input.search
{
....
border-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px;
....
}


with




input.search
{
....
border-width: 1px;
}


This probably won't make any difference, but it's a start. You're stylesheet really isn't that big, and as you've already pointed out, is lacking in the validation department. Spend some time reading through what the w3c validator has to say and try and fix your errors. That way you're a lot more likely to find the problem.

[nj_jcarter]

Done and Done Sir!

I didn't understand why it wanted my to declare the background color to everything... especially since I didn't want a background color. Maybe I am missing something in the understanding CSS department... and by maybe I mean that, yes, I am missing something in the understanding CSS department.

*Update... it didn't change anything, but at least its changed!

[duncanhall]

You're encouraged to provide a background color [sic] as well as foreground to ensure that all text and other elements remain visible and easily accessible. For example, if you have a div that has a 'color: #FFFFFF;' attribute, then it's text would be unreadable against a white background. To prevent this from happening, anywhere you specify a light foreground colour, you should also specify a dark background colour, and vice-versa.

You can use 'background-color: inherit' to apply the same formatting as the parent element rather than implicitly specifying the background colour each time.

[nj_jcarter]

Gah? Div? Parent Element? I am not knowing the meaning of these terms. I understand the concept and what you saying but I am not sure how to make it do what you just said... sorry :(

My background is a red color (db0026 to be exact) and it's outlined in the table. Is that a parent element?

Like I pointed out initially, it seems to correct when the "Browser Default Styles" are disabled. So if I could get away to turn off everyone elses that would be awesome... though I realize this is the douche way out. But at least I'm trying. I could be like, "Well, over 58% of the internet's users use IE so why should I care?", but I'm trying to do it right... kinda. :)

Also, I seem to recall seeing a link in a thread to a site that would run your page in all of the other browsers for you but I can't seem to find it now. And does this work on pages that are yet to be published i.e. my site?

[nj_jcarter]

As per suggestion... here's my html. This is inside of an include that way I can stick it anywhere I please. I thought that I had made it as simple as possible.



<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left" valign="bottom">
<form method="post" action="../search.asp">
<input type="hidden" name="posted" value="1"/>
<input class="search" type="text" name="stext" size="20" style="border-style:solid; border-width:1; text-align:right" value="Keyword or Part #" onFocus="doClear(this)"></td>
<td align="center" bgcolor="#DB0026" width="24">
<b><font face="Verdana" color="#FFFFFF" style="font-size: 8pt">in</font></b></td>
<td align="justify">&nbsp;<select class="search" name="scat">
<option value="">All Categories</option>
<option value="2">Marker/Clearance Lamps</option>
<option value="1">Systems</option>
<option value="4">Printers</option>
<option value="3">Scanners</option></select></td>
<td align="center" width="80">
<input type="image" name="submit" width="68" height="18" src="../images/searchbutton.gif"/></td>
<tr>
</table>

[evildrummer]

I will take a look at it soon, I just have some other things I need to do first

[nj_jcarter]

I fixed it! It was an html thing. I had a </td> tag out of place and IE was skipping right over it while Firefox was having a heart attack.

I noticed it because Dreamweaver was displaying it as text in the design view. Which it shouldn't. When I clicked on it, it told me the tag was unnecessary. But that would screw up the table if it was true. So I examined and noticed it had some hidden includes that didn't necessarily have to be inside of the tag. So I moved them up one. Then, badabing, she works!

So there's your answer. What's odd is that dreamweaver didn't display this as an error in the code inspector. I guess I'll gust have to be more careful in the future.

Thanks for the help...