So having a margin problem w/ safari I can seem to debug. Everything works fine in firefox, chrom, ie, etc, but not safari. I've positioned my content div just below my header, but in safari, the content div is overlapping the header. IOW, even if I do not displace the content div to be flush under the header, there is still an obvious discrepancy in how safari is reading it. can anyone help me find out how to reconcile these margin issues? I'm completely self-taught, so the code I'm sure is shoddy.
Here's the 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>
And now the 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;
}
Hope to discuss this with you soon! thank you!