Не работает display none
Вся сложность заключается в том, что display: none; по каким то неведомым причинам отказывается удалять объект из потока. Наш CSS это черный background с прозрачностью и его нужно убрать при загрузке HTML страницы, но display: none; по каким то причинам отказывается работать.
div class="window_relative" id="window_relative"> div class="new_window"> img src="img/cross.png" alt="cross"> /div> /div>
.window_relative { position: fixed; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); display: none; }
Не работает display:none
CSS языком же написано – div#hplogo display: none. Почему он отображается? img#hplogo.
Не работает свойство display
После значения list-item,маркер никак не появляется <!DOCTYPE html> <html> <head> <style.
Не работает display:inline block
Дратути))0) Такая проблема.Не могу понять в чем дело.По справаот картинки должнен быть текст.По.
Неправильно работает display: table
Создал меню с помощью списка и display: inline. С пробелами между элементами решил бороться с.
Forums
Hi hoping for some advice… yesterday i was knee deep in pasting chunks of code to a project i’m on a very tight deadline for.. when i realized at some point the CSS broke down for a bunch of divs that are default set as display:none on the linked stylesheet. coding in vis web developer 2010 express
asp/vb .net 4
DTD XHTML 1.1 Transitional
win7 home prem OS x64 i troubleshot this to the best of my ability but cant find the source of the conflict which is prob something stupid like an unclosed tag or other minute typo that is not caught even at runtime in debug – or not a typo or syntax problem at all, but like just the flow and nature of the cascading style is cancelling out the display:none i’m trying to use, like a conflict of commands?? i’m liening toward the latter being the matter (haha couldn’t resist) if i add a simple class named .hide on the div in html, display none works. if i set display none on a #named div (or group of named divs), not works. Visibility Hidden works on those divs, but not the desired effect with gaping blank placeholder on the page.. project is not published yet so i cant use any online validation tools, tried chrome and firefox web dev tools but they dont seem to be detecting so i’m at a loss.. VWD editor is not detecting any syntax or other errors (debug mode options strict on explicit off inferred on). i see some warnings but none that should solve this issue. i’ve removed all css linked sheets (theres 3) added back 1 at a time
removed blocks of divs from aspx page 1 at a time
pulled all the css off the main sheet and replaced line by line
eyed every line of code best i can looking for the bug, no bug found. so i’m absolutely convinced something in the sequential order of the stylesheet is conflicting and making the display property NONE get overridden… i do briefly see these divs flicker when i refresh the aspx pg -so i think they do hide for a split millisecond then quickly come back. why?? heres the stylesheet giving me headaches for 3 days now. MOD EDIT: Codedump removed: http://codepen.io/anon/pen/tqDKf the very last line with 3 named divs is what is NOT hiding as told, please help?? can u see what i don’t??
@paulie_d you’re right, they don’t..
i expected this to be a difficult question to find an answer for given the complex layout i ended up with… K.I.S.S. method always best right?? 🙂 i’ll try to add to copdepen .. brb
ok sorry. i tried codepen but my project was too much to put in there quickly and i have a tight deadline.. so i tried some more to resolve this. i do think its either an issue on the aspx page or just the order in which i have style proterties set in the linked css page. and i’m pretty sure the LAST css styles on the page gets priority over the FIRST styles, right? so what happens when theres 2 difft styles assigned to the same element both on the linked sheet but set 2 difft ways… which one will win out, in what order? lets try an example of what mean, because i’m about convinced this is what’s happening… html is like this
.inlineRow div #innerDiv .hide
I expect innerDiv to be hidden, but it’s not. so i add the this to innerDiv to test, still not hiding. then i add inline style direct on the innerDiv style=display:none, THAT works. so it seems it just is NOT reading the stylesheet for display:none. I see NO syntax or other quirky errors, and i have now read thru every line 5 times. my editor picks up no errors (and is set to detect them). i know from past experience that glitches with my html on the aspx page will break the stylesheets, but again, nothing detected and i have done enough testing to say that, when that inner div in not in a div with the inline style, it hides using class-hide or the #innerDiv style set, but while its in the div with inline style, it is broken. so my conflict seems to be that the inline style setting is winning over the disply=none, do you agree? but i swear that NEVER happene before so i can’t understand why it seems to be true today!
Как исправить ошибку с display none?
Почему это не работает? Работает пару раз пока страница грузится, когда страница загружена — всё, работать перестает.
Для решения этой проблемы можно изменить условие на
"metamask.style.display === '' && phantom.style.display === ''",document.getElementById('connect_wallet').addEventListener('click', event => < const metamask = document.getElementById("metamask"); const phantom = document.getElementById("phantom"); if (metamask.style.display === "" && phantom.style.display === "") < metamask.style.display = "none"; phantom.style.display = "none"; >else < metamask.style.display = ""; phantom.style.display = ""; >>); document.addEventListener('click', event => < const menu = document.querySelector('.menu-1'); const isClickInsideMenu = menu.contains(event.target); if (!isClickInsideMenu) < const metamask = document.getElementById("metamask"); const phantom = document.getElementById("phantom"); metamask.style.display = "none"; phantom.style.display = "none"; >>);Для того чтобы скрипт работал корректно, необходимо убедиться, что он вызывается после того, как все элементы страницы загрузились и были полностью инициализированы.
Для этого можно использовать событие «DOMContentLoaded», которое срабатывает, когда загружены все элементы страницы. Например, так:
document.addEventListener('DOMContentLoaded', function() < document.getElementById('connect_wallet').addEventListener('click', event => < const metamask = document.getElementById("metamask"); const phantom = document.getElementById("phantom"); if (metamask.style.display === "none" && phantom.style.display === "none") < metamask.style.display = ""; phantom.style.display = ""; >else < metamask.style.display = "none"; phantom.style.display = "none"; >>); >);Также убедитесь, что элементы с id «metamask» и «phantom» действительно существуют на странице. Если эти элементы генерируются динамически, то нужно дождаться их появления на странице и только после этого привязываться к ним.
Не работает display none
Вся сложность заключается в том, что display: none; по каким то неведомым причинам отказывается удалять объект из потока. Наш CSS это черный background с прозрачностью и его нужно убрать при загрузке HTML страницы, но display: none; по каким то причинам отказывается работать.
div class="window_relative" id="window_relative"> div class="new_window"> img src="img/cross.png" alt="cross"> /div> /div>
.window_relative { position: fixed; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); display: none; }
Не работает display:none
CSS языком же написано – div#hplogo display: none. Почему он отображается? img#hplogo.
Не работает свойство display
После значения list-item,маркер никак не появляется <!DOCTYPE html> <html> <head> <style.
Не работает display:inline block
Дратути))0) Такая проблема.Не могу понять в чем дело.По справаот картинки должнен быть текст.По.
Неправильно работает display: table
Создал меню с помощью списка и display: inline. С пробелами между элементами решил бороться с.
Display: none; не работает дважды
Хорошо, я работаю с html/css уже почти десять лет, и для жизни я просто не могу понять, почему это не сработает.
Изначально у меня возникли проблемы с получением двух отдельных div , чтобы иметь display: none вместе с другими свойствами, при загрузке страницы. После устранения неполадок я пришел к выводу, что это было что-то не так в файлах начальной загрузки, поэтому после более чем часа сокращения я упростил его до следующего, чтобы удалить все возможные источники ошибок:
#first < display: none; > #second abc 123 Я сохранил это как test.html и открыл его через firefox, чтобы увидеть:
Я проверяю флажок “Inspect element”, и, конечно, #first имеет свойство “display: none”, но # secondec не делает.
Я продолжал проверять это с помощью хрома и края и получил те же результаты.
Я обнаружил, что используя
работает как ожидалось. Тем не менее, мне все равно нужно добавить другие свойства к # секунде, таким образом, думая, что я умный:
#first, #second < display: none; > #second < height: 100px; width: 100px; > После многократного повторения в попытке получить какой-либо другой результат, я закончил тем, что не имел абсолютно никаких оснований для того, чтобы работать так или иначе, но на данный момент я перестал заботиться.
Я приступил к открытию нового документа, напечатав весь оригинальный
(начиная с первого блока кода выше) и скопировав его из несохраненного документа и вставив его поверх неисправного.
Обновилась страница, ничего не увидела. Checked Inspect Element, конечно, все было там, только с “display: none”
Итак, мой вопрос после почти трех часов устранения неполадок:
Применение:
Код Visual Studio
В CSS есть странный символ, который можно увидеть при вставке кода в jsfiddle:
Удалите это или вставьте CSS ниже:
Я заметил, что в вашем появляются странные символы, отображаемые в редакторе стиля Firefox сразу после закрытия > из #first < . Я предполагаю, что это путало браузеры, чтобы не обрабатывать #second вообще.
Странно, хотя эти символы (показанные как ​ в Firefox) не отображаются в моем текстовом редакторе…
… заменяя строку на > на вновь напечатанную, она решила проблему.
Я попробовал ваши примеры, скопировав/вставив JSFiddle, и на самом деле у вас есть посторонние символы после # первой скобки закрытия.
Просто избавься от этого char, и все готово. Может быть хорошей идеей проверить ваш текстовый редактор. Я всегда включаю невидимые символы во время кодирования, чтобы предотвратить подобные проблемы.
Что на самом деле происходит, так это то, что процессор CSS браузера умирает после # первой скобки закрытия и ничего после этого не обрабатывается. Вот почему # секунда, похоже, не работает.