そのため、サファリでマージンの問題が発生しているため、デバッグしているように見えます。Firefox、Chromなどではすべて正常に動作しますが、サファリでは動作しません。コンテンツ div をヘッダーのすぐ下に配置しましたが、Safari ではコンテンツ div がヘッダーと重なっています。IOW、コンテンツ div を置き換えてヘッダーの下にフラッシュしなくても、サファリがそれを読み取る方法には明らかな矛盾があります。これらのマージンの問題を調整する方法を見つけるのを手伝ってくれる人はいますか? 私は完全に独学なので、コードは粗末だと確信しています。
html は次のとおりです。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>On Tapa The World | Welcome!</title>
<link rel="stylesheet" type="text/css" href="about_debug.css"/>
<link href='http://fonts.googleapis.com/css?family=Allura|Squada One|Arial' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="navMenu">
<ul>
<li>Home</li>
<li>Locations/Schedule</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<!--end navMenu div -->
<div class="contentBackground"><a href="http://twitter.com/ontapatheworld" target="_blank"><div id="icons_twitter"></div></a><!--end twitter div --><a href="http://facebook.com/ontapatheworld" target="_blank"><div id="icons_facebook"></div></a><!--end facebook div --><div class="content"><h2>Get to Know Us</h2>
<div id="menuContentLeft"><h3>What are Tapas?</h3>
<p>Tapas are a wonderful tradition that originated in Spain and dates back several hundred years. The word tapa is derived from the Spanish word tapar which means "to cover". It is said that this tradition began in taverns in old Spain when patrons were served wine or sherry along with slices of bread or salty meats such as ham or chorizo. The patrons would cover their drinks with these snacks between sips to keep the fruit flies out. The salty meats were meant to make the consumers thirsty in order to increase alcohol sales. The tavern owners began developing a variety of small snacks or tapas to serve the patrons to cover their drinks.</p>
<p>As time has passed, tapas have evolved into an important part of Spanish cuisine and culture. They are now served in bars across Spain as well as in many other countries and incorporate flavors and influences from around the world. Tapas today are typically small portioned and are meant to be shared. It is common for patrons to order several plates at a time. These great culinary creations are always accompanied with a friendly, inviting and magical atmosphere that we hope you find here On Tapa The World!</p>
</div>
<div id="aboutVerticalBar"></div><!-- end verticalBar div -->
<div id="menuContentRight">
<h3>Who Are We?</h3>
<p>Matthew and Brant have always shared a common appreciation and passion for food. This inspired them to always be on the look out for new tastes and experiences around the country. In doing so, the two discovered and fell in love with the very unique concept of tapas. They agreed that the great food, fun atmosphere, good music as well as the overall enchanting and intimate experience that all tapas restaurants provided proved to be unmatched. These common themes became the reasons that these places became some of their favorite establishments.</p>
<p>Along their way, Brant and Matthew made another unique discovery. They encountered the pleasant food and delightful ambiance created by food trucks. It was after attending several food truck parks, numerous special events featuring food trucks and being impressed with the food as well as the atmosphere there that the duo developed the idea to marry the two concepts. Piecing together the puzzle with their combined restaurant experience, Matthew's culinary and hospitality background and Brant's extensive business education it all became a clear and easy decision. Combining Spain's beautiful tradition with flavors from around the globe and bringing them to the streets in true hip food truck fashion puts you On Tapa The World!</p>
</div>
<br /><br />
</div><!--end content div -->
<br />
</div><!--end contentBackground div -->
</div>
</body>
</html>
そして今CSS：
/* CSS Document */
body {
background-color:#000;
font-family: 'Allura', cursive;
font-size: 36px;
color: #FFF;
margin: 0px;
}
a {
text-decoration:none;
color:#FFF;
padding-left:3px;
padding-right:3px;
margin-left: 31px;
}
ul {
list-style:none;
margin-top:0px;
padding: 0px;
position:relative;
text-align: center;
}
li {
display: inline;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
}
a:hover {
color:#C61010;
padding-left:3px;
padding-right:3px;
margin-left: 31px;
}
p {
text-indent: 35px;
/*float:left;*/
font-family: 'Arial', cursive;
font-size: 16px;
line-height: 1.25;
}
img {
border: none;
}
h2 {
font-size: 42px;
color: #fff;
text-align:center;
margin-left: 86px;
}
h3 {
font-size: 36px;
color: #fff;
text-align:center;
font-family: 'Allura', cursive;
margin:0px;
}
h4 {
font-size: 24px;
color: #fff;
font-family: 'Allura', cursive;
margin:0px;
}
#calendarMargin {
margin-top: 0px;
margin-left: 140px;
height: 600px;
width: 800px;
}
.footerFrames {
margin-right: auto;
margin-left: auto;
height: 346px;
width: 1100px;
}
.contentBackground {
background-image: url(logo_vignette.png);
height: 450px;
width: 1200px;
margin-right: auto;
margin-left: auto;
}
.content {
background-image:url(images/contentOverlay.png);
background-repeat:repeat;
height: 720px;
width: 1080px;
margin-right: auto;
margin-left: auto;
margin-top: -46px;
margin-bottom: 27px;
display: block;
}
.menuContent {
background-image:url(images/contentOverlay.png);
background-repeat:repeat;
height: 945px;
width: 1080px;
margin-right: auto;
margin-left: auto;
margin-top: -46px;
margin-bottom: 27px;
}
.aboutContent {
background-image:url(images/contentOverlay.png);
background-repeat:repeat;
height: 600px;
width: 1080px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 27px;
display: block;
position:relative;
}
#navMenu {
border-top: 4px double #FFF;
border-bottom: 4px double #FFF;
margin-top:16px;
margin-left:auto;
margin-right:auto;
background-repeat:no-repeat;
width: 900px;
height: 30px;
padding-bottom: 12px;
}
/*#icons {
margin-right: auto;
margin-left: auto;
padding: 0px;
height: 51px;
width: 1088px;
}*/
#icons_twitter {
background-image:url(icons_twitter.png);
margin-right: 60px;
margin-top: 10px;
height:50px;
width:47px;
float:right;
position:relative;
z-index:1000;
}
#icons_facebook {
background-image:url(icons_facebook.png);
margin-right: 3px;
margin-top: 10px;
height:51px;
width:47px;
float:right;
position:relative;
z-index:1000;
}
#icons_twitter:hover {
background-image:url(icons_twitterHover.png);
background-repeat:no-repeat;
margin-right: 60px;
margin-top: 10px;
height:50px;
width:47px;
float:right;
position:relative;
z-index:1000;
}
#icons_facebook:hover {
background-image:url(icons_facebookHover.png);
background-repeat:no-repeat;
margin-right: 3px;
margin-top: 10px;
height:50px;
width:47px;
float:right;
position:relative;
z-index:1000;
}
#tagline {
text-align: center;
font-size: 20px;
font-family: 'Squada One', cursive;
height: 115px;
width: 305px;
line-height: 40px;
margin-top: 238px;
margin-left: 206px;
text-shadow: 8px 8px 8px #000;
}
#twitterWidget {
margin-top: 30px;
height:346px;
width:520px;
}
#slider {
margin-left: 575px;
margin-top: -346px;
padding: 0px;
}
#aboutContentLeft {
font-family: 'Arial', cursive;
font-size: 14px;
line-height: 1.5;
height: 399px;
width: 399px;
margin-left:86px;
float: left;
}
#aboutVerticalBar {
border-left: 6px double #fff;
width: 20px;
height: 480px;
float: left;
margin-left: 15px;
margin-right: 15px;
}
#aboutContentRight {
height: 399px;
width: 399px;
margin-left:50px;
float: left;
}
#menuContentLeft {
font-family: 'Arial', cursive;
font-size: 14px;
line-height: 1.5;
width: 495px;
float:left;
margin-left:20px;
}
#menuVerticalBar {
border-left: 6px double #fff;
width: 20px;
height: 724px;
float: left;
margin-left: 15px;
margin-right: 15px;
}
#menuContentRight {
font-family: 'Arial', cursive;
font-size: 14px;
line-height: 1.5;
width: 495px;
float:left;
}
#menuHorizontalBar {
border-top: 4px double #fff;
margin-right: auto;
margin-left: auto;
width: 248px;
margin-top: 20px;
margin-bottom: 20px;
}
#menuBottomHorizontalBar {
border-top: 4px double #fff;
margin-right: auto;
margin-left: 406px;
width: 248px;
margin-top: 654px;
margin-bottom: 20px;
}
#dessert {
font-family: 'Arial', cursive;
font-size: 14px;
width: 432px;
margin-right:auto;
margin-left: 340px;
position: relative;
}
#contact {
text-align:center;
font-family: 'Arial', cursive;
font-size: 24px;
}
#form {
color:#fff;
font-size:18px;
font-family: 'Arial', cursive;
}
#bottomHorizontalBar {
border-bottom: 4px double #fff;
margin-right: auto;
margin-left: 406px;
width: 248px;
margin-bottom: 20px;
}
これについては、すぐにご相談いただければ幸いです。ありがとう！