I have a JQuery (using JQuery 1.4.2) problem that exhibits only in IE8 in standards mode, on one specific DOM element but not on other nearly identical dom ellements. The best example of why it makes no sense is below:
$('span.error:visible')[0].style.display
The above piece of code returns "none" which unless i am having some sort of brain aneurism is impossible without there being a bug in either JQuery or IE8. This only occurs in IE8 in standards mode, not in any other browser or on IE8 compatiblity mode. The span that it finds is actually an ASP.net validation control so i only have a limited amount if control over what it renders to the browser. When i inspect the DOM using IE8 developer toolbar and copy the HTML from the DOM it gives me the below:
<SPAN style="DISPLAY: none; COLOR: red"
id=ctl00_cphContentBody_mnMainMiddleNames_ebvMiddleName1 class=error
controltovalidate="ctl00_cphContentBody_mnMainMiddleNames_txtMiddleName0"
errormessage="JQuery should not find this" display="Dynamic" validationGroup="MiddleNames"
isvalid="true" validationexpression="[A-Za-z][A-Za-z '\-]*[A-Za-z]*">JQuery should not
find this</SPAN>
If i just do a view source and copy and paste it i get the below:
<span id="ctl00_cphContentBody_mnMainMiddleNames_ebvMiddleName1" class="error"
style="color:Red;display:none;">JQuery should not find this</span>
If i create a simple HTML file containing just either of the above pices of HTML then $('span.error:visible') does not find the spans and i am unable to post code to be able to reproduce this problem. But in the actual asp.net page if i run $('span.error:visible')[0].style.display it returns "none" and if i run $('span.error:visible').text() it returns "JQuery should not
find this".
tl;dr How can $('span.error:visible')[0].style.display return "none".
Edit to answer Nicks comment.
$('span.error:visible')[0].offsetWidth returns 3
$('span.error:visible')[0].offsetHeight returns 22
Which is puzzling, i found the below on the Jquery site.
In jQuery 1.3.2 an element is visible
if its browser-reported offsetWidth or
offsetHeight is greater than 0.
THe element isn't visible, but acording to the above JQuery thinks it is.
What does this change mean? It means
that if your element's CSS display is
"none", or any of its parent/ancestor
element's display is "none", or if the
element's width is 0 and the element's
height is 0 then an element will be
reported as hidden.
So is the above just wrong. Display is "none" but offsetWidth and offsetHeight are not zero.
This appears to be a browser bug, though whether jQuery should handle it is certainly up fo debate. The :visible selector is really just a reverse :hidden selector and it's checking if the element has a 0 for offsetHeight and offsetWidth (e.g. hidden being defined as "using no space in the page".
IE shouldn't allow display: none to have an offsetWidth and offsetHeight, so the root of the problem is there. Should jquery add handling for this? perhaps so, there's already a bug filed which may be exactly your issuehere.
I wonder if this is something to do with visible vs hidden:
visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
(from http://webdesign.about.com/od/css/f/blfaqhidden.htm)
Wwhat do the following give you?:
$('span.error:not(:hidden')[0].style.display
And
$('span.error:visible')[0].style.visibility
You could also look at the CSS in more detail by using the IE8 Developer Tools (F12).
Related
I understand that if a sytle is overridden then it is crossed out in Google Chrome tools and then you can go to the Computed tab to see, which element has overridden the style.
Say I have some css like this:
.myClass
{
position:static;
top: 20px;
}
This is clearly wrong because the top attribute does not work with positions that are static. When I load the webpage in Google Chrome and press F12; the style appears under the styles tab as if it was applied to the webpage, which I find a little confusing.
Does Google Chrome (or any other browser/tool) tell you what the error is e.g. "cannot apply top to statically applied element" (like you get in Visual Studio when there is an error in your code e.g. NullPointerException).
A CSS class is a set of rules applicable to any element on your page that also can change during the live time of the page. As mentioned in Dais comment, properties are inherited and cascade down.
There is no reliable way to validate a set of CSS rules, because they all interplay each other and are about to change. Especially if you ask for a feature in your IDE like the NullPointerException hint this won't work, because CSS classes are composable and are JIT compiled. An IDE could not know beforehand which class are combined with other classes assigned to which elements in regards to the DOM tree at a specific app time state.
Mozilla Firefox has such a feature. It tells you why a rule isn't applied directly in the Inspector.
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right.
This will give you insights as to the styles being overridden or ignored (line threw).
CTRL + SHIFT + I
To Find Errors & Warnings use CSSLint
Debugging CSS and HTML code bugs can really ruin your application design. There are multiple ways to debug CSS and HTML code. There are few things or ways you should consider the debugging and taking care while developing HTML or writing CSS.
Check your syntax errors with http://csslint.net/. It provides the
nice tool and highlights a line where an error occurs.
Closely review your cross-browser compatibility issues. A site looks nice and beautiful in a firefox but sometimes it will not
look nice with another browser at that time you should take care of
cross-browser compatibility issues of CSS. You should nice and proper
CSS framework that will prevent to generate cross-browser issues and
verify HTML tags and CSS properties which may support by browser
correctly.
Browser web developer tool allows outlining an HTML and element with
different criteria this will allow to writing appropriate CSS for HTML
element.
Turn on or off stylesheet with Chrome dev tools. If you’re wondering
how your CSS is affecting a particular page element, the Chrome
DevTools make it easy to toggle each property. In the Google Chrome
web browser, simply right click and choose Inspect Element from the
context menu.On the right side of the Elements panel, you should see a
tab called Styles with some CSS inside of it. This shows you which CSS
declarations are being applied to the selected element, and if you
hover over each CSS property, you can uncheck them individually. When
a property is crossed out, it typically means that it is being
overridden elsewhere. You may need to uncheck a property in several
places to actually remove it from an element.
Use computed tab in chrome dev tools. it tells you exactly how the
browser is computing your styles. When working on large projects this
is essential for resolving cascading issues, problems with selector
specificity, and more.
You may enable chrome dev tools with ctrl+shirt+I or press F12 key
which supports in almost every browser.
Use this to debug your css
* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
Is there a way to see exactly which declaration is affecting an element. Rather than looking at a million properties in the Firebug inspector, where depending on how many classes something is assigned may contain a lot of declarations that are lower precedence and therefore not applied. It can get lengthy to find which particular declaration is in fact affecting your element. I see long ignored declarations like this:
ul {
color: green;
}
"Computed style" will show you the end result of all the hierarchies, but not where the style derives from. Maybe I'm missing something simple. Thanks much!
JSBIN
Edit:
I've heard that I should be able to expand attributes in the Computed tag, however I don't see where that option is available. I can see that the font-size is 13.333px, but no option to see where that's coming from.
Yes, in Firebug select the element and then click on the 'Computed' tab (when viewing the HTML frame). Here you will see a list of CSS properties than can be expanded to show the location of the relevant CSS.
The Computed side panel can give you this info.
Note that it just shows the CSS trace - i.e. the styles that are affecting a specific CSS property - for those properties, which are actually changed by the CSS rules of your stylesheet. Though it can display all computed values for an element. To hide the unchanged ones you can uncheck the option Show User Agent CSS.
Also please ensure that you have a current version of Firefox installed (current stable is 20.0.1). Firebug internally uses some APIs for the style tracing, which are just available on newer versions of Firefox.
In Chrome DevTools there is 'computed style' panel which shows you the list of styles for an element property and their locations. For example see the screenshot for text-decoration property.
I have some css code that only hides a certain element if another element's value is 0
#type_46[value="0"] ~ .exercise_dur {
display: none;
}
This works in every browser except ie7 (ie9 in ie7 mode/ie7 document mode)
When troubleshooting using ie dev tools, If I look directly at the styles list, I see:
[value='0']#type_46 ~ .exercise_dur
Which obviously breaks the selector and causes it not to work. If I manually (in the dev tools) correct this, it works perfectly without any issues.
Has anyone experienced this problem? If so, is there a workaround other than hiding the element in the javascript?
EDIT: (can't answer my own question yet so I have to edit)
It appears that the problem is that ie7 is not dynamically updating the css. When the code is initialized, it doesn't work because the value is not set before the css loads. It updates if I force it to (i.e. change the code or disable/re-enable the style) but then doesn't update (even if I change the value) until it is forced again. ie7 is not a huge priority for this project and hiding the element is not absolutely necessary, so I think I'm going to leave this one for now and implement it in jquery if necessary later.
Thanks.
Support for the general sibling selector in IE7 is buggy at best. I recommend figuring out another way to select your elements, or use jQuery.
Read more.
As usual I developed it in Firefox. Usually it works without modification in Chrome/Safari, and also IE8.
But when I tested on Chrome and Safari, I was surprised to see that it does not work.
My CSS is valid (validated on w3c). The JavaScript (using jQuery) seems to be valid too.
The affected elements are not redrawn after an attribute value is modified through jQuery, so the CSS rules for the new attribute value are not applied, not until I go into the Chrome inspector and deselect/select them manually...
Update: I do not have a working link for this problem anymore.
The problem was that Webkit was not "redrawing" when attributes were changed, but only when classes where changed, so CSS blocks with selectors such as div[attr=value] would not apply when attribute attr was changed to value through JavaScript.
One workaround is to use classes instead of attributes (.className) in selectors. Performing a class change after changing an attribute would also trigger a redraw also fix the problem.
This post is more than 5 years old, I believe the problem has been fixed in Chrome now.
The issues seems to come from the fact you are using attributes (selected attribute on DIVs) to control the state of your images; it seems like the webkit engine doesn't update the graphics until something actually changes - like a class or a style property.
In general, you should know that using a custom attribute like that isn't best practice. You can use a class to indicate when it's on, and .addClass("selected"),.removeClass("selected") when needed.
Also, you can display the images as background image of an element and control it directly from CSS, with:
.item div.caption { background-image: url('bras/B/btn.png'); }
.item.selected div.caption { background-image: url('bras/B/btn_selected.png'); }
this will simply change the image according to the div.item selected class.
For a simple work-around, you could add at the bottom of your .click handler something like $("body").toggleClass("somethingrandom");, but I really recommend to change your code to work with CSS, background-images and classes.
Do you need to modify the attribute value only? Could quite easily add a 'selected' class to the <div class="item" /> instead/as well. Using this alone/as well as your attribute targeted css will automatically update the images display.
Have you opened the error console within Safari yet?
In mine, I'm getting 404 errors on two files...
/bras/bras/A/3/2/1/bra.png
and
/bras/bras/A/1/pink/3/bra.png
EDIT:
You also have a </head> tag at the very end of your document instead of a </html> tag.