Position: Absolute / Input - cross-browser problem

Hi,

I'm having a headache of a time trying to get my positioning correctly positioned the same across all main browsers, IE, Firefox, Opera, Safari.

I have an input box calling class "search". Here is the code:

.search {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 6px;
	color: #999999;
	border: 0;
	background: none;
	width: 200px;
	height: 24px;
	position: absolute;
	top: 130px;
	}

Code (markup):

Now in Opera and Safari it positions my text perfectly centered (vertically) in the input box. IE and FF position it towards the top of the input box about 10 or so pixels up from there.

I know this is a problem with the default browser input box formatting but I don't know what. Surely there is a way to fix this.

I also have this:

form {
	display: inline;
	}
input:focus {
	outline: none;
	}

Code (markup):

input.focus is for safari which takes away the default safari formatting of the input box. Any help much appreciated! Thanks.

 

want to show me a link to the site, the html that this goes to and your whole css? it just makes it easier to see which elements are making this happen. also did you use the browser reset at the top of your css?

 

try

in .search class
this will fix IE problem.
but FF is not working still now.
try to increase your font size and use padding to fix this

 

What does your search form look like?

 

Thanks softnmore.

The formatting is perfect and identical in Opera, Safari, IE. But you are right it's not working in FF. It looks like FF is completely ignoring the line-height attribute, no matter what I try. This is ridiculous. I would love to be able to find a fix for this because i'd use it a lot in the future.

I can't show you my site because it's not online yet. But if you were to test .search class in a simple input box you should see what I mean.

This is what I have now:

.search {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	border: 0px;
	background: none;
	width: 200px;
	line-height: 24px;
	height: 24px;
	padding: 0px;
	position: absolute;
	top: 131px;
	}

Code (markup):

Why Firefox is ignoring line-height I don't know. If anyone can find a fix then you are a legend.

 

Seconded - CSS without the accompanying HTML is pretty much gibberish... as I've said recently diagnosing a CSS issue without the HTML is like doing brain surgury over the telephone in 1876... Much less without other CSS that could be interfering - are you using a universal reset? Targeted Reset? No reset at all? What TYPE of input are we talking about? Text? Button? Submit? They all have differing behaviors.

Though yes, FF ignores line-height - usually if you set height and line-height the same for input[text], you can get FF and IE to line up... Opera, well... does this really smart thing and treats inputs like they were display:block - too bad nobody else does that... and safari, did what browser makers do best, went off on their own bullshit tangent making getting uniform appearance nigh impossible.

If it's type="button" or type="submit" - good luck with that... Since no two browsers handle those anything alike when it comes to padding, margins, borders or anything else which is why I've taken to using type="image" for my submits. (since at least that too can be made to behave like a block)

 

It is an input text box. I am not using a reset. Doesn't that just reset margin and padding to 0?

Here is my HTML code:

<form name="search" method="get" action="/search.php">
                    <table class="tbl-basic">
                      <tr>
                        <td class="td-sbox-01"></td>
                        <td class="td-sbox-02"><input name="search" type="text" class="search" onclick="this.value='';" value="Search Here..." /></td>
                        <td class="td-sbox-03"></td>
                        <td><input type="image" src="images/search-button.gif" alt="Search" /></td>
                        <td class="td-sfill"></td>
                      </tr>
                    </table>
                  </form>

Code (markup):

 

In it's most basic form, yes. Now, given that you're using a table for the form, what does the rest of your page look like? I could probably re-write this to work cross-browser but the first thing I'd do is rip out the table.

 

I am using tables for all the page. I don't think the tables are causing the problem.

 

*takes a second look at the code*

Change that name attribute to a class attribute inside the <form> tag.

 

If I add a class to the <form> tag what styles should I specify? I don't think the form is the problem, just the text input box. If I could find a firefox alternative for line-height it will all work well.

 

You're referencing a class in your stylesheet for the form element, but there's no class on the form element itself, just a deprecated name attribute. Change those.

 

I don't need to reference a class in the <form> tag.

form {
	display: inline;
	}

Code (markup):

This applies to ANY form on the page.

How do I use a custom style for Mozilla? Like to make IE for example use a custom style it's *html ~ can something like this be done with mozilla?

 

Dan thought this was referring to your form, since you (illegally) have a "name" in it equalling your td's class:

.search {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	border: 0px;
	background: none;
	width: 200px;
	line-height: 24px;
	height: 24px;
	padding: 0px;
	position: absolute;
	top: 131px;
	}

Code (markup):

Try what deathshadow said-- where you have line-height: 24px, set the height to that as well. When the font-size is half the line-height (or height for ff), the text will center.

 

I already have height and line-height at 24px.

I tried font-size at 12px but it makes it worse.

 

We REALLY need to see the COMPLETE code then - I suspect something else in your code is interfering, or you've got some sort of bug somewhere else - like being in quirks mode, or using a reset not compatable with the form type, or any of a half dozen other things that we cannot see from these little ten line snippets.

 

My doctype is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Code (markup):

I have read that firefox ignores line-height in input fields. This is why it's not working.

 

You just aren't understanding our responses here. WE NEED TO SEE ALL OF IT TO DIAGNOSE ALL OF IT.

Bah, nevermind - it's becoming readily apparant you don't actually WANT help. Why the hell do people get so damned protective of their code - post the whole thing or give us a URL, otherwise you aren't going to get REAL help but a bunch of half assed guesses based on wild assumptions. END OF STORY.

Sorry, but post after post of this the past... two weeks is REALLY starting to get on my nerves. Post after post of people going "help me, help me" and then not actually showing us what's ACTUALLY WRONG. There is NO HTML/CSS ON THE PLANET that warrants that level of secrecy, privacy or just plain ... gah, I lack the words.

 

Try this, this might help you.

h tt p://w w w . webcredible. co . uk/user-friendly-resources/css/css-forms.shtml - (i cant put links on my posts)

 

deathshadow, you try to act like an expert but if you need EVERY piece of code from the page to diagnose a little problem with a input box then you aren't that smart.

I explained very clearly what was wrong. A simple test of my code would have showed you exactly what the problem is (atleast softnmore tested it). Firefox is ignoring "line-height" in an input text field. If it didn't ignore it it would work perfectly. It works perfectly in the other 4 main browsers. So you are trying to find a problem which I have already found, rather than a solution to it.