HTML - Compatibility Mode - Button Not Appearing_问答_开发者

I have a basic page which is used in an iFrame on an intranet site. It is generated using ASP.NET, the generated source is as follows:

<!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><title>

</title><link rel="Stylesheet" type="text/css" href="css/EDT.css" />
<script type="text/javascript" language="javascript" src="includes/ADIServices.js"></script>
</head>
<body>
<form name="form1" method="post" action="ADIServices.aspx?type=2&amp;typename=contact&amp;id=%7bA2755D17-67FF-4539-8AAE-327038D5E618%7d&amp;orgname=RSAADI&amp;userlcid=1033&amp;orglcid=1033" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg3NDY0NDE0Mg8WBh4IdXNlcm5hbWUFEG5rZW5ueUB2dWxjYW4uaWUeCWhhc2FjY2Vzc2ceBWFkaWlkKClYU3lzdGVtLkd1aWQsIG1zY29ybGliLCBWZXJzaW9uPTIuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49Yjc3YTVjNTYxOTM0ZTA4OSRhMjc1NWQxNy02N2ZmLTQ1MzktOGFhZS0zMjcwMzhkNWU2MTgWAgIDD2QWAgIDDw8WAh4EVGV4dAUQbmtlbm55QHZ1bGNhbi5pZWRkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYDBQ9yYlVzZXJBY2Nlc3NZZXMFDnJiVXNlckFjY2Vzc05vBQ5yYlVzZXJBY2Nlc3NOb1LW6lJTh7HRxc/r9DmBabkk6Q+U" />
</div>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKT+7PEDAKl1bK4CQL62KvxCQLU6/3GAwLfl6DKCAK5ieyiCQLHst2vAuS7asmw5PqvB/FNK/KEPjCqeGEz" />
</div>
<div id="content">
    <div id="username">
        <span id="lblUsername" class="label">Username</span>
        <input name="txtUsername" type="text" value="nkenny@xxxxxxx.xx" id="txtUsername" disabled="disabled" class="textbox" />
    </div>
    <div id="access">
         <span id="lblUserAccess" class="label">Portal Access</span>
         <div id="useraccessradiobuttons">
             <span class="radiobutton"><input id="rbUserAccessYes" type="radio" name="rblUserAccess" value="rbUserAccessYes" checked="checked" /><label for="rbUserAccessYes">Yes</label></span> 
             <span class="radiobutton"><input id="rbUserAccessNo" type="radio" name="rblUserAccess" value="rbUserAccessNo" /><label for="rbUserAccessNo">No</label></span>
         </div>
    </div>
    <div id="passwordchange">
        <div id="newpassword">
            <span id="lblNewPassword" class="label">New Password</span>
            <input name="txtNewPassword" type="text" id="txtNewPassword" class="textbox" />
        </div>
        <div id="newpasswordrepeat">
            <span id="lblRepeatPassword" class="label">Repeat Password</span>
            <input name="txtRepeatPassword" type="text" id="txtRepeatPassword" class="textbox" />
        </div>
         <a id="lnkShowChangePasswordFields" class="link" OnClick="javascript:ShowHidePasswordFields()">Change Password</a>
    </div>

</div>
<div id="submit">
    <input type="submit" name="cmdSave" value="Save" onclick="return ValidateFields();" id="cmdSave" />
    <span id="lblStatus"></span>
</div>
</form>
</body>
</html>

I have a stylesheet assoiciated with this:

body
{
background-color:#EAF3FF;
font-family:Tahoma;
font-size:11px;
}

input
{
font-family:Tahoma;
font-size:11px;

}

#content
{
    width:350px;
}

.label
{
    width:30%;
    height:5px;
    position:relative;
    top:7px;
    float:left;
}
.radiobutton
{
    width:21%;
    height:5px;
    position:relative;
    top:7px;
    float:left;
}

.link
{
    width:50%;
    height:5px;
    position:relative;
    top:27px;
    float:left;
    color:blue;
    text-decoration:underline;
}
.textbox
{
    width:70%;
    position:relative;
    float:right;
}

#cmdSave
{
    position:relative;
    float:left;
    top:50px;
    left:-177px;
}

#lblStatus
{
    position:relative;
    float:left;
    left:-170px;
    top:53px;
    color:red;
}
#useraccessradiobuttons
{
    width:100%;
    position:relative;
}

#newpassword
{
    display:none;
    position:relative;
    top:22px;
}

#newpasswordrepeat
{
    display:none;
    position:relative;
    top:22px;
}

When some users are browsing to this page the Save button is 开发者_C百科not appearing. I first came across this issue and released that Compatibility mode was turned on, when I turned it off the issue disappeared. This was fine, I instructed users to ensure that compatibility mode was off.

However now some users are reporting that the button is not appearing, even when compatibility mode is off. Users are using IE8.

I know there is a meta tag that can force the browser to emulate IE7/8/9, is this the way I should go, and if so, which of these versions should I be using based on the code above? It can be assumed that only IE will be used

Thanks in advance,

Neil

EDIT

Based on the answer given below I modified my stylesheet as follows:

body
{
    background-color:#EAF3FF;
    font-family:Tahoma;
    font-size:11px;
    padding-top: 5px;
    padding-left:5px;
}

input
{
    font-family:Tahoma;
    font-size:11px;
}

#useraccessradiobuttons
{
    width:60%;
    display:inline;
}


#content
{
    width:350px;
    padding-bottom:10px;
}

#username    
{
    padding-bottom:7px;    
}
#newpassword
{
    padding-bottom:4px;
}

#passwordchange
{
    padding-bottom:7px;
}

#access
{
    width:100%;  
    padding-bottom:7px;    
}

.label
{
    float:left;
    width:30%;
}

.radiobutton
{
    padding-right:30px;
}

.link
{
    width:50%;
    height:5px;
    color:blue;
    text-decoration:underline;
}
.textbox
{
    width:60%;
}
#cmdSave
{
    width:60px;
}

#lblStatus
{
    color:red;
}
#useraccessradiobuttons
{
    display:inline;
}

#newpassword
{
    display:none;
}

#newpasswordrepeat
{
    display:none;
}

You seem to have a lot of unnecessary styling applied. The problem seems to be the