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.
Related
I have a very old working page which I don't want to change/upgrade at all. I need to add Bootstrap 3 because I've added a popup modal but Bootstrap default CSS reset/re-styling is changing the old page so it looks awful.
Is there any simple way to prevent Bootstrap CSS changing my page by default?
I know I can add a modal without bootstrap, but I've the bootstrap modal already written and working on another page of the same website so I would like to use the same code.
A great solution to prevent overwriting is to go to this page and select the components you just want to use. This will prevent you from bringing over unnecessary code you don't need and hopefully, it will prevent it from overwriting your css. Make sure you add all your css files after bootstrap is called. Also, you could add a css reset at the beginning of your css file. Then style accordingly and add important tags.
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;
}
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?
I'm having trouble with a website I'm working on.
This is the website here. The top navigation bar is not okay at mobile/tablet view. It's okay at desktop only. See the image of mobile view:
I don't want to make it responsive but from mobile or tablet it should be same layout with scrooling. There is no problem at the code for navigation. The problem is about the div who holde the navigation.
Because if I remove the navigation and use just text, it'll have same problem:
The HTML code of the div:
<div class="outer top">
<div class="inner">
<div class="nav">
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
</div>
</div>
</div>
The CSS code:
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 {
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
background: url(../images/bg.png) repeat-x #fff;
color: #fff;
font-family: Helvetica, Myriad Pro, Verdana;
font-size: 14px;
line-height: 1em;
}
.outer {
width: 100%;
float: right;
display: block;
}
.top {
background: #004481;
}
.inner {
width: 940px;
margin: 0 auto;
}
I've used width 100%. But, still it's not okay at mobile/tablet. Can you please give me a solution...
I put your code in jsbin, and wasn't able to see what you're seeing. Can you add more code?
http://jsbin.com/ologix/1/edit
You could also consider to create a new stylesheet specific for your mobile/tablet devices.
This makes sure that it will look right on all devices. You're already using Divs so that shouldn't be a problem.
So as most developers, i use a CSS RESET in all my work. One of the small problems i run into is that when developing custom anything in wordpress, i use this reset and the problem ive been having is that, because of said reset when the user is writing a post, the ability to for example, use italics / bold etc isnt available. I mean it is but its not applied because of said reset.
I just went in and removed the em / i / b etc tags from the reset block and its working BUT, theres one more thats giving me the biggest problem and thats that when someone hits the enter key to create space between text etc, nothing happens. they have to manually go in and put in <br/> tags to create the separation.
That said, it got me to thinking that....what exactly IS the css for line breaks/ the enter key?
below is whats in my CSS reset...not sure what else i have to remove.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, 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: 0px;
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;
}
a{text-decoration:none;}
Ive tried to google but, aside from the p tag or the div tag etc...not sure what i have to remove to get the enter key/space created by pressing the enter key to go back to default.
Thanks in advanced.
To create separation such as a return, you can use a :after or :before like this:
p:after {
content: '\13';
display: block;
}
This will create a new line before of each paragraph element. You can use this trick with any kind of element.
Here's the fiddle:
http://jsfiddle.net/napy84/VQLTq/
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.