Firefox добавляет дополнительное дополнение к меню css

У меня есть меню CSS, которое отображается правильно как в IE 8, так и в Chrome. Однако в firefox добавляется дополнительное дополнение, которое помещает последний пункт меню в следующую строку.Firefox добавляет дополнительное дополнение к меню css

Может ли кто-нибудь взглянуть на нижеследующее и рассказать мне, как его исправить.

CSS НИЖЕ:

#wrap { 
    width: 920px; 
    margin: 0 auto; 
} 

#cssmenu{ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif; 
    font-size:10px; 
    font-weight:bold; 
    } 
#cssmenu ul{ 
    background:#333333; 
    height:37px; 
    list-style:none; 
    margin:0; 
    padding:0; 
    border-bottom: 3px solid #2580a2; 
    } 
#cssmenu li{ 
    float:left; 
    padding:0px; 

    } 
#cssmenu li a{ 
    background:#333333 url('images/seperator.gif') bottom right no-repeat; 
    color:#cccccc; 
    display:block; 
    font-weight:normal; 
    line-height:37px; 
    margin:0px; 
    padding:0px 22px; 
    text-align:center; 
    text-decoration:none; 
    } 



#cssmenu li a:hover, #cssmenu ul li:hover a{ 
    background: #2580a2; 
    color:#FFFFFF; 
    text-decoration:none; 
    } 
#cssmenu li ul{ 
    background:#333333; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:225px; 
    z-index:200; 
    /*top:1em; 
    /*left:0;*/ 
    } 
#cssmenu li:hover ul{ 
    display:block; 

    } 
#cssmenu li li { 
    background:url('images/sub_sep.gif') bottom left no-repeat; 
    display:block; 
    float:none; 
    margin:0px; 
    padding:0px; 
    width:225px; 
    } 
#cssmenu li:hover li a{ 
    background:none; 

    } 
#cssmenu li ul a{ 
    display:block; 
    height:35px; 
    font-size:10px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
    } 
#cssmenu li ul a:hover, #cssmenu li ul li:hover a{ 
    background:#2580a2 url('images/hover_sub.gif') center left no-repeat; 
    border:0px; 
    color:#ffffff; 
    text-decoration:none; 
    } 
#cssmenu p{ 
    clear:left; 
    }

HTML ниже:

<html> 
<head> 
<link href="menu_assets/styles.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div id="wrap"> 
<div id='cssmenu'> 
<ul> 
    <li><a href='index.html'><span>HOME</span></a></li> 
    <li class='has-sub'><a href='#'><span>OPERATIONS</span></a> 
     <ul> 
     <li><a href='#'><span>Product 1</span></a></li> 
     <li class='last'><a href='#'><span>Product 2</span></a></li> 
     </ul> 
    </li> 
    <li><a href='#'><span>AIRWORTHINESS</span></a></li> 
    <li><a href='#'><span>REGULATIONS AND POLICY</span></a></li> 
    <li><a href='#'><span>MANUALS AND FORMS</span></a></li> 
    <li><a href='#'><span>EDUCATION</span></a></li> 
    <li><a href='#'><span>ABOUT CASA</span></a></li> 
    <li id='cssmenulast'><a href='#'><span>SERVICES</span></a></li> 
</ul> 
</div> 
</div> 
</body> 
</html>

источник

2013-03-12 sephiith

Можете ли вы настроить демо код на JSFiddle .сеть ? вы можете поместить свой html и css и сохранить его как ссылку, которую вы можете вставить здесь. –

Здесь вы идете: http://jsfiddle.net/EHcZb/ – sephiith

какая у вас есть ** ff ** у вас есть? – jhunlio

Теперь используется для display:inline-block; и удалитьfloat left в вашем литий

, как как этот

#cssmenu ul{ 
white-space:nowrap; // add this line 
font-size:0; // add this line 
} 

#cssmenu li{ 
float:left; // remove this line 
display:inline-block; // add this line 
vertical-align:top; // add this line 
font-size:10px; 
padding:0px; 
}

Live Demo

источник

2013-03-12 04:08:04

У меня была такая же проблема и размер шрифта: 0; сделал трюк. – noun

Вы пробовали настройки padding-start:0px

#container { 
-moz-padding-start: 0px; // firefox 
-webkit-padding-start: 0px; // safari 
padding-left: 0px;   // chrome 
}

padding-start автоматически применяется к <li> элемент.

Mozilla Документы для padding-start: https://developer.mozilla.org/en-US/docs/CSS/-moz-padding-start

Больше ресурсов на WebKit-дополнения (также включая WebKit рентабельностью не включая FF): http://www.css-101.org/articles/base-styles-sheet-for-webkit-based-browsers/index.php

источник

2013-03-12 03:05:51

Я добавил это изменение, и он ничего не сделал. – sephiith

Вы пробовали применить к '#container ul {}'. извините не смог испытать для вас. не может получить визуальное представление о том, что происходит с моего компьютера. вы можете сделать снимок экрана. –

Вы могли бы использовать display: table для этого. Имеет преимущество 100% ширины и может быть уменьшено для меньших разрешений.

#cssmenu ul 
{ 
    display: table; 
    width: 100%; 
} 

#cssmenu li 
{ 
    display: table-cell; 
    float: none; 
} 

#cssmenu li a 
{ 
    padding: 0; /* use something like "0 10px" for more homogenous widths */ 
}

Теперь вы можете регулировать ширину пунктов, играя с padding из #cssmenu li a. Для примера см. Это Fiddle.

источник

2013-03-12 03:51:37

Firefox добавляет дополнительное дополнение к меню css

ответ

Смежные вопросы