CODEWITHSUNDEEP
htmlcss
RKh
RKh

Reputation: 14161

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

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 id="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
{

}

Upvotes: 0

Views: 423

Answers (3)

Keir
Keir

Reputation: 493

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

Hint: No.

Upvotes: 1

RKh
RKh

Reputation: 14161

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.

Upvotes: 0

Jeff Widmer
Jeff Widmer

Reputation: 4876

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.

Upvotes: 0

Related Questions