Firefox Div 정렬이 작동하지 않습니다. Chrome, Internet Explorer 및 Safari에서 작동

나는 현재 작업하고있는 웹 사이트를 가지고 있으며 여기에서 간과하는 것이 명백한 것이 분명합니다.Firefox Div 정렬이 작동하지 않습니다. Chrome, Internet Explorer 및 Safari에서 작동

내 주요 문제 및 그 이유 : 내 페이지는 Chrome 및 Safari에서 훌륭하게 보이지만 FF v.21 (Mac)은 textcont 및 linkcont 레이어를 사용하여 오른쪽의 바깥쪽에 있습니다. 내가 그들을 위해 가지고있는 컨테이너. 나는 그들이 떠있는 것을 알고 있지만, 나는 그곳에서 올바르게 보여줄 수 없다.

* 편집 : 6-18 @ 1p- * 다른 문제가 해결되었지만 Firefox는 여전히 주 콘텐츠 컨테이너 외부에 두 개의 내부 컨테이너를 넣고 있습니다.

* 편집 : 6-20 @ 9 : 45a-- * "Position : absolute;"를 추가하면 #contentbox에 모든 것이 Chrome, Safari 및 Firefox (현재 IE에서 테스트 할 수 없음)에서 작동하는 것처럼 보였지만 내 #copybox div (저작권이 가장 아래에있는 연도를 표시하는 마지막 레이어)는 상단의 #contentbox 나는 그 div에 절대 위치를 사용하려고 시도했지만, 단지 그것을 보이게 만들었고, 친척은 그것을 숨김으로 만들었지 만, 그렇게해서는 안된다. 어떤 아이디어? 콘텐츠에서 작업 할 수있는 절대 위치를 얻을 수 있다면 #contentbox 레이어 끝 부분에 #copybox를 유지하는 수정이 필요합니다.

파이어 폭스 스크린 샷 : http://i41.tinypic.com/20t0xh0.png

크롬/사파리 (올바른) : http://i40.tinypic.com/a4y1ar.png

스타일 코드 :

@charset "UTF-8"; 
/* CSS Document */ 

body { 
background-color: #FAD434; 
font-family: Helvetica, arial, sans-serif; 
font-size: 14px; 
} 

#container { 
width: 100%; 
padding: 0px; 
margin: 0 auto; 
} 

#headercont { 
width: 900px; 
margin: 0 auto; 
} 

#header { 
width: 100%; 
height: 65px; 
margin: 0 auto; 
background-color: #000000; 
background-image:url(img/logo.png); 
background-repeat: no-repeat; 
background-position: left; 
border-bottom: 2px solid #fad434; 
} 

#picheader { 
height: 360px; 
background-image:url(img/NHYC_BoySmile.jpg); 
background-repeat: no-repeat; 
background-position: top center; 
} 

#contentbox { 
width: 100%; 
background-image: url(img/content_bkgd.jpg); 
background-position: bottom center; 
background-repeat: repeat-x; 
background-color: #ffffff; 
margin-top: 0px; 
padding-bottom: 50px; 
} 

#contentcont { 
width: 900px; 
margin: 0 auto; 
overflow: auto; 
} 


#textcont { 
width: 70%; 
padding: 0px 0px 25px 10px; 
float: left; 
} 

#linkcont{ 
width: 25%; 
padding-top: 63px; 
padding-right: 10px; 
padding-left: 10px; 
float: right; 
} 

#copybox { 
width: 100%; 
font-size: 10px; 
text-align: center; 
padding: 15px; 
} 

/* --- HEADER TEXT --- */ 

h1 { 
font-size: 40pt; 
color: #f28c3d; 
border-bottom: 2px solid #FAD434; 
text-transform: uppercase; 
} 

h2 { 
font-size: 24 pt; 
color: #f28c3d; 
border-bottom: 2px solid #FAD434; 
    text-transform: uppercase; 
} 

h3 { 
font-size: 18 pt; 
color: #f28c3d; 
border-bottom: 2px solid #FAD434; 
    text-transform: uppercase; 
} 

/* --- LINK LIST --- */ 
.links li { 
list-style-type:none; 
line-height: 20pt; 
} 


/* --- MENU --- */ 
#menu { 
width: 100%; 
margin: 0 auto; 
padding-top: 325px; 
} 

#menu ul, #menu ul ul { 
list-style-type: none; 
padding: 0; 
margin: 0 auto; 
} 

#menu ul li{ 
padding: 10px 25px; 
position: relative; 
float: left; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
text-transform: uppercase; 
} 

#menu ul a:link, #menu ul a:visited{ 
display: inline-block; 
color: #ffffff; 
width: 90px; 
padding: 5px; 
text-decoration: none; 
font-size: 12px; 
font-weight: bold; 
text-align: center; 
} 

#menu ul a:hover, #menu ul a:active { 
background: #f28c3d; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
}

Index.php는 코드 :

<!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>NHYC - Ohio</title> 
<link href="nhyc_styles.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div id="container"> 
    <div id="headercont"> 
     <div id="header"> 
      <p align="right"><img src="img/socialmedia_icons.png" alt="Social Media" border="0" usemap="#socialmedia" style="padding-right:15px; padding-top: 18px;"/> 
      <map name="socialmedia" id="socialmedia"> 
       <area shape="rect" coords="2,4,27,25" href="#" target="_blank" alt="Facebook" /> 
       <area shape="rect" coords="42,4,69,24" href="#" target="_blank" alt="Twitter" /> 
      </map> 
      </p> 
     </div> <!--End of header--> 
     <div id="picheader"> 
      <div id="menu"> 
       <ul> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Mission</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Admission</a></li> 
        <li><a href="#">Employment</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
      <!--End of navigation--> 
     </div> <!--End of picheader--> 
    </div> <!--End of headercont--> 
    <div id="contentbox"> 
     <div id="contentcont"> 
      <div id="textcont"> 
       <?php 
        if (!isset($_REQUEST['topic'])) 
         include("aboutus.php"); 
        else 
        { 
         $topic = $_REQUEST['topic']; 
         $nextpage = $topic . ".php"; 
         include($nextpage); 
        } ?> 
      </div><!--End of textcont--> 
      <div id="linkcont"> 
       <h3>Resources</h3> 
       <ul class="links"> 
       <li>Link #1</li> 
       <li>Link #2</li> 
       <li>Link #3</li>      
       <li>Link #4</li> 
       </ul> 
      </div> <!--End of linkcont--> 
     </div> 
    </div> <!--End of contentbox--> 
</div> <!--End of container--> 
    <div id="copybox"> 
     2013 &copy; NHYC 
    </div> <!--End of copybox --> 
</body> 
</html>

출처

2013-06-17 Brianne

#contentbox { 
    overflow: hidden; 
}

... 문제를 해결할 것입니다.

플로트가 비어 있고 오버플로 : 숨김으로 선택이 취소됩니다. 블록 서식 지정 컨텍스트 (overflow : hidden가 적용되는 이상한 숨겨진 CSS 뉘앙스) here에 대해 자세히 알아보십시오.

출처

2013-06-20 16:42:37 thanexor

정렬 문제가 해결되었지만 이제는 머리글/메뉴 컨테이너와 내용 상자 자체 사이에 간격이 있습니다. – Brianne

보고있는 공간은 실제로 다른 깨끗하지 않은 플로트의 공간입니다. #menu ul 내의 LI는 플로팅되어 있으므로 다음과 같이 명확해야합니다. #menu ul { 오버플로 : 숨김; } 작동해야합니다. 플로팅 된 자식 요소가있는 컨테이너는 숨김 또는 [clearfix] (http://www.webtoolkit.info/css-clearfix.html)의 오버플로를 가져야합니다. – thanexor

고마워요! 그 트릭을 했어! 오버 플로우 : 숨김을 메뉴 및 컨테이너에 추가하고 모든 브라우저에서 해당 문제를 해결했습니다. 도움을 주셔서 감사합니다. 간단한 답변으로 시간을 낭비한다면 사과드립니다! 하하. 나는 여전히 완전한 CSS 레이아웃을 배우고있다. 나는 오래된 것들을 배웠다. – Brianne

Firefox Div 정렬이 작동하지 않습니다. Chrome, Internet Explorer 및 Safari에서 작동

답변

관련 문제