I'm trying to get a few elements on my printing stylesheet to "show" at print/printpreview time and this isn't working. If I want to 'hide' elements, it works just fine.
I've tried setting the element's display=block from display=none and this isn't working. Also tried combinations thereof with using visibility=visible from visibility=hidden; no luck.
I thought I could work around this by doing some nasty hacking such as having my element at left= -3000px to left=20px; that change doesn't occur either at print time.
Another ugly hack of mine that isn't working is having the element's font color be the same as the background color in my main stylesheet, then changing it to black at print time; doesn't work either.
However, one thing that does consistently work is hiding any element at print time; so my print.css sheet does get picked up and applied.
In summary, so far, showing an element, changing its font color or position does not get picked up at print time; neither does centering an already visible element with text-align-center; by the way.
Also worth noting: The results are consistent in between IE9 and Chrome.
Any thoughts?
Check to see that any inline styles are not conflicting with your main css and your print styles.
An ugly workaround may be to add the !important tag to the print.css style.
Example:
.element {
display: block !important;
}
Related
I am aware there are other similar topics on this, but I was wondering how to make my situation work. I have not been able to make it work with available information so far.
I am trying to modify the background color of a Text button when the mouse hovers.
If I change my backgroundColor style inline of the button, it changes the appropriate area entirely. It seems there are no way to add an :hover functionality inline (I am using TS, shows up as an error. Even though it compiles, it has no effect).
If I use a SCSS module, I can change again the whole background color. But if I change the same property with the :hover functionality, it only affects the text part (see screenshot).
I've tried targeting more specifically the ant-btn-text, but to no effect still.
Would someone have an idea? I would like to avoid creating a state variable for this.
Edit: added portion of code and CSS as requested in comment
AntD classes generally override your own css stying. You can use !important to override that.
Ok so I found it (only post it now as it was getting late local time).
So compared to my original post, the & parent selector was necessary, and also adding !important made the trick.
So in my case, having:
.updateButton {
&:hover:{
background-color: red !important;
}
}
overrode the default styling.
Thank you!
I have 2 modals that I'd like to style differently at the modal-dialog level. I'm not sure how to do it. It seems that if I apply a style that I think should only apply to one, it applies to both of them. One modal template is passed as an HTML string, the other is passed as a script/ngTemplate that is part of the partial page that the controller runs on, if that difference matters. The one that is passed as a string has an ID on the root div, and the CSS that is applied to that doesn't seem to work. But if I have just a .modal-dialog in my css, that is applied to both modals, as I would expect it to. In the Chrome debugger, the #ErrorModal selector is greyed out, so it does see it, it's just not applying it, even with an !important, and I'm not sure why. When either modal is displayed, the HTML looks similar, in that the one that uses the template doesn't contain any of the classes from the parent div that it's wrapped in. One of the main things I want to do is set the background-color of the error modal to white, but leave my other one opaque.
I've looked at this question, but I don't know that it will let me apply styles 'above' the template.
My css-fu isn't very strong, nor is my Angular, but it seems like the specificity should make it apply.
Any ideas?
Turns out there is an option you can pass to the modal, windowTemplateUrl. I haven't found great documentation for it, but I was able to cobble something together using this question as a springboard.
i have an issue where im using css to make a div appear circular on screen but it only works if the background image property is set first
normally that wouldnt be an issue if the image wouldnt need to be dynamicly inserted using PHP code
i created 3 jsfiddles to document my problem
https://jsfiddle.net/2wr2wajw/
No issue, background set first
https://jsfiddle.net/zvq3r0pd/
Issue,background doesnt get resized properly
link3 jsfiddle.net/x8g05uph/
Same issue as above, i would have expected the style code to be executed first
SO, whats the issue and whats the solution? thank you
EDIT
Found out adding the additional styles in the html code works, but thats not very nice and unnecessary to rewrite css code for everyone tag
thats what class selectors are for right?
link4 jsfiddle.net/q7sdwbfk/
not nice
The reason your code is not showing up properly in each scenario is because you are using the background shorthand property, which in turn is overwriting previously set values.
For instance, in example 2, you are setting the background-size prior to setting the background shorthand. By setting the background shorthand, you are overwriting the background-size property.
If you don't want to load them in order so that they don't get overwritten, don't make use of the shorthand background. Instead, utilize background-image, background-repeat, etc. This sets each property individually and will not cause anything to be overwritten, unless the property is called explicitly again.
Here is the updated fiddle for your example 2, utilizing individual properties instead of shorthand.
Is it possible to get the first letter of an element while in 'hover mode'? This is how it would look - I think - but it's not working in Chrome 10:
p:hover:first-letter
or
p:first-letter:hover
Technically (imho) they're not the same. The first takes the first letter of the hovering element. The second takes the entire element if the first letter is hovering. I require the first.
As you can see on http://css4.hotblocks.nl if you 'enable' the CSS blocks, both don't work.
I want only the first letter of the element to color red, when the entire element is in :hover mode. Is it possible without additional HTML tags? Thanks.
-- edit I've changed my online example for the better. CSS is now divided in separate <style> blocks. Makes for easier turning on and off try-outs.
Conclusion - so far!? - is this: In Firefox 3.6/4 a:first-letter:hover does nothing (good) and a:hover:first-letter works perfectly (good!). In Chrome 10 a:first-letter:hover does nothing (good) and a:first-letter:hover breaks the previous CSS 'statement'. (In my example it breaks nothing because it's in a separate <style> block.) Which brings us to: once again Google Chrome lags behind Firefox =( --edit
I've checked your example and I have to say it works, on Fx 3.6.13
p:hover:first-letter {
color: blue
}
Only what you have to do, is change color of first letter. Because hover has the same color as text, so you didn't notice any visual change.
Both the :first-line and :first-letter pseudo-elements are defined in the spec as only applying to blocks. The a element is inline by default, so :first-letter doesn't apply to it unless you change it into a block element. I think Chrome is actually the one working correctly here, though it's inconvenient and I don't know why it didn't occur to the W3C that inline elements can have first letters too.
As an admittedly imperfect workaround, you could add a {display: inline-block} or similar in order to get the styling.
Working on a rather small, and simple layout, I decided to use Meyer's CSS Reset rules to clear some of the expected discrepancies between browsers. All was working fairly well until I decided to add a few paragraphs into a couple nested divs.
Once I placed the paragraph-tags within the second nested div, the background images of both the parent, and the grant parent divs vanished in IE7.
Removing the paragraph tags (and going with untagged-text) returns the background images. Additionally, leaving the tags and removing reference to the reset.css file restores the background images.
Obviously I don't want to go with either of those routes to solve this issue. Any CSS gurus here know what is taking place?
Demo: http://www.sampsonresume.com/projects/patriot-depot/
It looks like a version of the disappearing content bug in IE.
Add zoom:1 to div.pd_horiz_content and div.pd_horiz_content_b. That will invoke 'hasLayout' in IE and your background will show up.
You can also invoke hasLayout by adding a dimension (width:960px) to the divs. This would probably make more sense in your case since your divs have a fixed width based on the background images.
Oddly enough, when I remove the following rule from the reset.css file, the issue is resolved:
background:transparent
This rule is applied to the first large block of matched elements, so I'm not sure the implications it will have in the long run. Hopefully there's a better solution, as I'm a little uneasy about editing Meyers' reset.css in order to "fix" my problem.