Weird Attribute of Forms

[DarkxPunk]

Hey everyone, Not sure if this better suits HTML or CSS, but CSS did solve the problem so here we go. I have a simple search field:HTML:

<form id="qSearch" action="index.php" method="get"><label id="qsLabel">Find:</label><input id="qsText" type="text" name="qSearch" value="a Therapist by Name, Skill, Location" title="Start typing than hit enter" onfocus="clearText(this)" onblur="ftSearch(this)"><input id="qsImage" type="image" name="qSearchSubmit" title="Find" alt="Find" src="images/btnSearch.gif"></form>

CSS:

#qSearch,#qsLabel,#qsText,#qsImage {position: relative;}#qSearch {border: 2px solid #e7e5e5;padding: 5px;background-color: #ffffff;padding: 0 5px 0;width: 290px;}#qSearch,#qsLabel,#qsText {height: 30px;}#qsText {left: -2px;width: 215px;}#qsImage {top: 3px;}

Now this is my tweaks, not the fix which I did do, so I am not looking for a solution, but a explanation. Why does the #qsText input field get pushed down? I don't get it...

[niche]

Pushed down how? Looks fine to me except for the the alt image. EDIT: In ff.

Edited September 9, 2012 by niche

[dsonesuk]

Do you mean the predifined default margins, padding, borders, font-size: font-family, line-height set by different browser that won't show as same? that is why you should use *{margin:0; padding:0;} to set them to zero, and define them yourself to the size that suit your needs along with font etc, so they should show as identical in all these browsers.

[DarkxPunk]

Pushed down how? Looks fine to me except for the the alt image. EDIT: In ff.

Here is what I see in Safari: Checked FF too, same...

Do you mean the predifined default margins, padding, borders, font-size: font-family, line-height set by different browser that won't show as same? that is why you should use *{margin:0; padding:0;} to set them to zero, and define them yourself to the size that suit your needs along with font etc, so they should show as identical in all these browsers.

I did not put it here, but I have it doing the * stuff. Still does it. Edited September 9, 2012 by DarkxPunk

[dsonesuk]

All i see is it being pushed down by form border, nothing like what you have.

[DarkxPunk]

So your saying that on your browser its not being pushed down like that? (ignore the blue, its just me outlining the element) Or are you saying that its being pushed down by a form border?

[dsonesuk]

No sorry, the input has the border on mine which forces it down, as the border is a addition to the outside, and therefore the height of input.

[DarkxPunk]

Is that border 5px? Cuz thats how much its being pushed down... What browser you using? Any ideas how to fix that? What you see at the top is the space being pushed down, the bottom is what I want it to look like... How can I stop the push?

[DarkxPunk]

Problem Solved... Guess what it was... Still haven't got it... Trust me I never would have if I did not start from scratch! So it seems the input with the image was causing everything to be pushed down... I solved it by simply telling it to float right. Question still stands... Why does this fix it? What is the input with the image doing to push the content down? Thanks for the input