Position: Absolute / Input - cross-browser problem

And yet you don't seem to realize that it could be a conflict with another section of code in your stylesheet (or even the HTML) that could be causing Firefox to trip up here. Both deathshadow and I have seen cases like this before - sometimes the problem isn't with the code supplied, but elsewhere.

 

input {
  font-size: 6px;
  padding: 9px 0;
  }

Code (markup):

6px? It takes a 9px type block to even form a legible glyph.

Use padding to simulate leading. Works in FF, IE and Opera. Fails gracefully in Konqueror.

cheers,

gary

 

If you don't understand that something else on the page could be ****ing with you, neither are you - the mere PRESENCE of absolute positioning on it is a good indication that something else might be screwy with the layout (ESPECIALLY inside a table, if you're absolute positioning the elements, what the devil do you need a table for? - not that one should need to absolute position it)

That said, wild stab in the dark... FF is giving the proper height, but not centering the text, right? Decrease the line-height and height to 14px, and pad it 5px top/bottom.

.search {
	position:absolute;
	top:131px;
	width:200px;
	height:14px;
	padding:5px 0;
	font:13px/14px tahoma,helvetica,sans-serif;
	color:#000;
	background:#CCC;
	border:0;
}

Code (markup):

Is that what you are looking for? FF was not actually 'ignoring' the line-height, it's just not centering the text top to bottom in it. Solution? Use padding instead of height/line-height. WILL break in IE 5.x - but frankly, who cares about them anymore? Should work fine in IE 6 & 7, FF, Opera and Safari. (and if it works in Saffy, it should work in Konqueror - in theory)

 

I'm finding more and more things in Konqueror that either don't work at all (like text appears above images using menu image replacement, while every other browser shows only the images) or goofy (scrolls a non-repeating image repeat-y when no other browser does it using standard techniques)... it may have passed the Acid Test, but Safari's way ahead of Konqueror, in my opinion. I encounter fewer errors surfing with FF1.5 than with Konqueror (it ended up sitting on this machine purely for testing rather than surfing).

 

It works both ways. Webkit (Safari) is based on the KHTML (Konqueror) engine. Apple works their magic, then returns the code to the community. Sometimes they're a bit slow about it, making Konqueror lag. The reverse happens, too. KHTML will release improvements that Apple is slow to incorporate into Webkit.

Why are you using FF1.5? Upgrade to FF2. If the Ubuntu repository doesn't have it, add the Debian repository to your apt/sources.list, and install Iceweasel.

cheers,

gary

 

perhaps this code will help:

.search {
	position:absolute;
	top:131px;
        left: 0;
	width:200px;
	height:14px;
	padding:5px 0;
        margin: 0;
	font:13px/14px tahoma,helvetica,sans-serif;
	color:#000;
	background:#CCC;
	border:0;
        display: block;
         

}

Code (markup):

 

Gary,
Debian quit supporting FF because it's not free enough for them. I did download iceweasel... but for whatever reason, not only does it crash all the time but I thought it was acting a little funny... and yup... it was rendering exactly the same as FF1.5 which defeated the whole purpose. I don't know why. The 'blows machine has FF2 and I can use the current Opera on the Ubuntu machine.

Whenever I get another machine (with VMWare so Ubuntu + M$), I hope to keep a copy of 1.5 for testing because I've seen sites look off on for example a menu in FF1.5 and look great in 2. When I write a page, it looks good in ALL of them, so I figure there's something either wrong or not-best with a page when the menu wraps and breaks in 1.5 and not 2. Plus the default font seems a little bigger than on other machine and that seems to get exacerbated in 1.5 which helps me remember to check text enlargments : )

 

Thanks deathshadow, your solution worked.

Here is the final code:

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

Code (markup):

It appears to work well in IE6, IE7, FF, Opera, Netscape, Safari.