I'm new to css so I'm sorry if this is a dumb question.
I was making a site and used this:
body {
font-size: 80%;
}
Later, actually today, I tried to apply EricMeyer's CSS reset to my page above the 80% declaration, but it's causing all sorts of trouble with my font sizing.
I didn't think it would be an issue because I thought font-size 100% wouldn't change the font, it would just be "use the font of your parent" but that's not the case.
What does this font-size 100% declaration actually do? Why is it applied to every element in the reset (i.e. html,body,div,span,a,b,i,font,etc {font-size} rather than just the body{font-size} I was using, which seemed to be inherited fine)?
Before I "just remove the 100%" I'd like to know what it's actually doing. What does 100% actually mean, and why does Mr. Meyer apply it to a bunch of elements rather than just the body like I was doing?
Does using font-size: 0.8em; work? Since 1em is "the size of a character", 0.8em should give you what you want.
The problem for you is that Meyer, is setting more and just the body element to 100%.
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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
A quick fix would be to change Meyers font-size: 100%; to font-size: 80%;
The font-size: 100%; is just used for resetting the style to be similar in all browsers, I believe IE6 is having some problems with this.
Related
I understand about CSS specificity (a bit), but I can't seem to understand a problem I am currently having.
I have a CSS Reset file, which I include before any other CSS files in my page. This file contains the following
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, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
Then, in my own css file (which is added after the reset), I have the following
ol, ul {
margin-bottom: 20px;
padding-left: 25px;
}
"OL" and "UL" are both single elements in the reset and custom css files - that is, neither of them have any prefix - so I would expect my own css to override the css. For some reason it doesn't.
I have been temporarily appending !important to my custom CSS, but I need to do this for almost every rule I am writing.
What am I missing?
Although I found some examples on the web, but it didn't solve my issue. Hope someone can help me.
I have two css files. One is reset all style attributes. There is the code (snippet)
html, body, 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, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
I cannot modified the reset.css because of the rule. I only work on the style.css. There is what I did to make the HeaderStyle works. I created a new class and it works.
tr.dgrdHeaderfntsize13e td
{
font-size: 1.4em; /* 1.3em 11px */
font-weight: bold;
background-color: #F2F7FA;
padding: 5px;
text-transform: none;
vertical-align: middle;
text-align: left;
}
My question is how to create the class for the fontsize on cell. I tried td.fntsize13e and tr td.fntsize13e doesn’t work. There is my .aspx page
<asp:DataGrid ID="dgrdLawyers" Runat="server" DataKeyField="GlobalID" GridLines="Both"
AutoGenerateColumns="false" CssClass="dgrdInnerBorders noOuterBorder talgnC"
CellPadding="5" >
<PagerStyle Mode="NumericPages" Position="Top" HorizontalAlign="Right" />
<%--<HeaderStyle CssClass="dgrdHeader talgnL fntsize13e"></HeaderStyle>--%>
<HeaderStyle CssClass="dgrdHeaderfntsize13e"></HeaderStyle>
<ItemStyle CssClass="dgrdItem talgnL fntsize13e"></ItemStyle>
Verify that your rendered html is correct and does not have inline styles being set like..
<td style="font-size:20px;">asdf</td>
and in your css you can use !important to force a property value
td.fntsize13e {
font-size: 10px !important;
}
That should work and will force the font size but I'd try and avoid that. Figure out where the font size is really being set and fix it there.
Make sure you scope your CSS. Try
#dgrdLawyers . . .
And use !important as a last resort if you have inline styles like #teewuane suggests.
Flexible layouts use ems or % as font-size units a common practice is to use body font-size as 62.5%
But Firefox's default font is 14px which results in smaller layout than others who have 16px default font size
Can't we fix just body font-size to 10px so that relative sizes works in every browser.
Also, in addition to #Ray's answer..
For browser inconsitencies like these, consider using a reset stylesheet.
A good one can be found here. and here.
I am pasting the code here for sake of reference.
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;
}
You are saying a lot of the right things here:
Ems and percents have traditionally been the units to use for "scalable" layouts.
The "cascade" in CSS includes the browser's own style sheet. So whenever you omit a style property for some element, it searches through the cascade and will pick up these missing properties from the browser's style sheet at the end of a chain.
If you want pixel-perfect font handling for page text that looks the same across browsers, you will need to define a font-size yourself. Using px on the body element should give you what you want. I'm not aware of any reason why this is still an issue. There was a time when some people would avoid px but modern browsers handle zooming nicely now that I suspect it is much less of an issue than it was.
I've got an issue which i've never had before up until this site and i can't figure out the problem.
I build my sites with a wrapper set at 100% width; and a container set at 960px with a margin of '0 auto' to center the container.
Most of the time (and as with this one) i have a header wrapper/container, main content wrapper/container and footer wrapper/container.
In addition, my body is set to 100% width and height.
The problem is my header wrapper is causing a very small scroll to occur, and when i scroll right to see, the entire right of the page seems to have a 20 pixel margin.
I don't seem to get the problem in Chrome, just IE and Firefox.
My CSS is cleared with this at the beginning:
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
My main body style is set as:
body {
float: left;
font-family: 'Verdana', 'Arial';
background: #E3E3E3;
width: 100% ;
height: 100%;
color: #5B5B5B;
}
I'm a bit embarrassed to ask this as CSS bugs are normally a breeze to get through, but i've no idea with this. As for the other wrappers, as i mentioned, they're all set as:
wrapper { float: left; width: 100%; height: 100%;}
content {width: 960px; margin: 0 auto; }
Any ideas? It's driving me insane!
Try resetting you css first. This is what I use to start my main stylesheet:
* {margin:0;padding:0;outline:0;border:0;
-webkit-font-smoothing: subpixel-antialiased !important; text-rendering:optimizeLegibility;}
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, 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;font-size:100%;font:inherit;vertical-align:baseline;}
You need to reset styles before you can troubleshoot bugs like this. Then it's a breeze...
Since the space causing the scrollbar is empty, you could just force that section to never show a scrollbar with--
overflow: hidden;
Then you can get on with the project & come back later to figure out what's causing it if you want to.
Using html and css for IE7, how do I position a html table at the very top of the screen without the top border that is automatically generated?
I am developing in vs2008.
You are probably seeing the default margins of the document body.
Set the margin to 0 on the body, preferably using css.
I recommend using a reset css to set the default style for your pages in every browser, there are penty on the net. Sample:
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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
Remove the border on your table.
CSS approach:
table / #id-of-your-table / .class-of-your-table { border: 0; }
Inline style approach:
<table style="border: 0;"> ... </table>