モニターによって表示が異なる Web サイトがあります。デスクトップ:
ラップトップ:
HTML
<body>
<div id="Links">
<a href="About.html"><img src="Slideshow/About.png" width="140em" /></a>
<br /><br />
<a href="Contact.html"><img src="Slideshow/Contact.fw.png" width="140em" /></a>
<br /><br />
<a href="Services.html"><img src="Slideshow/Services.fw.png" width="140em" /></a>
</div>
<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>
<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
CSS
body
{
background-image:url(Pictures/background.jpg);
background-repeat:no-repeat;
background-size:100%;
}
#mainText
{
position: absolute;
width: 70%;
float: left;
left: 14em;
}
#conTable
{
left:14em;
top:8em;
position:absolute;
}
#Banner
{
position:absolute;
padding-left:40%;
}
#Links
{
position:absolute;
float:left;
width:50px;
}
ラップトップとデスクトップの表示が異なる理由と、それを修正する方法を教えてください。写真からわかるように、私のラップトップのすべてが左にずれています。