Question

При дальнейших исследованиях я обнаружил, что в моем CSS есть что-то, что делает мой навигационный экран забавным -> Все на моей внутренней странице и HTML ниже (главная страница) загружаются нормально, но навигация меня все еще сводит с ума, поэтому язагрузил мой полный html и css для решения этой проблемы,

HTML:

<div id="container"> 

<header> 
                <h1>company</h1> 
                <div id="logo"><a href="http://company.co.nz/">Home</a></div> 

<section id="sales"> 
        <p></p> 

</section> 

<section id="searchBox"> 

    <form id="searchBoxForm"> 
        <fieldset> 
                <input type="text" name="search" id="search" placeholder="Search Here" /> 
                <input class="submit" type="submit" name="submit" id="submit" value="Search" /> 
        </fieldset> 

    </form> 

</section> 

</header><!-- Header End --> 

<nav id="mainMenu"> 
        <ul> 
        <li><a href="#">Nav 1</a> 
        <ul><!--Sub Menu Hosting --> 
                <li><a href="#">Drop Down 1</a></li> 
        </ul><!-- Sub Menu Hosting Ends --> 
        </li> 
        <li><a href="#">Nav 2</a> 
        <ul><!-- Sub Menu Email --> 
                <li><a href="#">I want my own email</a></li> 
        </ul><!-- Sub Menu Email Ends --> 
        </li> 
        <li><a href="#">Nav 3</a> 
        <ul><!-- Sub Menu Support --> 
                <li><a href="#">Need Support?</a></li> 
                </ul><!-- Sub Menu Support Ends --> 
        </li> 
        <li><a href="#">Nav 3</a> 
        <ul><!-- Sub Menu About --> 
                <li><a href="#">About</a></li> 
        </ul><!-- Sub Menu About Ends --> 
        </li> 
        <li><a class="signup" href="#">SIGN UP</a></li> 
        </ul> 
</nav><!-- Main Menu End --> 

<div id="billboard"> 

    <h1 contenteditable="true">Cloud Hosting </h1> 

    <p>Hosting to take you way above the clouds</p> 

</div> 

<article id="services"> 

<section class="service1"> 
        <h2><a href="#">Plan 1</a></h2> 
        <p>Cloud hosting isn't difficult or expensive. OnApp lets hosts deploy clouds in a day, at very low cost.</p> 
        <p><a href="#" class="bullet">More</a></p> 
</section> 

<section class="service2"> 
        <h2><a href="#">Plan 2</a></h2> 
        <p>OnApp maximizes margins with high density, self-organizing clouds and an intuitive control panel.</p> 
        <p><a href="#" class="bullet">More</a></p> 

</section> 

<section class="service3"> 
        <h2><a href="#">Plan 3</a></h2> 
        <p>No more late-night fixes in the data center. OnApp has automatic failover and multi-layered security. </p> 
        <p><a href="#" class="bullet">More</a></p> 
</section> 

<section class="service4"> 
        <h2><a href="#">MS Exchange</a></h2> 
        <p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p> 
        <p><a href="#" class="bullet">More</a></p> 

</section> 

<section class="service5"> 
        <h2><a href="#">Domains</a></h2> 
        <p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p> 
        <p><a href="#" class="bullet">More</a></p> 
</section> 

</article><!-- Services End --> 

<div id="servicesBanner"> 
    <p>Services: </p> 
</div> 
<ul id="nav-footer"> 
<div id="col">           
</div>
<p>&copy</p> 
</div> <!-- container --> 

        </body> 
</html>

CSS:

body {
    line-height:1;
    font:12px normal helvetica,arial,sans-serif;
    color:gray;
    background:url(includes/images/body-bg.png) 0 0 repeat-x #efefef;
}

ol,ul {
    list-style:none;
}

blockquote,q {
    quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
    content:none;
}

h1 {
    margin-bottom:20px;
    font-size:36px;
    line-height:40px;
    color:#58585a;
    font-weight:700;
}

h2 {
    padding-bottom:9px;
    border-bottom:1px solid #e5e5e5;
    font-size:18px;
    line-height:30px;
    color:#58585a;
    font-weight:700;
    margin:40px 0 10px;
}

h3 {
    margin-bottom:3px;
    font-size:14px;
    line-height:20px;
    color:#58585a;
    font-weight:700;
}

h4 {
    font-size:12px;
    font-weight:700;
    color:#58585a;
    line-height:20px;
}

ol {
    list-style:decimal;
    margin:0 0 20px 16px;
}

strong {
    color:#4a4a4a;
}

.subheading {
    margin-bottom:40px;
    font-size:16px;
    line-height:24px;
}

h1.small {
    font-size:26px;
    line-height:36px;
}

#container {
    width:960px;
    margin:0 auto;
    padding:0 0 40px;
}

pre {
    border-left:2px solid #00afd8;
    background:url(/assets/img/pre-bg.png);
    font-size:12px;
    line-height:20px;
    width:620px;
    overflow:auto;
    overflow-y:hidden;
    margin:0;
    padding:0;
}

code {
    display:block;
    margin:0 0 0 10px;
}

header{
    z-index:100;
    margin-bottom:-30px;
    width:100%;
    height:100px;
}

header h1{
    font-family: 'Springsteel Lig', arial, serif; 

}

h1#logo,#logo a {
    display:block;
    left:0;
    top:30px;
    text-indent:-99999px;
    width:193px;
    height:41px;
    margin:0;
}

/* Main Menu */

#mainMenu{
    height:50px;
    margin:0 0 15px 0px;
    background-color:#6a6a6a;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

#mainMenu ul{
    display:inline;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
}

#mainMenu ul li{
    margin-left:0px;
    width:120px;
    height:56px;
    display:inline;
    position:relative;
}


#mainMenu li a {
    float:left;
    display:block;
    text-decoration:none;
    width:120px;
    height:35px;
    font-size:13px;
    line-height:45px;
    text-align:center;
    color:#fff;
    text-transform:uppercase;
    padding-top:-4px;
    margin:0px;
}

#mainMenu li a:hover, #mainMenu li a:active{
    text-decoration:none;
    background-color:#7a7a7a;
    color:#fff;
    width:120px;
    height:50px;
   -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-topleft:2px;
    -moz-border-radius-topleft:2px;
}

#mainMenu .signup{
    background-color:#69c21c;
    height:50px;
    margin-left:360px;
   -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomright:2px;
}

#mainMenu .signup:hover{
    background-color:#00afd8;
}

/*mainMenu Sub Menu */

#mainMenu ul li ul{

    display:none;
    background-color:#7a7a7a;
}

#mainMenu ul li:hover ul{
    text-transform:none;
    display:block;
    position:absolute;
    width:115px;
    top:50px;
    right:-37px;
}

#mainMenu ul li:hover ul a{
    float:left;
    margin:0 0 0 -35px;
    line-height:35px;
    width:150px;
    height:35px;
    border:none;
    font-size:12px;
    text-align:left;
    text-transform:none;


}

#mainMenu  ul li ul li a:hover{    
    width:152px;
    height:30px;
    font-weight:bold;
    margin-left:-38px;
    line-height:35px;
}

footer{
    clear:both;
    border-top: 1px solid #d3d3d3;
    width:100%;
    height:50px;
}

#sales {
    width:160px;
    height:30px;
    float:right;
    margin-top:-140px;
    margin-right:215px;
}

/*Sales */
#sales p{    
    font-weight:bold;  
    text-align:center;
    line-height:45px;
}

/*Search Bpx */

#searchBox{

    float:right;
    margin-top:-125px;
}
#searchBoxForm{
    margin-top:10px;
}

#searchBoxForm .search {
    font-size: 11px;
    color: #fff;
    padding: 6px;
    border: 1px solid #b8b8b8;
    -moz-border-radius:2px; 
    border-radius:2px
}

#searchBoxForm .submit {
    background-color:#00afd8;
    width: 67px;
    height: 26px;
    border: none;
    color: #fff;
    cursor: pointer;
    -moz-border-radius:2px; 
    border-radius:2px
}
#searchBoxForm .submit:hover,
#searchBoxForm .submit.hover {
    background-color:#00afd8;
}


/* Billboard */

#billboard {
    min-height:240px;
    background:#00afd8;
    font-size:16px;
    line-height:24px;
    color:#fff;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-topright:3px;
    padding:34px 520px 60px 40px;
}
#billboard h1 {
    font-family:arial;
    margin-bottom:20px;
    font-size:36px;
    line-height:40px;
    color:#fff;
}


#billboard a {
    color:#fff;
    text-decoration:underline;
}

#services {
    background-color:#fff;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-bottomright:3px;
    -moz-border-radius-bottomleft:3px;
}

#services a{
    text-decoration:none;
}

#services h2 {
    position:relative;
    border:0;
    background:url(/assets/img/sections/home/services-icons.png) 0 0 no-repeat;
    margin:-40px 0 3px;
    padding:0;
}

#services h2 a {
    display:block;
    color:#58585a;
    padding:94px 0 0;
}

#services .service1 {
    padding-left:20px;
    border-left:0;
}

#services .service2 h2 {
    background-position:-168px 0;
}

#services .service3 h2 {
    background-position:-336px 0;
}

#services .service4 h2 {
    background-position:-504px 0;
}

#services .service5 h2 {
    background-position:-672px 0;
}

#services .service1,.service2,.service3,.service4,.service5{
    float:left;
    background-color:#fff;
    border-left:1px solid #e5e5e5;
    width:154px;
    height:100%;
    padding:0 18px 0 19px;
    margin-bottom:10px;

}

#services img{
    height:100px;
    width:100px;
    margin:0 auto;
}

#servicesBanner{
    clear:both;
    width:100%;
    height:90px;
    margin:15px 0 10px 0;
    min-height:100%;
    background-color:#e0e0e0;
}

#servicesBanner p{
    padding:35px 0 0 8px;
    font-size:18px;
    color:#ccc;
}

/*Nav Content */

.subNavHeading{
    color:#fff;
    padding-top:10px;
    margin:9px 0 15px 45px;
}

/*Inner Page CSS */

#innerPageLeftCol{
    float:right;
    width:220px;
    min-height:100%;
    margin:-10px 0 10px 0;
}

#innerPageContent{
    background-color:#fff;
    float:left;
    width:720px;
    min-height:100%;
    margin-bottom:10px;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-top-left-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-topleft:2px;
}

.boxOne{
    background:url(../images/sidebarBox.png) no-repeat;
    width:220px;
    height:100%;
    min-height:100%;
    margin:10px 0 0 0;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-top-left-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-topleft:2px;
}

.boxOne li{
    margin:5px 0 0 0;
    padding-top:5px;
}

.boxOne a{
    text-decoration: none;
    color:#00afd8;
}

.boxTwo{
    background-color:#fff;
    width:220px;
    height:125px;
    margin:15px 0 0 0;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-top-left-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-topleft:2px;
}

.boxThree{
    background-color:#fff;
    width:220px;
    height:125px;
    margin:15px 0 5px 0;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-top-left-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-topleft:2px;
}

#innerPageContent h1{
    margin:30px;
}

#innerPageContent .innerPageSubHeading{
    display:block;
    font-size:16px;
    margin:30px;
    width:450px;
}

#innerPage .separator{
    margin-top:20px;
    padding-top:20px;
}

#innerPageContent p{
    margin:30px;
}

#innerPageContent img{
    float:right;
    width:175px;
    height:175px;
    margin:30px;
    padding:3px;
}

/*Packages Template */

#packageContainer{
    width:320px;
    list-style:none;
    font-size:14px;
    color:#000;
    margin:0 auto;
}

#packageContainer .leftCol{
    width:35%;
    float:left;
    margin-bottom:10px;
}

#packageContainer .leftCol li{
    height:15px;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

#packageContainer .rightCol{
    width:35%;
    float:left;
    margin-bottom:10px;
}
#packageContainer .rightCol li{
    height:15px;
    text-indent:8px;
    border-bottom:1px solid #ccc;
}

#packageContainer .orderButton{
    float:left;
    margin:0px 20px 20px 65px;
    background:#00afd8;
    font-family:Helvetica,arial,sans-serif;
    font-size:12px;
    color:#fff;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    padding:6px 5px;
}

#innerPageProducts{
    clear:both;
    width:100%;
    height:90px;
    margin:10px 0 10px 0;
    min-height:100%;
    background-color:#e0e0e0;
}

#innerPageProducts p{
    padding:35px 0 0 8px;
    font-size:18px;
    color:#ccc;
}


/*Footer */
#nav-footer{
    margin: 20px 0 0 0;
    padding: 20px 0 20px 20px;
    border-top: 1px solid lightGrey;
    list-style: none;
    font-size: 11px;
}

#nav-footer #col{
        margin: 0 auto;
        display:inline-block;
        width:215px;
}

#nav-footer li{
    margin:10px 0 0 -10px;
    text-align:left;
}

#nav-footer li a{
    text-decoration:none;
}

#nav-footer ul{
    list-style:none;
}

#nav-footer .first{
    text-decoration:none;
    font-weight:bold;
    padding-left:30px;
}

В Chrome * 1009 меню выглядит нормально* но когда я открываю его в Firefox 5, я получаю this почему?

Ответ 1:

Я проверил на другом компьютере в Firefox 3.6 и получил: enter image description here

HTML:

<nav id="mainMenu"> 

    <ul> 
    <li class="first"> 
        <a href="http://domain.co.nz/#">Domains</a> 
        <ul> 
            <li class="first"> 
                <a href="http://domain.co.nz/domains/transfer-my-domain">Transfer my Domain</a> 
            </li> 
            <li class="last"> 
                <a href="http://domain.co.nz/domains/get-a-domain-name">Get A Domain Name</a> 
            </li> 
        </ul> 
    </li> 
</ul> 
<ul> 
    <li class=""> 
        <a href="http://domain.co.nz/#">Hosting</a> 
        <ul> 
            <li class="first"> 
                <a href="http://domain.co.nz/hosting/website-hosting">Website Hosting</a> 
            </li> 
            <li class=""> 
                <a href="http://domain.co.nz/hosting/hosted-crm">Hosted CRM</a> 
            </li> 
            <li class="last"> 
                <a href="http://domain.co.nz/hosting/transfer-to-hostone">Transfer to HostOne</a> 
            </li> 
        </ul> 
    </li> 
</ul> 
<ul> 
    <li class="has_current"> 
        <a href="http://domain.co.nz/#">Email</a> 
        <ul> 
            <li class="first"> 
                <a href="http://domain.co.nz/email/personal-e-mail">Personal E-Mail</a> 
            </li> 
            <li class=""> 
                <a href="http://domain.co.nz/email/business-e">Business Email</a> 
            </li> 
            <li class="last current"> 
                <a href="http://domain.co.nz/email/microsoft-hosted-exchange">Microsoft Hosted Exchange</a> 
            </li> 
        </ul> 
    </li> 
</ul> 
<ul> 
    <li class=""> 
        <a href="http://domain.co.nz/support">Support</a> 
    </li> 
</ul> 
<ul> 
    <li class="signup last"> 
        <a href="http://domain.co.nz">SIGN UP</a> 
    </li> 
</ul> 

</nav><!-- Main Menu End -->

CSS:

#mainMenu{
    height:50px;
    margin:0 0 15px 0px;
    background-color:#6a6a6a;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

#mainMenu ul{
    display:inline;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
}

#mainMenu ul li{
    margin-left:0px;
    width:120px;
    height:56px;
    display:inline;
    position:relative;
}


#mainMenu li a {
    float:left;
    display:block;
    text-decoration:none;
    width:120px;
    height:35px;
    font-size:13px;
    line-height:45px;
    text-align:center;
    color:#fff;
    text-transform:uppercase;
    padding-top:-4px;
    margin:0px;
}

#mainMenu li a:hover, #mainMenu li a:active{
    text-decoration:none;
    background-color:#7a7a7a;
    color:#fff;
    width:120px;
    height:50px;
   -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-topleft:2px;
    -moz-border-radius-topleft:2px;
}

#mainMenu .signup a{
    background-color:#69c21c;
    height:50px;
    margin-left:360px;
   -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomright:2px;
}

#mainMenu li .signup a:hover{
    background-color:#00afd8;
}

/*mainMenu Sub Menu */

#mainMenu ul li ul{

    display:none;
    background-color:#7a7a7a;
}

#mainMenu ul li:hover ul{
    text-transform:none;
    display:block;
    position:absolute;
    width:135px;
    top:50px;
    right:-55px;
}

#mainMenu ul li:hover ul a{
    float:left;
    margin:0 0 0 -35px;
    line-height:35px;
    width:150px;
    height:35px;
    border:none;
    font-size:12px;
    text-align:left;
    text-transform:none;


}

#mainMenu  ul li ul li a:hover{    
    width:170px;
    height:30px;
    font-weight:bold;
    margin-left:-35px;
    line-height:35px;
}

Aaron Ray · Answer 1 · 10 июля 2011

Хорошо, я не видел точно, что вы видели, но я видел, что это было немного запутано в FF. Я внес некоторые изменения в пару ваших утверждений CSS, и они работали в Chrome и FF. Вот что я сделал:

Изменено "#mainMenu ul li" удалено отображение: встроенное; " добавлено "float: left; list-style: none;"

#mainMenu ul li
{
    margin-left:0px;
    width:120px;
    height:56px;            
    position:relative;
    float: left;
    list-style: none;
}

Добавлено "#mainMenu .signup" с "float: right;"
```
#mainMenu .signup
{
    float: right;
}
```

Удалено "поле слева: 360px;" из "#mainMenu .signup a"

#mainMenu .signup a
{
    background-color:#69c21c;
    height:50px;
   -webkit-border-top-right-radius:2px;
   -webkit-border-bottom-right-radius:2px;
   -moz-border-radius-topright:2px;
   -moz-border-radius-bottomright:2px;
}

Теперь, поскольку я использую числа с плавающей точкой в вашей навигационной панели, вы, вероятно, захотите поставить прозрачный div после закрывающего тега nav, чтобы очистить числа с плавающей точкой и нормально начать новый div.

<div style="clear: both;">&nbsp;</div>

Кросс-браузерная проблема с отображением

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Кросс-браузерная проблема с отображением

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы