I'm trying to update the pfSense captive portal authentication page, and it appears fine everywhere except for IE (both desktop and mobile versions). The issue is that the upper table row (from a table of 2 rows), is extending to a large size as can be seen in the image below. The HTML is:
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<form method="post" action="#PORTAL_ACTION#" align="center" >
<input name="redirurl" type="hidden" value="#PORTAL_REDIRURL#">
<input name="zone" type="hidden" value="#PORTAL_ZONE#">
<center>
<table class="MainTable">
<!--Beginning of Form title heading-->
<tr class="TableTopRow">
<td class="TableTopCell1">
<img src="captiveportal-wifi_icon.png" width="50%" height="3%" align="right">
</td>
<td class="TableTopCell2" >
<img src="captiveportal-aragon_logo.png" width="50%" height="3%" align="left">
</td>
</tr>
<!--End of Form title heading-->
<!--Beginning of main area which contains authentication form and an area reserved for showing errors-->
<tr class="TableLowerRow" colspan="2" height="70%">
<td colspan="2" width="100%">
<div id="mainlevel">
<center>
<table height="100%" width="100%" border="0" cellpadding="0">
<tr>
<td style="color:#0B173B;font-family:arial; font-weight:bold; font-size:90%"><center>
Welcome to Aragon House Business Center
</td>
</tr>
<tr>
<td>
<center>
<div id="mainarea">
<center>
<table width="100%" border="0" cellpadding="1px" cellspacing="2">
<tr height="20%">
<td>
<div id="maindivarea">
<center>
<!-- The statusbox area is where errors will be shown should there be an error when authenticating with the hotspot-->
<div id='statusbox'>
<font color='red' face='arial' size='+1'>
<b>
#PORTAL_MESSAGE#
</b>
</font>
</div>
<!--End of error message area-->
<br />
<!--Beginning of form area; this area will contain fields for authenticating users with the hotspot system-->
<div id='loginbox'>
<table>
<!-- Beginning of area where you input the authentication details-->
<tr><td> </td></tr>
<tr><td align="right" style="color:#333333;font-family:arial; font-size:98%;">Username:</td><td><input name="auth_user" type="text" style="border: 1px solid;"></td></tr>
<tr><td align="right" style="color:#333333;font-family:arial; font-size:98%;">Password:</td><td><input name="auth_pass" type="password" style="border: 1px solid;"></td></tr>
<tr><td> </td></tr>
<tr>
<td align="right" style="color:#333333;font-family:arial; font-size:98%;">Enter Voucher Code: </td>
<td><input name="auth_voucher" type="text" style="border:1px solid;" size="20"></td>
</tr>
<tr>
<td colspan="2" align="right" style="padding-right:10px"><input name="accept" type="submit" value="Continue"></td>
</tr>
<!-- End of area where you input the authentication details-->
</table>
</div>
<!--End of authentication form area-->
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</center>
</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</center>
<!--End of main area-->
</form>
</body>
</html>
While the CSS is:
.MainTable{
height: 40%;
width: 30%;
padding: 0;
border-radius: 15px;
border:1px solid #000000;
}
.TableTopRow{
width: 30%;
height: 30%;
background-color:#CCCCCC;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-top:1px #6DA4DE;
}
.TableLowerRow{
height: 70%;
}
.TableTopCell1{
width: 50%;
border-top-left-radius: 15px;
}
.TableTopCell2{
width: 50%;
border-top-right-radius: 15px;
}
The first image shows how the form appears in IE, while the one below it shows how the same form appears in Chrome.
Help is greatly appreciated.
Thanks in advance, J
