I wonder if there are any possibility to reset css in middle of page? I have main style, but in one area I would like to use style from tinyMCE generated source.
So in tinyMCE source are elements which in editor looks like default browsers style (or like user wants), but in other pages uses style from my main css and from it self inline style. So I get mix of both ant it looks crappy. And I have no idea how to reset main style,.. without iframes.
Thanks
You mean, have a set of CSS rules to apply to the top part of a page, and a reset set of rules apply to the rest? No way, can't be done, sorry.
My approach to stuff like this is usually to embed the problematic content in a wrapper <div class='wysiwyg_html'> and then to set specific styling instructions for that content:
.wysiwyg_html p { display: inline }
.wysiwyg_html a { text-decoration: underline }
.... and so on
If you want, you can apply a whole reset stylesheet to everything inside wysiwyg_html that way.
thats pretty easy, i will show this with the "poorman's" reset but the others (eric mayer's ect.) works the same way:
* {
padding: 0;
margin: 0;
}
div {
padding: 50px;
}
#content *{
padding: 0;
margin: 0;
}
now your div inside the #content should have the reseted padding: 0; again, because an id selector wins over an element selector, so the only thing you need to make sure is that your secound reset has a selector that outweighs the others (but dont use important!).
Related
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I am trying to code a page, and for some reason i have a random css spacing issue for my list that i created. On the bottom right i have a random space between the list and its div.
I am styling it fine i think but my code is here at jsFiddle
and it works fine there for some reason. Any ideas?
If needed i can supply the entire page link.
I want that whole entire css list to span accross the entire div but it has a huge gap between the left wall of the div and its list.
The list on the page you link to needs to have its padding (and potentially its margin ... some browsers have different default styles) cleared. Here are some rules you could use to fix this:
#navlist {
list-style-type: none; /* Removes default list style */
margin: 0;
padding: 0;
}
I highly recommend getting the Firebug extension for Firefox. It makes debugging layout issues like this very easy. It also helps you see whether the style rules you are writing are being overridden by a more specific rule elsewhere in your style sheet.
As an aside, you shouldn't be using the center element. That element has been deprecated, and should be handled via your style sheet like so: text-align: center;
Is there a way to remove CSS styles from an submit button so that the default browser style is applied?
You can set the styles to the system values,
input.overridecss {
background-color: ButtonFace;
color:ButtonText;
}
jsFiddle
Here is a list of values you can override, there is probably a better list but I'm lazy.
[Edit] Here is the Specification which has been deprecated lol,
so here is the correct way I guess,
input[type=button] {
appearance:push-button; /* expected from UA defaults */
}
from Appearence
You can do something like this:
button {
padding:0;
margin:0;
border:0;
background-color:transparent;
}
Hows that?
Store styles that you're applying programatically in a CSS class. When you want to go back to default remove the class.
Well, if you dont mind to use jQuery, you can use following code to remove all styles and classes from submit buttons.
$('input[type="submit"]').removeClass();
$('input[type="submit"]').removeAttr("style");
This will remove all classes as well as inline styles, thus system default button style will be applied to your all submit buttons.
I found that because I had:
* { border: 0; padding: 0; }
etc etc.
in my code which affects submit buttons so I put this is instead:
*:not(input) { border: 0; padding: 0; } etc etc.
This seemed to fix it.
If you're DEVELOPING the site - just remove the rules from the CSS file.
If you so wanted to, you could use Javascript/JQuery to remove/reset them based on some sort of condition if thats what you're looking for, ie:
$("#myButton").css("background","");
And so on...
If you're USING the site, but didn't build it - then you can (depending on your browser - i'm looking at Firefox 4) disable all or partial CSS from rendering using the web developer toolbar options... but I don't know if you can apply that as the 'default' setting for every site you load.
I am using a CMS that has been poorly configured with horrific CSS (e.g. H1 is about 12px). How can I load my content without it being infected by this diseased CSS?
I was considering an iframe, but I would want to keep it in the CMS if possible. Would frames work?
If you can keep your content within an element with a specific class or id (e.g. <div class="content">, then you could adapt a reset stylesheet (like Eric Meyer’s) to reset everything within that class:
.content div, .content span, /* ...and so on */
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Then write all your styles prefixed with that class too, e.g.
.content h1 {
font-size: 3em;
}
If you’d rather reset everything to the default browser styles (rather than the unstyled settings you get with a reset stylesheet), you could adapt Firefox’s built-in html.css stylesheet in a similar way (i.e. prefix all its selectors with the class/id on the element containing all your content).
Bit of a drag, but it might be less of a faff than frames. (I assume the CMS generates your HTML, so it’d be harder to change that to use frames than to work around their issues in your CSS file.)
You might consider changing your CMS — they’re meant to reduce the amount of work you have to do, not increase it.
Is there any possibility to load your custom css classes? You should load your CSS classes after CMS's CSS classes and override them.
I'm creating a snippet of HTML to allow others to add functionality to their web sites (it is a voting widget). I've created a snippet of HTML like this:
<div>
[implementation of my voting widget]
</div>
I spent a lot of time to get the formatting of this widget just right. It works great in a sample web page that does not import a style sheet.
When I add the widget to a page on a Drupal site, however, the imported CSS wreaks havoc with my careful formatting. I'd like my HTML snippet to ignore all CSS style sheets. Is this possible?
Regardless of whether it is possible, is there a better solution?
Instead of relying on your CSS styles not being overridden by any imported stylesheets, you should give your widget a unique id and make sure all of your styles are a derivative of that id making sure to implement any styles you don't want to be overriden (margin, padding, etc):
<div id="votify">
[implementation of my voting widget]
</div>
#votify {}
#votify ul {}
#votify div span {}
/* etc */
You could try using a reset stylesheet:
http://meyerweb.com/eric/tools/css/reset/
Of course, you don't want to overwrite the page's CSS but you can get an idea on how to reset the styles your widget uses and use your personal CSS. So something like...
#voting-widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I hope this helps.
Without using a style sheet I think you'd have to explicitly set all margins, padding, fonts, etc in the style attribute so it takes precedence over any CSS sheets that there are.
Reset your widget CSS to default values, and THEN add your formatting code. This will clear out any page styles so you can work from a clean slate.
div#widget, div#widget * {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/* ... whatever other reset code ... */
/* ... then add your own code ... */
color: red;
}