I asked a question a few minutes ago and tried all of the suggestions. I still am having an issue getting this just right. I have found the block of css that is causing the issues and need a solution.
I have 2 files. The first file has all of the css that I used when I made the form. When I had the form looking the way I liked it, I put all of that relevant code into a different stylesheet. The new stylesheet is overriding some of my values and causing things to look bad.
This is what I want and is all I require.
#password #header td {
padding-top:90px;
vertical-align:top;
}
This however is the block of code that is making things break. I don't want any of this. Is there a way to override it? The line-height specifically is really making things look horrible. If I remove the line height attribute then other parts of my site break.
td, th {
color:#000000;
font-family:verdana,geneva,sans-serif;
font-size:12px;
line-height:17px;
margin:0;
padding:0;
}
You can override all the attributes in your general css declarations into your specific style and add !important to ensure it is followed, e.g. for line height you can use:
#password #header td {
padding-top:90px;
vertical-align:top;
line-height: normal !important;
}
Try changing line-height to something a little smaller. Something like this (targeting specific problem elements):
#password #header td {
line-height:10px;
}
You can also specify normal to line-height:
#password #header td {
line-height:normal;
}
You can directly override it in the specific style, like this:
#password #header td {
padding-top:90px;
vertical-align:top;
line-height:12px; /*Or whatever is relevant*/
}
Check out Firebug's CSS browser and calculator to see what is the "default" value.
Related
I have an element, page-header that I want to remove the margins from. That element also has a child h1 that I also want to remove the margin from. Is there a shortcut syntax in LESS that allows me to do this.
Right now I have this:
.page-header,
.page-header h1{
margin:0;
}
But I'm curious if there's something like:
.page-header &+ h1{
margin:0;
}
that, when rendered, will give me CSS like my first code block above. &+ doesn't work, I checked
The ampersand can only be used with nesting:
.page-header {
&, & h1{
margin:0;
}
}
For more information, see my blog post.
Is there a way to mark a CSS rule as less important, such that it doesn't override a subsequent rule even if the first rule has higher specifically? For example, say I have the following in my CSS file:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
The idea I was going for is that all text input fields that are children of the div "inputDiv" get a width of 125px, except for certain specific inputs that get some other width. The problem is that the first declaration overrides the specific item declarations.
I've tried the following:
Append !important to each of the specific widths. Works, but many claim (rightly, I think) that !important should be avoided, and it is rather cumbersome as it must be added to each element with a specific width.
Prepend #inputDiv to each of the specific selectors, i.e. #inputDiv #differentInput1 Again, works, and avoids the issues with using !important, but still cumbersome as it has to be done to each element.
Is there any way to simply say that the items in the first declaration are less important, and shouldn't override anything?
There's no way to do this since it's antithetical to CSS in the same way that !important is -- doing the opposite would be just as abusive. Your only option is to rely on selector specificity. You can write this in a way that is not as cumbersome by using a class for inputDiv instead of an ID, for example.
maybe a way to solve you problem or answer your question you could try something like this
(http://jsfiddle.net/6aAF5/)
<div class="inputDiv big"> BIG</div>
<div class="inputDiv middle"> MIDDLE</div>
<div class="inputDiv small"> small</div>
<p>
<div class="inputDiv"> normal</div>
</p>
<style type="text/css">
.inputDiv {
background-color:green;
width:200px;
height:20px;
}
.inputDiv.big {
background-color:red;
width:400px;
}
.inputDiv.middle {
background-color:lime;
width:100px;
}
.inputDiv.small {
background-color:orange;
width:50px;
}
</style>
and little explanation about the !important
!important in a css file is used to override styles which are defind directly in the html.
this means if you have
<div class="isItImportant" style="background-color:red;width:100px;height:100px;"></div>
<style type="text/css">
/* this changes the styling */
.isItImportant {
background-color:green !important;
}
/* this doesn't change anything */
.isItImportant {
background-color:fuchsia;
}
</style>
(http://jsfiddle.net/6aAF5/2/)
You can avoid these issues by being smarter about your selectors, as others have noted. As a best practice, avoid IDs whenever possible, and try to use just one or two selectors for any given set of styling.
For example, rather than:
#inputDiv input[type="text"]{
width:125px;
}
#differentInput1{
width:25px;
}
#differentInput2{
width:500px;
}
You might try doing this:
input[type="text"]{
width:125px;
}
.differentInput1{
width:25px;
}
.differentInput2{
width:500px;
}
If you need more specificity than that, something like this would also work:
.inputDiv input[type="text"]{
width:125px;
}
.inputDiv .differentInput1{
width:25px;
}
.inputDiv .differentInput2{
width:500px;
}
Ultimately though, you want consistent styling throughout your site, so you shouldn't need to get so granular. You might want to look into OOCSS, which was great in helping me write lighter-weight, more scalable CSS.
http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
http://oocss.org/
Well, there are some ways to achieve what you want to (if you don't want to do a lot of change),
Change your div id="inputDiv" to a class name class="inputDiv", and change your css selector to .inputDiv. This way your 1st declaration won't override your proceeding declarations.
Use LESS or SASS, which allow you to namespace css rules.
And lastly, You can override the (unwanted) styles using jQuery, but it's an unnecessary overhead.
PS: Being descriptive in CSS is rather helpful although it's cumbersome.
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
There are 2 methods for external css assignments.I am using the first method; most websites use the second method. I wonder whether I am doing it wrong!
Fisrt method:
Create a class for almost each & every css rule and use them anywhere.
<div class="f_left d_iblock">
<span class="w_100 f_left">blah blah</span>
</div>
.f_left{
float:left;
}
.f_right{
float:right;
}
.d_block{
display:block;
}
.w_100{
width:100%;
}
....
....
Second method:
Create css rules for each element.
<div id="container">
<span>blah blah</span>
</div>
#container{
float:left;
display:inline-block;
}
#container span{
width:100%;
float:left;
font-weight:bold;
}
In general I am using the first method. I am choosing this method because this provides the following to me.
Small css files hence provide less load time.
Reusable css rules.
Clear code hence CSS management is more easier than second method.
I don't need to create an id or class attribute but only assign css rules. So I don't need to think of a name for each element :)
I think browsers can interpret css rules fast so this enhances the performance.
I see most sites generally don't use this method most and I am starting to think that I need to strive to improve performance, but I am bulking html files instead of css with writing 3 to 4 css rule names to each element.
Note:I know little English. I hope you can understand me. I will be happy if you can write simple sentences :)
The main reason not to do it the first way is that it doesn't separate presentation from content: your HTML elements will look like <span class="f_left d_block w_100">, with the presentation embedded into the HTML itself. The whole point of CSS is to remove the presentation from the HTML so you can write <span class="product-list-description"> in HTML and then define the style in CSS.
The first method allows perhaps fewer CSS rules which can be re-used on lots of different elements, but it forces you to change your HTML whenever you want to change presentation. For example, if you have lots of elements with the same CSS rules applied, if you want to change how they look you'll have to change the HTML for every one of those elements. This is a lot of work and is prone to errors. With the second method, you'd have a CSS rule that applies to all those elements, and to change their presentation you only have to change the rule. In most projects this is a significant advantage.
Your both method is not so good yet. you can write second method like this:
#container{
float:left;
}
#container span{
display:block;
font-weight:bold;
}
But your approach for creating a separate class for every property is not good.
There are some good article you have to read about check these
https://developers.google.com/speed/docs/best-practices/rendering
https://developer.mozilla.org/en/Writing_Efficient_CSS
UPDATED
Why your approach is not good suppose i have three different element there most of the property is same but are different.
For Example:
.one{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:15px;
color:#000;
line-height:1.5;
}
.two{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:18px;
color:#000;
line-height:1.5;
}
.three{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:13px;
color:#000;
line-height:1.5;
}
You can write this in a better way which decrease your CSS file size. Write like this:
.one, .two, .three{
float:left;
font-family:"tahoma";
font-weight:bold;
font-size:15px;
color:#000;
line-height:1.5;
}
.two{
font-size:18px;
}
.three{
font-size:13px;
}
So, if i go through your approach i have to define each property separately, it's time consuming & heavy also.
I have default properties defined for my links like this:
a{
color: blue;
}
a:hover{
color: red;
}
The problem is that I lose the all the hover properties when I do something like this:
#header a{
color: gray;
}
So to keep the hover working as I defined it before in the defaults, I'd have to declare it again:
#header a:hover{
color: red;
}
Is there any way to do this without loosing the original hover action defined?
Unfortunately, if you want it to work in all browsers, you'll have to override it.
a { color:blue; }
a:hover { color:red; }
#header a { color:grey; }
#header a:hover { color:red; }
Example.
Alternatively, you can make use of !important. Usually this is a sign that something weird is going on in your css, but this seems to be the only alternative to duplicating your css.
a { color:blue; }
a:hover { color:red !important; }
#header a:hover { color:red; }
Example.
You could also make use of a css compiler such as sass or less which would let you write it in a manor where you aren't duplicating effort - but that's beyond the scope of this question.
You're over-riding the styles with a cascade. Putting "#header a" gives that style more weight than the original style. You can over-ride it with a !important (although I wouldn't recommend it). Here's an article that explains this concept.
One way you can do this is to specify the default style as !important.
Using !important is usually a sure fire sign that your code can be improved however in this context, and without re-defining the styles, it seems like the best choice (best I know of right now).
a:hover{
color:blue !important;
}
Working Example
Also note that if you do go down the route of using the specific selector that you can combine both selectors together to reduce code duplication.
a:hover, #header a:hover{ color: red;}