I have tables in which I want to represent negative numbers as red text. The problem is that in the print preview the color is not applied to the first letter.
I have CSS rules in a media print block. I have tried to put the number in a span and applied the redText class to both the span and the td itself. I have tried to apply the color to the class element and every subsequent element.
#media print {
.redText, .redText * {
color: #f44336 !important;
}
}
The html is:
<td class="textRight band0Bchange_ue_04 redText">
<span class="redText">-1,566</span>
</td>
This is the HTML in the regular view where the color is rendered correctly. I am not sure whether is possible to inspect the elements in the print preview.
Edit: The issue is caused by the Material Design library. I have put the relevant html and css into a jsFiddle. This works well. Once I add material.min.css the print breaks with the behaviour as described above.
https://jsfiddle.net/goldrydigital/8fzby8aq/2/
I have added a print preview on the jsfiddle.
https://jsfiddle.net/goldrydigital/8fzby8aq/6/
Here the problem doesn't display. The problem is only visible when I use the actual print function on Firefox.
Please check, may be possible you have written first letter CSS for print or main style sheet.
.redText::first-letter {
color: #000000;
}
I tried in codepen also it is working fine as you provided the code in question section.
Santosh provides a good answer which helped me to solve this issue. Here just to confirm the bit in the mdl css library which causes the issue. Apparently black prints faster this way.
Maybe you have put your span at wrong location...
In your output -364 do not have any comma or dot still it is leaving the first digit and rest all are red colored.
I suggest you, check the HTML tags.
Related
UPDATE 2: Question no longer relevant since it can't be solved with a MWE offline example. (I also found the offending piece of code which was responsible for the bug.
I have a small thin border when hovering over the header element which looks suspiciously like a text-decoration border and I can't get rid of it.
To my knowledge this problem can't be solved with text-decoration: none;… it just won't work or I applied it at the wrong element… then again, I think I've test them all… which Is why I am posting my question here.
text-decoration: "none" http://oho.xyz/hover1.jpg
The MWE works fine (http://codepen.io/pattulus/pen/bNRxaz), but the real thing isn't.
Since I don't know exactly where the problem is with my code, I have a live example running at . I debugged it with the web inspector for the last hours but can't pin-point what's off here. I placed an text-decoration: none !important almost everywhere without success.
So they real question is: What is this bug and how to find it?
Update: I dropped the faux-border added with an pseudo ::before element to the span to avoid confusion. I'll add it later when this problem is solved. I also made the html more semantic using this:
I have checked out the live version of your site, and if you disable the content: css property of your ::before css, the line disappears.
It's bad markup practice to have your a href wrapped around your two h1 tags. re-write like this:
<h1>Some title<span>sub title text</span></h1>
change your css to reflect the new html changes and you will be able to control the behavior better.
In my example I had a mixing which I called globally to underline all a tags:
#mixin hoverbottom($width: 2px, $style: solid, $color: $orangey-red) {
&:hover {
#include transition($link-transition);
border-bottom: $width $style $color;
}
}
Since the mixin isn't written in a smart way, I couldn't simply say border-bottom: none, but needed to #include hoverbottom (0px, solid, transparent);. I will rewrite it to work more smoothly. But… this was the culprit.
Thanks everybody for taking the time.
when I do this, it works:
.view-current-sales .col-first a {color:#66ff66;}
when I add the hover, it doesn't work anymore
.view-current-sales .col-first a:hover {color:#66ff66;}
any ideas?
I think you are confusing a few things with the a tag and its accompanied hover counterpart. Let's break it down really fast using a different example.
The HTML:
<div class="nohover3">
Test 3
</div>
The CSS:
.nohover3 a {
color:#66ff66;
}
.nohover3 a:hover {
color:blue;
}
Now, I am assuming you are enclosing these a tags in some sort of div or other containing tag to have it's own separate class. Now, this HTML renders one single a tag that is accompanied by two CSS elements. The first CSS element gives the a tag its starting color, meaning it automatically starts with that lime-green color you have provided me in the original question. The second element gives the hover a different color, in this case, the color goes from that lime-green to blue.
With that being said, let's look at your example but with a bit more cleaned up code:
The HTML
<div class="nohover2">
Test 2
</div>
The CSS:
.nohover2 a {
color:#66ff66;
}
.nohover2 a:hover {
color:#66ff66;
}
In this case, both the first and second element are producing the same color for the a tags. That means the color the a tag is to begin with (lime-green) is the same as the color when you hover over the a tag(also lime-green). Which means it stays the same color whether it is hovered or not.
To paint a clearer picture here is a JsFiddle to represent what I have just said:
DEMO
I apologize ahead of time for the poor class names, creating examples is not my strong suit at the moment.
CSS uses a point-scoring system in determining which conflicting styles to use. Elements are worth 1 point, classes are worth 10 points and IDs are worth 100 points.
Try using "Inspect Element" in your chrome browser or similar in other browser types, it will tell you if another style is scoring higher and thus its hover style is used instead.
If thats the case try replacing the class reference for a:hover to an id reference to obtain a higher score for the a:hover you wish to use.
A nice description can be found here Points in CSS specificity
If all else fails try tagging your hover style with "!important" to ensure the stype is used.
In IE 8, I am seeing the alt text getting displayed in the print preview when the image is not getting displayed.The issue is not occurring in chrome. I want to fix this issue in IE 8.
Src of the image gets added in run time. At some times images will not be available from the server
<img src="null" alt="weird issue">
Needed a fix without using javascript
You can't style the alt text directly, but it will inherit from the img parent so probably the easiest is to simply set the color of your img to white in the CSS (and if for print applications, then within your print styles).
Try this:
img{
color: #fff;
background-color: #fff;
}
In that example, I've also set the background-color to white but this probably isn't 100% necessary given that if this is a print style, the background will inevitably be white anyway.
As has been mentioned in the comments below this answer, you may be able to use a CSS attribute selector to only target those imgs that have 'null' as their source.
This would work like this:
img[src="null"]{
color: #fff;
background-color: #fff;
}
This would, however, come with a few additional requirements/assumptions:
That the src is indeed 'null', and not just an ampty string (in which case you could use img[src=""]).
CSS attribute selectors work in IE7 and up. However, IE7 and IE8 are a little delicate to !DOCTYPE declarations so you have to ensure that your page has a valid !DOCTYPE declared.
Older browsers (IE6, for example) will not support this, so you'll still get the alt text come through.
Assumes that a CSS resolution is actually what you're asking for, and - as before - that the background the image sits on is indeed white!
You could extend upon ths use of attribute selectors to simply ensure that those images coming through with src="null" aren't displayed at all:
img[src="null"]{
display: none;
}
For mozilla : study this code and find a way to achieve it with other browsers.
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
Or, some absolutely basic inline javascript, some verry ugly old-school inline event handler:
<img src="broken.png" onerror="this.style.display='none'" />
I have written a basic website that calculates SHA1 hashes. I know, there are already hundreds, but this was more to try my hand at designing than making something that a lot of people will use. An important part of my design was displaying the calculated hash in a textbox with the text auto-selected with JavaScript. This textbox has a CSS3 ::-selection pseudo element to change the color of the selected text so it doesn't look like a plain 'ol text box. Here is the CSS code:
#result::-moz-selection {
background: white;
color: red;
}
#result::selection {
background: white;
color: red;
}
I know I probably could have combined the selectors, but separating them was something I tried when this wasn't working. The HTML is a plain <input type="text" id="result">, along with a few other inconsequential attributes. You can see the full code at SHA1.in. Am I doing something wrong here? TIA!
BTW, I got my code from CSS Tricks.
Replacing your input element with a div seems to fix the issue. Apparently Chrome prevents overriding the selection colors for text inputs.
This is a reported bug: little link.
I'm having trouble with the text underneath the images on the website I'm building:
1) The "Back to home page" changes from the font it's set at (Georgia, 0.9em) to the default in Firefox. It does not do this in Safari (http://ink-12.web5test.terc.edu/img/modelofinteractionfull.cfm).
2) The footer appeared fine before I added images (http://ink-12.web5test.terc.edu/index.cfm). After I added images (inside div class=.submenu), again, the font I set (Georgia, 0.9em) changed to the default in Firefox (http://ink-12.web5test.terc.edu/aboutus/index.cfm).
Another issue that appear after I inserted the images:
1) The footer's vertical bars (|) disappeared between the links, in both Firefox and Safari. You can see that the bars are actually still there when you highlight the text, but for some reason, they do not appear in white anymore so they aren't visible (http://ink-12.web5test.terc.edu/aboutus/index.cfm). But you can see how it's supposed to look on the home page (http://ink-12.web5test.terc.edu/index.cfm).
I wanted to copy my code below, but I'm having trouble understanding how to properly format it on this site, so I'll work on that. In the meantime, any thoughts?? Thanks so much in advance for your help!
For example, regarding question 1, the only CSS rule that sets the font family is
h1,h2,p,p2,li{ /*group codes for many styles*/
font-family:"georgia";
}
It does not affect the link, since it is not inside any of those elements. Similar considerations apply to question 2. And the vertical bars are there, they are just black on black.
Use a markup validator like http://validator.w3.org to find he HTML syntax errors, fix them, and then deal with the CSS syntax errors with http://jigsaw.w3.org/css-validator/ and then analyze the logical problems. Using Firefox with Firebug is a good idea, since then you can click on any element and see which, if any, CSS rules are being applied to it.
I'm not sure if this will help you, but I suggest making sure that "Georgia" is capitalized when you declare it. I might be wrong but suspect that some browsers may not be picking up the name because it doesn't match the font's name perfectly.
Comparing the pipes (the vertical bar characters '|') between your examples shows a small flaw in the CSS. The pipes are not inside of the <a> tags so even if you set all your <a>s to white the pipes will never change. In one example ( http://ink-12.web5test.terc.edu/index.cfm ) the pipes are contained by a <p2> tag, which wasn't a valid HTML tag last I checked but that's besides the point. The <p2> has its color set to white which makes the pipes inside of it white. In the other example ( http://ink-12.web5test.terc.edu/aboutus/index.cfm ) the pipes are contained by a <div> which has its color set to black which makes the pipes black, but the <a>s are set to white. Since your background is also black the pipes disappear.
For the "|" issue add the following
skeleton.css line #161
.footerlinks {
padding-top: 0.5em;
color: #fff;
}
For the link issue it looks to me that the font is becoming bold when you hover. You just need to define your hover state ...
fonts.css line #4
a:hover {
font-weight: normal;
}
Sorry, it was such a simple fix! I"m very new to coding (as I'm sure you could tell by the ridiculous amount of markup I had in my style sheets). I didn't know that links could have all their own font-family, and thought that if you kept it between a heading or paragraph tag, that it would just take that on. But I get it now, thank you!