pfSense キャプティブ ポータル認証ページを更新しようとしていますが、IE を除くすべての場所(デスクトップ バージョンとモバイル バージョンの両方) で正常に表示されます。問題は、上の表の行 (2 行の表から) が、下の画像に見られるように大きなサイズに拡張されていることです。HTML は次のとおりです。
<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>
CSSは次のとおりです。
.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;
}
最初の画像はフォームが IE でどのように表示されるかを示し、その下の画像は同じフォームが Chrome でどのように表示されるかを示しています。
助けていただければ幸いです。
よろしくお願いします、J