1. 홈
  2. 질의 응답
  3. 여백 문제, Safari

여백 문제, Safari

2013-06-13 6 views
0

그래서 사파리로 여백 문제가 발생하여 디버깅하는 것처럼 보일 수 있습니다. 모든 것이 파이어 폭스, 크롬, 즉 등에서 잘 작동하지만 사파리에서는 작동하지 않습니다. 내 머리글 바로 아래에 내 콘텐츠 div를 배치했지만 사파리에서는 콘텐츠 div가 머리글과 겹치고 있습니다. IOW, 컨텐트 div를 헤더로 대체하지 않아도 사파리가 그것을 읽는 방법에는 여전히 불일치가 있습니다. 이 여백 문제를 조정하는 방법을 찾는 사람을 도와 줄 수 있습니까? 나는 완전히 독학하기 때문에 확실한 코드는 엉망입니다. 지금여백 문제, Safari

<!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; 
}

희망이 곧 당신과 함께이 문제를 논의하기 위해

다음은 HTML입니다! 고맙습니다!

출처

2013-06-13 user2390059

답변

0

스타일 시트 앞에 재설정 CSS 파일을 추가하십시오 (http://meyerweb.com/eric/tools/css/reset/). 이렇게하면 브라우저의 기본 스타일이 없어지고 모든 브라우저에서 일관되게 보이게 만듭니다.

.content div에 margin-top:-46px;이 있는데 위쪽으로 당기고 있습니다.

출처

2013-06-13 13:53:41

+0

분명히 조금 나아졌지만 고맙습니다.하지만 기본적으로 사파리의 콘텐츠는 다른 브라우저의 콘텐츠보다 페이지에서 더 높습니다. 기묘한. – user2390059

관련 문제

 관련 문제