Simple html page renders differently in Firefox and IE. How to fix it?_问答_开发者

Simple html page renders differently in Firefox and IE. How to fix it?

开发者 https://www.devze.com 2022-12-10 20:02 出处：网络

Below is the code of a Form that I am creating. The CSS code that it links to, has also been added after this code. The problem is that it renders differently in Firefox and IE. How to stabilize it?

相关专题：css

Below is the code of a Form that I am creating. The CSS code that it links to, has also been added after this code. The problem is that it renders differently in Firefox and IE. How to stabilize it?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Add/Update Political Party</title>
    <link rel="stylesheet" href="../Lib/entryformstyle.css" type="text/css"/>
</head>
<body>
<div id="sectionEntryForm" class="entryForm" style="width:300px">
    <table id="tblEntryForm" cols="2" class="entryFormTable" border="1">
        <tr bgcolor="white">
            <td colspan="2" align="center">Add / Update Political Party</td>
        </tr>
        <tr>
            <td>Party full name:</td>
            <td><input id="inPartyFullName" name="inPartyFullName" accept="text/plain" maxlength="80" class="inputBoxStyle" size="40"></td>
        </tr>
        <tr>
            <td>Party short name (initials):</td>
            <td><input id="inPartyShortName" name="inPartyShortName" accept="text/plain" maxlength="10" class="inputBoxStyle"></td>
        </tr>
        <tr>
            <td>Total members in party:</td>
            <td><input id="inTotalMembers" name="inTotalMembers" accept="text/plain" maxlength="6" class="inputBoxStyle"></td>
        </tr>
        <tr>
            <td>Chairman:</td>
            <td><input 开发者_如何学Pythonid="inChairman" name="inChairman" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
        </tr>
        <tr>
            <td>Vice-chairman:</td>
            <td><input id="inViceChairman" name="inViceChairman" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
        </tr>
        <tr>
            <td>Founder:</td>
            <td><input id="inFounder" name="inFounder" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
        </tr>
        <tr>
            <td>Date formed (dd/MM/yyyy):</td>
            <td><input id="inDateFormed" name="inDateFormed" accept="text/plain" maxlength="10" class="inputBoxStyle"></td>
        </tr>
        <tr>
            <td align="center"><input id="btnMenu" name="btnMenu" type="button" value="Return to Menu"></td>
            <td align="center"><input id="btnClear" name="btnClear" type="button" value="Clear Entries"></td>
            <td align="center"><input id="btnUpdate" name="btnUpdate" type="button" value="Update Record"></td>
        </tr>
    </table>
</div>
</body>
</html>

CSS Code:

div.entryForm
{
    padding: 1px;
    margin: 1px;
    color: black;
    background-color:lightgrey;
}

div.entryFormTable
{
    border:thin;
    border-color:black;
}

input.entryFormColor
{

}

Do websites need to look exactly the same in every browser?

Hint: No.

Long shot: Try defining specific widths on your table cells so that IE and FF hold the table cells open at the same sizes. Make sure they add up to 300px.

Someone suggested me to set the background color of the table as well. Setting the background color of the table as that of the DIV, solved the problem.

Thanks all for suggesting various alternatives.