Related
Is there a way to cancel or overcome a vertical-align property?
I have a website with a stylesheet containing the following CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
I have inserted a table on a page with its content showing up in a weird way because of this style property (meaning that if I uncheck "vertical-align: baseline" within Chrome developer tool, it shows up exactly how I want).
How can I reproduce that on my page?
Thanks!
This is an interesting question because it touches very much on the default style sheet of the browser.
If you look at the default style sheet given in the spec (http://www.w3.org/TR/CSS21/sample.html), you see the following:
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
As a result, the default behavior is for the content of a table-cell to be vertically centered in the table cell.
In your style sheet, you are setting the vertical-align property to baseline for the tbody, tfoot, thead, tr, th and td elements, which is affecting your table layout.
You need to either adjust the CSS rule that resets the vertical-align property or add additional rules for the table styling as needed.
In your example, you can simply add the two rules given above after your
original rule.
Alternatively, leave out the vertical-align property from the original rule set.
To be more specific, alter your CSS style sheet as follows:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
thead, tbody, tfoot { vertical-align: middle } /* add this rule*/
td, th, tr { vertical-align: inherit } /* add this rule */
by adding the two additional rules.
i am also using a wordpress template with the same "reset" in the stylesheet.
i didn't want to simply reset the reset in my child stylesheet -- untold number of errors that could cause, based on the convoluted css.
instead, in my "child" stylesheet, i added a class and defined that any table element within a item sporting that class would be vertically aligned to the middle:
.masthead-table table, caption, tbody, tfoot, thead, tr, th, td {
vertical-align: middle;
}
then in the page where it actually appears, i gave the div containing the table its proper class:
<div class="masthead-table">
<table>
<tr>
<td>
voila, my middle-v-aligned content
</td>
</tr>
</table>
</div>
You cannot cancel a property. By CSS principles, every element has all properties defined in CSS (though not all properties affect the rendering of an element).
Neither can you tell, in a style sheet, a browser to ignore a CSS rule appearing in another style sheet. You can only throw in your own settings, and they will then participate the cascade and may thereby override other settings.
There is no way to know what CSS settings may be present in browser default style sheets, user style sheets, and other page style sheets. The only way to ensure that things work as if a CSS rule were not present is to actually remove the rule. This is one reason why “CSS reset” rule sets are so risky.
If you have been forced to work in an environment where some “CSS reset” is present and cannot be removed or changed, you may need to study in detail which default settings they may override. There is no guarantee that this is successful, since browsers are free to have whatever they like in the default style sheets. But the settings that probably matter are those that are described and more or less recommended in HTML5, section Rendering. It describes the following:
sub { vertical-align: sub; }
sup { vertical-align: super; }
thead, tbody, tfoot, table > tr { vertical-align: middle; }
tr, td, th { vertical-align: inherit; }
... and some settings that define the valign attribute in terms of CSS, as well as some special rules for the new meter and progress elements.
Thus, vertical-align: baseline may cause several default rendering features to be overridden. You would need to analyze which of them apply and to make sure that you set vertical-align to suitable values for the elements where it matters.
Since vertical-align property cannot be canceled, will your website render appropriately without it? Like by modifying margin, padding, and border?
margin: 1px 1px 1px 1px; (or something similar)....
A very descriptive site for info on those:
http://www.w3.org/TR/CSS21/box.html
And this site for info on baseline and vertical-align:
http://dev.w3.org/csswg/css-text-3/
Please check CSS vertical-align property default
because the default value is baseline anyway.
However, you can remove it from the CSS set,
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
I would like to do something like this....
body{
display:none;
}
#signIn_form_section{
display:inline;
}
Of course this does not work but I am looking for something similar. Basically I want to whitelist tags that are allowed to display.
Added html in jfiddle....
Link
Basically I just want the form and non-hidden input fields to show up.
I have created a working CodePen example of how to do this. You need to be specific about the tag, such as section in this example, *:not does not work properly.
HTML:
<section>
<article>
<p>I am hidden</p>
</article>
</section>
<section class="display">
<article>
<p>You can see me</p>
</article>
</section>
CSS:
section:not(.display) {
display: none;
}
You probably mean:
* {
display: none;
}
#signIn_form_section{
display:inline;
}
However, I don't believe this is a good idea... Could you please develop your requirements? Why you need to do so?
You can add a class display to elements that you want to display and do this to hide all the ones that don't have that class:
*:not(.display) {
display: none;
}
However I would question why you want to do this.
It might make more sense to add a class hidden to elements you want to hide and do this instead:
.hidden {
display: none;
}
First Set
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { display:none; }
then make a class and set it to display:block; add this class to those elements you want to show.
This question already has answers here:
What's the purpose of using CSS browser reset code?
(3 answers)
Closed 9 years ago.
i'm a fresh in css, my friend suggest me to add below css to every page,
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: arial,sans-serif;
}
why we need do that?
to reset all settings, that might vary among different browsers
examples: http://meyerweb.com/eric/tools/css/reset/
as ExP already explained you should not use this, but a css reset can be very helpful as some browsers display certain elements different from each other (just like jancha said).
But I prefere normalize.css - it does not change the overall behavior of your elements but unifys them as best as possible.
Just load the normalize.css before you load your own css file and everythings fine! :)
http://necolas.github.io/normalize.css/
Actually, you probably don't want to add this to every page.
It makes the font size and margins of all elements look the same. Headings would look exactly like paragraphs without even any space between them...
I'm using the tinymce wysiwyg for creating some nice looking instructions for my website.
I simply save the html generated code into my database, and display that html on a page.
Since my website has it's own stylesheets loaded, some things tend to show up according to what the styles dictate (like <ul>, <li>, or <p> tags)
If any of those tags are generated from tinymce, my site's stylesheets will style them.
Shot in the dark - Is there a style that makes a browser ignore all styles that reside inside a specific element?
For visual aid, here is a snapshot of the tinymce and what I'm making:
And here is a snapshot of the displayed html, on my site:
(this html resides inside <div id="tinymce_html"><?php echo $tinymce_html; ?></div>)
Here's the css that's affecting it (site-wide), inside the main.css stylesheet
ol, ul {
list-style:none;
padding: 0;
margin: 0;
}
Btw, I'm only giving an example of just the result for the <ul> tags. I'm sure I'll run into plenty more tags. (hence my original question - "is there a style that makes a browser ignore all styles that reside in a specific element?")
What I don't want to do is create an entirely new style sheet for anything related to tinymce, or other html I'd like to display without being affected by any site styles.
Use always a "reset css" before start new project!
Take a look at this.
Copy paste this style above your code and start from this. It reset all your elements.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Looks like you want to apply a css reset stylesheet.
Have a look here and take the one that seems the most applicable to you.
You will have to add this css to the editor using the custom_css tinymce config option.
On Wordpress after adding italic, bold, or hyperlink elements to text, the text becomes offset from the baseline of normal text. I'm using the Elegantica theme. Is there a solution for this?
My site: http://www.lfvaa-sample.com/
Examples of this problem can be found on the home page at the bottom with the hyperlinked text "Learn More" and on the LinkedFlow page under resources with the italicized text.
in the case of your "learn more" links at the bottom, the culprit appears to be
vertical-align: middle;
in your style.css
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-family: Helvetica,Arial,sans-serif;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: middle;
}
You can see when I turn that rule off in firebug, the text aligns properly. Tested with the italic on the other page and the same rule is affecting that text too.