私の Web サイトの特定のブラウザで、右側の余白に問題があります。ページが読み込まれると、コンテンツが中央に配置されません (つまり、ページ全体を表示するには右にスクロールする必要があります)。スクロールすると、右マージンがないように見え、テキストが端まで伸びています。このサイトは、FF (バージョン 22) および IE (バージョン 7-10) の私のコンピューターでは正常に表示されますが、他のコンピューター (および iOS の Safari) で表示すると、概説された問題が表示されます。何か案は？私が考えることができる唯一のことは、ブラウザに画面上で利用可能なスペースよりも多くのスペースを要求していることですが、これをテストする方法がわかりません. CSS ファイルの左右の余白を変更しても効果はありませんでした。
編集: http://www.browserstack.com/を使用して、画面に問題が表示されないため、さまざまなブラウザー バージョンをテストしています。
HTML:
//if browser is IE, displays IE specific navbar
if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
{include('navbarIE.php');}
//if browser is anything else, include original navbar file
else
include('navbar.php');
?>
<!--formatting and style-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Daiko Construction Remodeling</title>
<style type="text/css">
div#wrapper
{
position: relative;
margin-left: 0px;
margin-right: 0px;
top: 20px;
width: 866px;
}
</style>
</head>
<body>
<br/>
<div id="wrapper">
<p>For your conveniece, we have listed just a few of the projects that we most commonly undertake.
If there is a specific service that you require and it is not listed below,
please <a style="color: white;" href="contactus.php">contact us</a> for more information. Additionally,
we offer FREE estimates for our services. While larger projects may require us to do an on-site
evaluation and no two projects are exactly alike, we request that you send us a short email with
an inquiry or any question you might have.
<br><br>
</span>
<ul>
<li>Window and door installation (European and Domestic)</li>
<li>General and central HVAC, A/C, heating</li>
<li>Remodelling of:</li>
<ul>
<li>kitchens</li>
<li>bathrooms</li>
<li>bedrooms</li>
<li>basements</li>
<li>etc.</li>
</ul>
<li>Flooring (wood and tile)</li>
<li>House additions</li>
<li>Lighting and electrical work</li>
<li>Plumbing<br></li>
<li>Regular handyman work</li>
<li>And many others</li>
</ul>
<br>
</div>
</div>
</div>
</form>
<?PHP
include('footer.php');
?>
</body>
</html>
ここにCSSがあります：
body
{
font-family: "Vijaya", "Andalus", Serif;
font-size: 20px;
color: white;
margin-left: 250px;
margin-right: 250px;
}
ul.jsddm
{
margin: 0;
padding: 0;
position: relative;
line-height: 2.0em;
}
ul.jsddm a
{
color: #000000;
background-color: #F5DEB3;
border: 1px solid #444;
display: block;
text-decoration: none;
text-align: center;
width: auto;
height: 32px;
}
ul.jsddm a:hover
{
color: #000;
background-color: #FFF;
height: 32px;
}
ul.jsddm > li
{
position: relative;
float: left;
list-style: none;
width: 20%;
}