Hereby I’m having some problems with cross browser compatibilities. I have to admit I have no idea of how to correct cross browser problems, so I’m open to any suggestions.
This example is fortunately affecting to only some properties. These properties are the input and textarea fields. I’m using google chrome Version 21.0.1180.89. I construct the web with this browser but I have a problem with the rest of broswers available in my machine.
I would like to know how to act with this problem of cross browser compatibility:
Result Google Chrome Version 21.0.1180.89: (How it should look) (Safari look the same)
Result Firefox Version 15.0.1:
Result opera Version 12.01:
I’m open to any cross browser compatibilitiy codes.
Big time THANKS!
EDIT ////////////////////////////////////////////////////////////////////////////////////////
Here I place the neccesary code as you asked to understand better the problem. Thank you!
HTML:
<form name="form1" action="<?php echo $config->urls->templates?>../_php/form-to-email.php" method="post">
<div id="form_box" class="gradient">
<div id="center_box">
<h3>WANT TO BOOK ME?</h3>
<div id="form_data">
<table>
<tr>
<td><input type="text" value="Company name" class="gradient" name="company" /></td>
<td class="tdright"><input type="text" value="Name" class="gradient" name="name" /></td>
</tr>
<tr>
<td><input type="text" value="Telephone" class="gradient" name="telephone" /></td>
<td class="tdright"><input type="text" value="Email" class="gradient" name="email" /></td>
</tr>
<tr>
<td>
<!-- <input type="text" id="dateField" name="description" value="Description" onclick="this.value='';"/> -->
<?php
$myCalendar = new tc_calendar("date3", true, false);
$myCalendar->setIcon("../_php/calendar/images/iconCalendar.png");
$myCalendar->setPath("../_php/calendar/");
$myCalendar->setYearInterval(2012, 2022);
$myCalendar->dateAllow('2012-08-30', '2022-08-31');
$myCalendar->setDateFormat('j F Y');
$myCalendar->writeScript();
?>
</td>
<!-- <td><input type="button" /></td> -->
</tr>
</table>
</div>
<div id="form_text">
<br>
<textarea rows="7" cols="35" class="gradient" name="message">Your text...</textarea>
<input type="submit" value="SEND" id="input_sub" name="submit" />
</div>
<input type="image" id="input_img" src="<?php echo $config->urls->templates?>_img/submit_button.png" name="submit" />
</div>
</div>
</form>
<!-- Form validator -->
<script language="JavaScript">
/* Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml */
var frmvalidator = new Validator("myemailform");
frmvalidator.addValidation("company_name","req","Please provide your company name");
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("message","req","Please provide a small description");
frmvalidator.addValidation("email","req","Please provide your email");
frmvalidator.addValidation("email","email","Please enter a valid email address");
</script>
CSS code:
/*FORM*/
/*First white box*/
#form_box{
height: 370px;
width: 320px;
font-family: verdana;
font-size: 1em;
border-radius: 4px;
/*Gradient CSS3*/
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNTQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(54%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}
/*Gradient CSS3*/
/*CROSS: This is to make it compatible with IE9*/
.gradient {
filter: none;
}
h3{
padding-top: 20px;
padding-bottom: 10px;
padding-left: 10px;
}
/*Second box in form*/
#form_data{
width: 300px;
height: 105px;
background-color: #f2f2f2;
/* this is to stop collapsing margins. This way the margin-top of table works */
padding-top: 1px;
margin-top: -1px;
}
#center_box{
margin-left: 10px;
width: 300px;
}
input#input_sub{
margin-top: 8px;
margin-left: -3px;
}
input#input_img{
margin-top: 8px;
margin-left: 10px;
}
table{
margin-top: 10px;
}
table td{
padding-left: 10px;
padding-top: 5px;
}
td.tdright{
padding-left: 10px;
}
input{
text-transform: uppercase;
border: 1px solid #e1e0e0;
border-radius: 7px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMjElIiBzdG9wLWNvbG9yPSIjZGVkY2RkIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3OCUiIHN0b3AtY29sb3I9IiNkZWRjZGQiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNWI1YjUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(222,220,221,0.5) 21%, rgba(222,220,221,0.5) 78%, rgba(181,181,181,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(21%,rgba(222,220,221,0.5)), color-stop(78%,rgba(222,220,221,0.5)), color-stop(100%,rgba(181,181,181,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80b5b5b5',GradientType=0 ); /* IE6-8 */
}
input:not([type=submit]):not([type=image]){
/*input[type=text]{*/
height: 20px;
line-height: 20px;
padding-left: 10px;
}
input:not([type=text]){
background: transparent;
border: none;
color: #df0643;
}
/*Third box in form*/
#form_text{
height: 165px;
width: 290px;
margin-top: 2px;
padding-left: 10px;
background-color: #f2f2f2;
}
textarea{
border: 1px solid #e1e0e0;
padding: 10px;
border-radius: 7px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMjElIiBzdG9wLWNvbG9yPSIjZGVkY2RkIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3OCUiIHN0b3AtY29sb3I9IiNkZWRjZGQiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNWI1YjUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(222,220,221,0.5) 21%, rgba(222,220,221,0.5) 78%, rgba(181,181,181,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(21%,rgba(222,220,221,0.5)), color-stop(78%,rgba(222,220,221,0.5)), color-stop(100%,rgba(181,181,181,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(222,220,221,0.5) 21%,rgba(222,220,221,0.5) 78%,rgba(181,181,181,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80b5b5b5',GradientType=0 ); /* IE6-8 */
}
Passerby was right. I applied some width to input:not(type=submit):not(type:image) and to textarea. Once I did this all browsers display the same dimensions.
Thank you for the help!