Menu
Hey,
I have an input text box which works like any ordinary input text box until it is viewed using Opera.
I have given the input a padding, border and a margin of 0px/none and the results in IE, Firefox and Safari are how they should be. However, there still seems to be a 1 pixel padding/margin at the top of the input box in Opera 😡 .
It’s driving me nuts and makes the text look really out of place.
Here is my code:
[code=html]<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Input text box padding problem in Opera</title>
<style type=”text/css”>
input.input1 {
width: 129px;
height: 19px;
margin: 0px;
padding: 0px;
padding-left: 3px;
padding-right: 3px;
border: 0px;
background: orange;
font-family: Arial;
font-size: 15px;
}
</style>
</head>
<body>
<input class=”input1″ type=”text” />
</body>
</html>
Below is a picture of the results. The top input text box is in Internet Explorer, the bottom is Safari:
[url]http://aycu10.webshots.com/image/25209/2005189174566971210_rs.jpg
Oh yeah, it’s zoomed in before you think “Woah, you have big text boxes”.
Any suggestions would be very much appreciated!
Thanks,
Oli