Haxed
Reputation: 2917
Cross browser compatibility issue with forms
I have coded a customer information form, but it looks different in IE 8, chrome and Firefox. I want it to display in all the three browsers in the same way, like shown below.
The image below shows what it looks like in the other browsers
1) Firefox
2) Chrome
3) IE 8 compatible mode
Here is my html code:
<!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> Web System</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="headerTop">
<p> </p>
<p> </p>
</div>
<div id="headerBottom"></div>
</div>
<div id="wrapper">
<div id="flags"></div>
<div id="topLine"></div>
<div id="information">
<div id="welcomeText">Welcome ADMIN, CB002813</div>
<div id="menuSearchText">Menu Search</div>
<div id="menuSearchTextbox"><input type="text" id="menuSearch" name="menuSearch" /></div>
<div id="searchIcon"></div>
<div id="helpIcon"></div>
<div id="helpText">Help</div>
<div id="logoutIcon"></div>
<div id="logoutText">Logout</div>
</div>
<div id="navigation">
<div id="reservations"></div>
<div id="rentals"></div>
<div id="tariffs"></div>
<div id="fleet"></div>
<div id="tools"></div>
<div id="reports"></div>
<div id="systemManagement"></div>
<div id="navigationRepeat"></div>
</div>
<div id="customerForm">
<div id="customerHeader"></div>
<form>
<div id="firstLine">
<div id="customerNo">Customer No.</div>
<input type="text" name="customerNoText" id="customerNoText" size="13" />
<div id="title">Title</div>
<select id="titleCombo">
<option value="selectTitle"></option>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div id="secondLine">
<div id="firstName">First Name</div>
<div id="firstNameMandatory"></div>
<input type="text" id="firstNameText" name="firstNameText" size="13"/>
<div id="middleName">Middle Name</div>
<input type="text" id="middleNameText" name="middleNameText" size="13"/>
<div id="lastName">Last Name</div>
<div id="lastNameMandatory"></div>
<input type="text" id="lastNameText" name="lastNameText" size="13"/>
<div id="searchIcon2"></div>
</div>
<div id="thridLine">
<div id="delivery">Delivery</div>
<select id="deliveryCombo">
<option value="selectDelivery">Select</option>
<option value="document">Document</option>
<option value="nonDocument">Non Document</option>
</select>
<div id="collection">Collection</div>
<select id="collectionCombo">
<option value="selectCollection">Select</option>
<option value="small">Small</option>
<option value="large">Large</option>
</select>
</div>
<div id="fourthLine">
<div id="flightNo">Flight No.</div>
<input type="text" id="flightNoText" name="flightNoText" size="5"/>
<select id="flightNoCombo">
<option value="selectFlightNo"></option>
<option value="ul209">UL 209</option>
<option value="ul211">UL 211</option>
</select>
<div id="terminal">Terminal</div>
<input type="text" id="terminalText" name="terminalText" size="13"/>
</div>
<div id="fifthLine">
<div id="specialServices">Special Services</div>
<select id="specialServicesCombo">
<option value="selectSpecialServices"></option>
<option value="plane">Plane</option>
<option value="ship">Ship</option>
<option value="taxi">Taxi</option>
</select>
<div id="raType">RA Type</div>
<select id="raTypeCombo">
<option value="selectRaType"></option>
<option value="a">A</option>
<option value="b">B</option>
</select>
</div>
</form>
</div>
<div id="bottomLine"></div>
<div id="footer">
<div id="footerText1">Terms and Conditions | Contact Us</div>
<div id="footerText2">Copyright © 2010. All rights reserved. Software by EVES IT Lanka (Pvt) Ltd.</div>
<div id="w3cLogo"></div>
</div>
</div>
</body>
</html>
And here is my CSS
* {
margin: 0px;
padding: 0px;
}
#header #headerBottom {
background-image: url(../images/header_part2.gif);
background-repeat: repeat-x;
height: 6px;
width: auto;
}
#wrapper #flags {
background-image: url(../images/flags.gif);
height: 37px;
width: 960px;
background-color: #FFF;
background-position: 777px;
background-repeat: no-repeat;
}
#header #headerTop {
background-image: url(../images/header_part1.gif);
background-repeat: repeat;
height: 185px;
background-position: center;
}
#wrapper #topLine {
background-image: url(../images/line.gif);
background-repeat: no-repeat;
background-position: center;
height: 5px;
width: 960px;
}
#wrapper #informationTop #informationLeft {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
float: left;
margin-left: 34px;
margin-top: 12px;
}
#wrapper {
background-color: #FFFFFF;
width: 960px;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: double;
border-left-style: double;
border-right-color: #CCC;
border-left-color: #CCC;
}
#wrapper #informationTop #informationRight #informationRightIcon {
background-image: url(../images/help_icon.gif);
height: 20px;
background-repeat: no-repeat;
float: left;
width: 637px;
margin-top: 7.5px;
background-position: 617px;
}
#footer {
margin-bottom: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
padding: 10px;
}
#wrapper #footer #w3cLogo {
background-image: url(../images/w3c_logo.gif);
height: 31px;
width: 960px;
background-repeat: no-repeat;
background-position: center;
margin-top: 10px;
}
#wrapper #bottomLine {
background-image: url(../images/line.gif);
height: 5px;
width: 960px;
margin-top: 736px;
background-repeat: no-repeat;
background-position: center;
}
#wrapper #loginContainer #loginContainerMain form {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
padding-top: 43px;
margin-left: 56px;
margin-right: 40px;
margin-bottom: 68px;
}
#wrapper #informationTop #informationRight #informationRightText {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
float: right;
margin-top: 12px;
margin-right: 22px;
}
body {
background-color: #FFFFFF;
background-image: url(../images/background.gif);
background-repeat: repeat-x;
}
#wrapper #information #welcomeText {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
float: left;
margin-left: 34px;
margin-top: 14px;
}
#wrapper #information #menuSearchText {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
margin-left: 330px;
margin-top: 14px;
}
#wrapper #navigation {
background-color: #06C;
height: 36px;
width: 960px;
clear: both;
}
#wrapper #information #helpText {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
margin-top: 13px;
margin-left: 5px;
}
#wrapper #information #logoutIcon {
background-image: url(../images/logout_icon.gif);
float: left;
height: 23px;
width: 24px;
margin-top: 8px;
margin-left: 10px;
margin-bottom: 12px;
}
#wrapper #information #logoutText {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
float: right;
margin-top: 13px;
margin-right: 17px;
}
#wrapper #information #menuSearchTextbox #menuSearch {
float: left;
margin-top: 9px;
margin-left: 10px;
}
#wrapper #navigation #reservations {
background-image: url(../images/reservation_button.gif);
height: 36px;
width: 86px;
float: left;
}
#wrapper #navigation #rentals {
background-image: url(../images/rental_button.gif);
height: 36px;
width: 124px;
float: left;
}
#wrapper #navigation #tariffs {
background-image: url(../images/tariff_button.gif);
height: 36px;
width: 59px;
float: left;
}
#wrapper #navigation #fleet {
background-image: url(../images/fleet_button.gif);
float: left;
height: 36px;
width: 64px;
}
#wrapper #navigation #tools {
background-image: url(../images/tools_button.gif);
height: 36px;
width: 56px;
float: left;
}
#wrapper #navigation #reports {
background-image: url(../images/reports_button.gif);
float: left;
height: 36px;
width: 71px;
}
#wrapper #navigation #systemManagement {
background-image: url(../images/systemManagement_button.gif);
height: 36px;
width: 135px;
float: left;
}
#wrapper #navigation #navigationRepeat {
background-image: url(../images/navigation_repeat.gif);
width: 365px;
height: 36px;
float: right;
background-position: right;
background-repeat: repeat-x;
}
#wrapper #navigation {
border: 1px solid #adb09d;
}
#wrapper #information #searchIcon {
background-image: url(../images/search_icon.gif);
height: 16px;
width: 16px;
float: left;
margin-left: 14px;
margin-top: 13px;
}
#wrapper #information #helpIcon {
background-image: url(../images/help_icon.gif);
height: 20px;
width: 20px;
float: left;
margin-top: 10px;
margin-left: 26px;
}
#wrapper #customerForm {
height: 226px;
width: 682px;
margin-top: 53px;
margin-left: 11px;
border: 1px solid #F30;
}
#wrapper #customerForm #customerHeader {
background-image: url(../images/customer_header.gif);
height: 18px;
width: 682px;
background-position: center;
background-repeat: no-repeat;
}
#wrapper #customerForm form #firstLine {
height: 22px;
width: 682px;
margin-top: 39px;
}
#wrapper #customerForm form #secondLine {
height: 22px;
width: 682px;
margin-top: 6px;
}
#wrapper #customerForm form #thridLine {
height: 22px;
width: 682px;
margin-top: 6px;
}
#wrapper #customerForm form #fourthLine {
height: 22px;
width: 682px;
margin-top: 6px;
}
#wrapper #customerForm form #fifthLine {
height: 22px;
width: 682px;
margin-top: 6px;
}
#wrapper #customerForm form #firstLine #customerNoText {
float: left;
margin-left: 9px;
}
#wrapper #customerForm form #thridLine #delivery {
}
#wrapper #customerForm form #firstLine #titleCombo {
}
#wrapper #customerForm form #fifthLine #specialServices {
}
#wrapper #customerForm form #firstLine #customerNo {
float: left;
margin-left: 46px;
}
#wrapper #customerForm form #firstLine #title {
float: left;
margin-left: 70px;
margin-right: 10px;
}
#wrapper #customerForm form #secondLine #firstName {
float: left;
margin-left: 60px;
}
#wrapper #customerForm form #secondLine #middleName {
float: left;
margin-left: 19px;
}
#wrapper #customerForm form #secondLine #firstNameMandatory {
background-image: url(../images/mandatory_icon.gif);
height: 8px;
width: 8px;
float: left;
}
#wrapper #customerForm form #secondLine #LastName {
float: left;
}
#wrapper #customerForm form #secondLine #firstNameText {
float: left;
margin-left: 3px;
}
#wrapper #customerForm form #secondLine #middleNameText {
float: left;
margin-left: 10px;
margin-right: 22px;
}
#wrapper #customerForm form #secondLine #lastNameMandatory {
background-image: url(../images/mandatory_icon.gif);
height: 8px;
width: 8px;
float: left;
}
#wrapper #customerForm form #secondLine #lastName {
float: left;
}
#wrapper #customerForm form #secondLine #lastNameText {
float: left;
margin-left: 3px;
}
#wrapper #customerForm form #secondLine #searchIcon2 {
background-image: url(../images/search_icon.gif);
height: 16px;
width: 16px;
float: left;
margin-left: 5px;
}
#wrapper #customerForm form #thridLine #delivery {
float: left;
margin-left: 77px;
}
#wrapper #customerForm form #thridLine #deliveryCombo {
float: left;
margin-left: 11px;
width: 105px;
}
#wrapper #customerForm form #thridLine #collection {
float: left;
margin-left: 36px;
}
#wrapper #customerForm form #thridLine #collectionCombo {
float: left;
margin-left: 10px;
width: 105px;
}
#wrapper #customerForm form #fourthLine #flightNo {
float: left;
margin-left: 70px;
}
#wrapper #customerForm form #fourthLine #flightNoText {
float: left;
margin-left: 10px;
}
#wrapper #customerForm form #fourthLine #flightNoCombo {
float: left;
width: 49px;
}
#wrapper #customerForm form #fourthLine #terminal {
float: left;
margin-left: 38px;
}
#wrapper #customerForm form #fourthLine #terminalText {
margin-left: 15px;
}
#wrapper #customerForm form #fifthLine #specialServices {
float: left;
margin-left: 30px;
}
#wrapper #customerForm form #fifthLine #specialServicesCombo {
float: left;
width: 105px;
margin-left: 11px;
}
#wrapper #customerForm form #fifthLine #raType {
float: left;
margin-left: 42px;
}
#wrapper #customerForm form #fifthLine #raTypeCombo {
margin-left: 14px;
width: 105px;
}
#wrapper #customerForm form {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
So can anyone guide me as to what I should do next ?? ...........Ye I think that is all.
Upvotes: 0
Views: 2938
Answers (3)
Andrew Moore
Reputation: 95484
Instead of using the size attribute, you should be using CSS to set the width of your fields. Also, depending of the user agent, the <input> and <select> elements might be using a different box model than the traditional W3C "content-box" model.
You can use the following CSS to size your inputs the same on all browsers, including IE:
input, select {
width: 105px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
This will force all inputs to use the border-box model (Quirks IE Model) and ensure that your inputs are the same size on all browsers.
Upvotes: 4
Hoàng Long
Reputation: 10848
Maybe you will find CSS hacking for browser a little useful: http://paulirish.com/2009/browser-specific-css-hacks/
It allows you to write separate CSS rule for specific browser, which maybe the only work-around for some situation.
Upvotes: 0
mrbellek
Reputation: 2300
You need to give the INPUT fields a width using CSS, not using the size=.. attribute. Not all browsers respect the size attribute for both the maximum allowed content AND the size of the element.
So instead of
<input type="text" size="7">
You need something like
<input type="text" style="width: 150px;">
(With the CSS in the external file with everything else, instead of inline like in the example.)
Upvotes: 2
Related Questions
- Problems with Forms and CSS
- IE css problems when styling form
- HTML Form Alignment Issues in IE
- Why doesn't css work in IE when it works as expected in Firefox and Chrome?
- Cross browser compatibility issues with HTML form
- form not showing up properly in chrome and IE6
- HTML form fields not usable in chrome, works in IE
- How can I force form elements to render the same across browsers?
- Form styles acting different in FF and Chrome
- Cross Browser Compatibility problem among IE8 and MOzilla firefox