Hey folks! I'm working on a site where I have a form with an input text field. I'm using a background image, so I'm trying to align the actual (transparent) field precisely where I want it in relation to the image. In FF, if I use a padding-top:7px; it aligns perfectly. But then it's too far down in Safari and Chrome. Conversely, if I remove the padding in FF, it looks OK in Safari and Chrome. Is there a way to code around this in CSS, or am I doing something wrong? THANKS!!
What drhowarddrfine said is not just a simple joke. It's an attempt to get you to understand that we cannot help you very well without seeing the code you are referencing. Edit: I hope for the sake of judgment on human intelligence that eventually someone asking for help will understand that joke without someone taking the time to explain it for that person.
Ah. Why didn't you just say so? I assumed that it was probably some standard quirky thing that everyone (except me) knew about within either FF or Safari. After further research, I resolved it by assigning a line-height style, which then brought consistency across the two browsers.
A CSS reset is very useful for making sure simple properties are the same between browsers. Here is an example of a CSS reset.
Uhm, we're talking form elements, applying any sort of reset to them is just going to make matters WORSE. I can diagnose the problem WITHOUT seeing one line of code... The problem is that the HTML/CSS specifications do NOT actually say how form elements like inputs are supposed to be rendered by the browsers or how CSS is supposed to be applied to them - as such the various browser makers went and did what they do best; Went their own direction and to hell with what anyone else is doing. Firefux thanks to it's nyetscape heritage has 0.2em of padding you have zero control over on top of what it declares for 'height', and it obeys the 'height' property. IE has about 4px of padding that even padding:0 won't remove. while ignoring height but treating line-height as height... Opera does the most sensible thing, and simply treats them as if they were inline-block (the horrors you say), While safari, well, christmas on a cracker what the **** are they smoking - it would be better we don't discuss what they do to them. To attempt what you are trying to do, I would probably wrap the input in a span, strip the input of all visual formatting (background/border), set the span to inline-block and then pray to god you can get that input element to actually align how you want inside the span - as applying any visual styling other than 'border' to a input is usually a complete and miserable /FAIL/ cross-browser. Which is why I have YET to see anyone pull that off in a way that isn't broken on my machine running Opera. Basically, this is another of those bullshit design ideas your "design in photoshop' ***gots" come up with as a brilliant idea that is near impossible to implement cross browser - ESPECIALLY if you care about getting it pixel perfect.