firefox не хочет делать элементы inline

Hyperbread · October 13, 2012

Здравствуйте!

Проблема следующая.

Я пытаюсь сделать менюшку, для этого я использовал некий скрипт MenuMatic с просторов интернета. В этом скрипте меню лежит в контейнере ul, а его элементы в элементах списка li.

Нужно, чтобы при сжатии страницы кнопки меню не переносились в строке. Для этого контейнеру я дал свойство white-space:nowrap, а элементам li, и ссылкам в них пытаюсь присвоить свойство display:inline;

В хромиуме все работает как надо.

А в файрфоксе меню продолжает переноситься. Причем, если я смотрю свойства объектов через инспектор, я вижу, что у элемента стиль отображения по прежнему block. Я пытался вводить стиль inline даже вручную в этом инспекторе, но он по прежнему трактует его как block. В этом, видимо, и причина того, что элементы переносятся.

Как это можно было бы исправить?

CSS

/* all menu links */
#nav a, #subMenusContainer a{
text-decoration:none;
padding:10px 20px;
background-color:#fff ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
opacity: 0.8;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
margin:0;
float:left;
}
/* Just sub menu links */
#subMenusContainer a, #nav li li a{
text-align:left;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color:#2e1a0f;
color:#FFF;
opacity: 0.8;
}
/* —-[ OLs ULs, LIs, and DIVs ]—-*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
}
/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#2e1a0f;
left:0;
opacity: 0.8;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
#nav li {
/*great place to use a background image as a divider*/
list-style:none;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
}
/* main menu ul or ol elment */
#nav{
position: absolute;
list-style:none;
margin:0 0 0 0;
z-index:5;
top:400px;
text-align: center;
}
a.nwrap li.nwrap {
display: inline;
white-space:nowrap;
overflow:hidden;
}
#nav {
white-space:nowrap;
}
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* ————————--[ The below is just for non-javscript users ]————————--*/
#nav li li{ float:none; }
#nav li li a{ /* Just submenu links*/
position:relative;
float:none;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
#nav li:hover ul{ margin-left: 0; }
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }

HTML

<html>
<head>
<meta charset="utf-8">
<title>SOUS CHARME DE PARIS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="basic.css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script src="js/MenuMatic_0.68.3-source.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="screen" charset="utf-8" />

</head>
<body>
<div class="gal">

<div class="navigation-container ">
<div id="thumbs" >
<ul class="thumbs noscript">
<li>
<a class="thumb" href="pic/luvr.jpg" ></a>
</li>
<li>
<a class="thumb" href="pic/elf.jpg" ></a>
</li>
<li>
<a class="thumb" href="pic/most.jpg"></a>
</li>
</ul>
</div>
</div>
<div class="content" id="content">
<div class="slideshow-container">
<div id="slideshow" class="slideshow"></div>
</div>
</div>

</div>

<ul id="nav">
<li class="nwrap"><a href="index.html">Добро Пожаловать</a></li>
<li class="nwrap"><a class="nwrap" href="#">О нас</a></li>
<li><a href="#">Услуги и цены</a>
<ul>
<li><a href="#">Трансфер в аэропорт</a></li>
<li><a href="#">Частная поездка</a></li>
</ul>
<li class="nwrap"><a class="nwrap" href="#">Транспортные средства</a>
<ul>
<li><a href="#">Эконом</a></li>
<li><a href="#">VIP</a></li>
<li><a href="#">LUX</a></li>
</ul>
<li class="nwrap"><a class="nwrap" href="#">Бронирование</a>
</ul>
<div id="contactFormArea">
<form action="./" method="post" id="cForm">
<input type="hidden" name="act" value="y" />
<fieldset>
<label for="posName"><b>Ваше имя:</b></label>
<input class="text" type="text" size="25" name="posName" id="posName" /><br>
<label for="posEmail"><b>Ваш E-mail адрес:</b></label>
<input class="text" type="text" size="25" name="posEmail" id="posEmail" /><br>
<label for="posRegard"><b>Тема сообщения:</b></label>
<input class="text" type="text" size="25" name="posRegard" id="posRegard" /><br>
<label for="posText"><b>Сообщение:</b></label>
<textarea cols="50" rows="20" name="posText" id="posText"></textarea><br>
<label for="posCaptcha"><center><b>Текст на изображении (цифры)</b>:</label><a href='readme.html'><img src="kcaptcha?<?php echo session_name()?>=<?php echo session_id()?>" border=0></a></center><input class="text" type="text" size="25" name="keystring" id="keystring" />
<br><br><label><input class="submit" type="submit" name="selfCC" id="selfCC" value=" Отправить " /></label>
</fieldset>
<?php include 'kcaptcha/kcaptcha_rand.php' ?>
</form>
</div>
<script type="text/javascript">
document.getElementById("content").style.left = (self.innerWidth - 1000) / 2;
document.getElementById("nav").style.left = (self.innerWidth - document.getElementById("nav").clientWidth) / 2;
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
//$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 10,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: true,
syncTransitions: true,
defaultTransitionDuration: 2200,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
$('body,html').animate({
scrollTop: $(".advance-link").children('img').offset().top
}, 500);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
// Show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
$('body,html').animate({
scrollTop: $(".advance-link").children('img').offset().top
}, 500);
}
});
/**************** Event handlers for custom next / prev page links **********************/
/****************************************************************************************/
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");
// set onlick event for buttons using the jQuery 1.3 live method
/****************************************************************************************/
});
</script>

<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic();
});
</script>
</body>
</html>

Я проверил, только с этими двумя файлами проблема воспроизводится. Это, конечно, много, но если вы посмотрите код, буду признателен.

ils · October 13, 2012

Вместо display:inline; пишите float:left;

lexxcode · October 13, 2012

Потому, что плавающие элементы не могут быть inline, если есть float:left|right;, то display станет block сам по себе

Hyperbread · October 14, 2012

Потому, что плавающие элементы не могут быть inline, если есть float:left|right;, то display станет block сам по себе

Спасибо!

Я поудалял везде float:left, блоки перестали переносится.

Что логично, блоки перестали слипаться. Размеры нигде явно не заданы, и между блоками появилось расстояние.

Подскажите пожалуйста правильный способ это исправить, не сломав то, что блоки не переносятся?

lexxcode · October 14, 2012

Обсуждалось и объяснялось не один раз

Hyperbread · October 14, 2012

Обсуждалось и объяснялось не один раз

Спасибо!

Sign In

firefox не хочет делать элементы inline

Question

Hyperbread

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

ils

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Hyperbread

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Hyperbread

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information