Выравнивание Div в Firefox не работает; Работает в Chrome, IE и Safari

У меня есть веб-сайт, над которым я работаю, и я уверен, что это нечто очевидное, что я упускаю из виду.

Моя основная проблема и почему я здесь: моя страница отлично выглядит в Chrome и Safari, но FF v.21 (Mac) берет слои textcont и linkcont и помещает их вправо, за пределы контейнера, который у меня есть для их. Я знаю, что они плавают, но я не могу заставить их правильно отображаться там.

*EDIT: 6-18 @ 1p--*Я решил другую проблему, но Firefox по-прежнему размещает два внутренних контейнера СНАРУЖИ основного контейнера содержимого.

*EDIT: 6-20 @ 9:45a--*Я обнаружил, что если добавить «Позиция: абсолютная;» к #contentbox, все, казалось, работало в Chrome, Safari и Firefox (в настоящее время не могу проверить это в IE), НО мой div #copybox (последний слой, который отображает год с копирайтом в самом низу) будет выравниваться поверх #contentbox вверху. Я попытался использовать абсолютную позицию в этом div, но просто сделал ее видимой, а относительная сделала ее скрытой, но все же наверху, где ее быть не должно. Любые идеи? Если я смогу получить абсолютное позиционирование для работы с контентом, мне просто нужно исправить, чтобы #copybox оставался после конца слоя #contentbox.

Скриншот Firefox: http://i41.tinypic.com/20t0xh0.png

Chrome/Safari (правильно): 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>

person Brianne    schedule 17.06.2013    source источник


Ответы (1)


#contentbox {
    overflow: hidden;
}

... исправит вашу проблему.

У вас есть неочищенный поплавок, и переполнение: скрытый очистит его. Подробнее о контексте форматирования блока (применяется странный скрытый нюанс CSS, который применяется overflow: hidden) здесь.

person thanexor    schedule 20.06.2013
comment
Это устранило проблему с выравниванием, но теперь между контейнерами заголовка/меню и самим полем содержимого есть разрыв. - person Brianne; 20.06.2013
comment
Пространство, которое вы видите, на самом деле из другого необработанного поплавка. LI внутри #menu ul являются плавающими и нуждаются в очистке, поэтому: #menu ul { overflow: hidden; } Должно сработать. Любой контейнер с плавающими дочерними элементами должен получить переполнение скрытого или clearfix. - person thanexor; 20.06.2013
comment
Благодарю вас! Это сделало трюк! Добавлено переполнение: скрыто в меню и контейнере и решена эта проблема во всех браузерах. Спасибо за вашу помощь, и я извиняюсь, если я потратил ваше время на такой простой ответ! хаха. Я все еще учусь делать полные макеты CSS; Я выучил старые вещи. - person Brianne; 20.06.2013