This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Stop CSS styles to be applied in particular sections of the code
HTML code inserted into WordPress with many plugins (each of them probably has it's own style) inherit global styles automatically.
An approach is to find unwanted styles and override them. Sometimes it's difficult to find it as in my case)
How can I define an HTML object to be clean from base and don't inherit any style from the page ?
According to the browser, it's the built in style: the border-spacing is set to 2px.
I think you meant to clear this with cellspacing=0, but the page is an HTML5 page, which doesn't support this attribute.
That said, there's some advice for you. Using tables for mark-up is outdated. You may get away with it, but if you are creating an html 5 page, you should obey the rules that come with it. :) It turns out that it isn't any of the WordPress CSS that is bothering you. It was just the built-in style, which could not be overruled using outdated attributes. :)
For the future, in most browsers you can inspect the elements and their properties. In Chrome this is built in, in FireFox I think you still need to install the FireBug plugin. With that, you can right-click -> inspect element and then check the element or its parent to see what is going on:
Related
This question already has answers here:
How to disable CSS in Browser for testing purposes
(19 answers)
Closed 7 months ago.
I am looking for an option based solution.
Of course there is an option to remove all style tags one by one from the elements panel, this will not remove inline injected styles.
For debugging purposes I would like this option to be at reach, I remember this being an option at one time.
For debugging you could try commenting out link tag in html body that has link to CSS stylesheet
You can do that on Firefox, found in the menu under View -> Website Style -> No Style (the wording might be slightly different, I don't have english version of FF installed but you should find it rather easily I guess.
I have a weird issue. I am using the Bones theme in Wordpress, and simply trying to put a style on my home page menu.
The site is h*Xp://www.advanceditsolutions.net/nearitest/
The CSS I’m trying to use is this:
.home ul#menu-pages {
display: -webkit-box;
}
I have it in both of the media query sections, min-width:481, and min-width:768. I’ve also tried it outside of the media query scope, no luck. I can’t figure out why it doesn’t get picked up though. I inspect it on the site, and nowhere do I see the display CSS.
What sucks is, the placement is fine is most browsers, but Chrome it's all jacked up.
:: scratches head ::
1) First of all, you're using vendor prefix -webkit- that will work just on specific browser(s).
2) Check if the value is correct. Here is the list of all possible values for display property. Are you sure that -webkit-box is a correct value that can be applied to display?
Maybe instead of telling that the CSS you want to apply, doesn't work, share the larger context, a screenshot and tell us exactly what you want to achieve.
3) Do you use some developer tools, like Chrome Dev Tools, Firebug or something similar to apply and test styles? It's handy and can save you bunch of time trying to figure out what's wrong...
I can see it is working within the min-width:768 media query. You only have it included once in the stylesheet though from what i can see.
Two critical issues here are:
1) This css will only target the home page because you've used '.home' as part of your selector.
2) You've used the '-webkit' vendor prefix so it'll only work in browsers that run on that engine and support that property. I would recommend against this. You are probably better off using a flex display type.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Cross Site Scripting in CSS Stylesheets
I'm considering allowing users to create their own CSS through linked stylesheets (NOT embedded style tags). Can an XSS attack be performed from a stylesheet?
Thanks
In Internet Explorer, Firefox and other browsers you can embed JavaScript in CSS by specifying a javascript: URL in a url() CSS statement.
Even if you manage to filter these out, an attacker can still completely redesign the page (including all of its textual content) with advanced CSS. Therefore, it becomes extremely easy to trick users to execute stupid actions, which is what XSS is about. For example, you could make the Delete Account button fill the entire window and change its text to "Click here to win 1000$".
You can white-list a select few properties (text-*, font-*, color, background (only colors and gradients, no URLs or other fancy stuff)), but you'll have to reject anything that does not match these restrictions.
Interesting question. I can imagine the style sheet having the ability to remove or hide elements which can be a security problem. You can also insert text after a certain element using :after and :before so you might want to be careful about that.
Alternately I think you should include their style sheet first so that they don't suddenly change all your fonts or something global.
those are old hacks but might still work in older browser, for example you can put javascript protocol in href attr.
http://ha.ckers.org/xss.html
(search for style)
I am frustrated. I have one website where my drop-down CSS menu works and another where it doesn't.
Their stylesheets differ wildly and, although I have tried to manually copy the menu styles from one to the other, but with no success.
Is their any tool which will let me (like FireDebug) click on a page section (the menu) and then copy the rules which affect that section - ignoring those which are hidden by other rules - so that I can post them into the second site's stylesheet.
It seems that rather than having multiple styles affecting the menu and trying to sort out which have precedence, I'd like to have some software sort it out and generate a single combined rule ... if you see what I mean.
Both FireBug and the inbuilt Chrome Dev Tools show you what styles are being utilised by the selected element. I don't work with FireBug much, but I know the Chrome Dev Tools will cross out overrided styles and even show default user-stylesheets where applicable. It's also kind of nifty when inline styles are applied, eg for a table the "frame" attribute, as it converts these to CSS and displays it as part of the styling ;)
Sounds like you've got problems with accidental inheritance. Try to make sure your CSS selectors are only referencing the elements you want to style. Otherwise things get messy, and stuff like this happens.
I am pretty much worried to make a duplicate with this question while more than on hour seems to be too much for navigating for the answer.
The situation is:
Widget, which needs to load css dynamically
Sammy.js and .ejs for views - most of all the html content is loaded dynamically
Lab.js to load javascripts
one loaded styles should apply to all the new content which instantly appears on the page
I've already tried the answers from these related posts:
dynamic CSS loading in IE won't work
Dynamically changing stylesheet path not working in IE and Firefox
(..and others)
The only thing which works for me even in the modern browsers is the injection of the "style" node with the inline styles inside. But this doesn't work in IE8 :( I do see the style node in the Developer Tools, but they do not apply. I've also tried to wait until the stylesheet is applied before starting the sammy.js application.
I would really appreciate your answer or a link to the related question and working answer.
P.S. I fix IE8 now, but IE7 working is also in the plan.
Did you try using createStyleSheet instead?
Or you could serve IE styleSheet.cssText instead of createTextNode.