display NONE not working – possible conflict on stylesheet?

[codeJunkie]

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]

To be frank, Codedumps don’t lend themselves to easy diagnosis.

Could you make a Codepen.io example?

[codeJunkie]

@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

[codeJunkie]

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

     <div id=outerDiv class=inlineRow>
       <div id=innerDiv>content here</div>
     </div> 

css is like this

    .inlineRow div{display:inline;}
    #innerDiv{display:none;}
    .hide{display:none;}    

I expect innerDiv to be hidden, but it’s not. so i add the class=hide 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!

[Alen]

the inline style setting is winning over the disply=none

[codeJunkie]

so it IS that which is the conflict.. and explains the flicker i see on those elements on screen when the page loads.

so even though the .hide and the #innerDiv styles come AFTER the descendant style, which i would think means the latter style setting wins, you’re saying the descendant style is still trumping.

ok. that is frustrating now, and seems contrary to the laws and nature of the code… cascading…. ?????

[codeJunkie]

i guess i should also ask…

where does dom manipulation fall within the hierarchy of style properties?

i do this alot with javascript throughout the project for visibility to change a class name, say from hide to show. (ie – display:none or display:block)

[codeJunkie]

ok here is an exact example of where the .hide (display:none) is not working to hide the ROW_CITY div.

html

 <div class=inlineRow>
     <div  id=geo_box>
          <div id=row_city>City</div>
     </div>
</div> 

css (in exact order as on stylesheet)

#geo_box{ padding: 1px 1px 1px 1px; font-weight:bold; }
#row_city{ display: none; }
.inlineRow{ clear:both; border-top: 1px solid #D7D6FF; width:99%; }
.inlineRow div{ display:inline; vertical-align:top; float:left; padding: 2px 5px 2px 2px; margin-right:4px;}

so in this case, the div i want to hide is a child of a descendant that is set with inlineRow.. and i did not explicitly say inlineRow div div{display:inline} so why does the 2nd level nested div inherit that property?

[codeJunkie]

@wolfcry911 thanks for all this info. i had no clue you can use operators like that .inlineRow > div { } in css. i have read some on specificity prior to this post, but what i read thus far was not this comprehensive (or i didn’t read it to explain what you’ve said here)..

more importantly you gave me new eyes to look at the order of things, and now i think i see the source:

(html nesting order)
div id=main_content
div id=”column_container”
div id=”center_column”
div class=”inlineRow”
div id=”geo_box”

#main_content{clear:both; padding: 3px 1px 0 1px; }
#column_container{ position: relative; margin-top:1px; padding-top:2px; }
#column_container div{ padding: 2px 2px 1px 1px; display:inline-block; float:left; }

my not knowing that ALL descendents would be affected is part of the problem. i tought only the explicitly defined ones would be affected, not their children too… or maybe i’d never needed to style beyond the first child til now. whatever…

about column_container DIV..
i tried height=100% and it was not working to stretch to fit the parent div (which DOES have a height setting and i thought should work – but the parent must have height in PX not in %, something finite i suppose?). or does something in that position relative disallow the height in % property to work.. ever??

thanks for this tutorial, you cleared up some laws of the code that i obviously did not realize before so i think ill be able to fix it today and move on.. i really appreciate everyone’s feedback! this was taking forever. i have to publish end of this month, bad timing for this setback!

i will let you know how i finally resolve it when i have a chance to come back :)

ps – love this website, its been a great resource for me, don’t stop!!

[codeJunkie]

For height: 100% to work, the parent must have an explicit height set on it. Using parent percentages will only work if applied all the way up the dom to the root element. The relative positioning is not affecting the calculated height.

to the root element.. is root body, html or both?? (think CROSS BROWSER solutions pls) i had set those each to 100%.. but find that is not helpful. so i added javascript to find visible cliet window height and now i make programmatic ht setting in px for that column_container div.

will also try your suggestion for resolving the display none issue. thanks thanks thanks again!!

[codeJunkie]

also funny, you said relative positon should not impact height, yet every time i use it, my divs are collapsed (the parent which has been set as relative) and does not stretch to fit the content within as intended.. but there’s prob been more of my misunderstanding of specificity at play in those cases too, when styling the nested children to a relative positioned parent :)

but now i think i know how to avoid/fix those issues. you’re awesome!

[codeJunkie]

fixed display none.

/*---  default hide some form elements when page loads ----*/
div#row_city,div#row_calcBtn,div#row_save,div#message_container,
div#sale_row,div#loan_amt_row, div#loan2_row,
div#discounts_row, div#nydiscounts_row,
#drag_BwebDetails { display: none; }

[Author]

Posts