Hello I have found a strange issue on a website I am working on.
I can't figure out why this is happening, but some text with a color assigned via css looks darker then it should be. I am am using the gantry framework for wordpress, but I cannot find any kind of css filter applied that would be causing this and there is no layers on top of the text.
What is weird is if I add position:relative and z-index:1 to the text's container it becomes lighter(closer to the correct color). I made a video of me toggling the z-index on and off with the chrome inspector. Can see it here; http://screencast.com/t/RsuK0h4C7o. I have set a block above the text to the same color so you can see the different text colors changing.
Another weird thing I noticed is that the text stops doing this at larger font sizes.
Related
I would like to use Font Awesome icon in my project. I have included my kit in head section and put one icon into my code. However, it is not showing up, though I used font-weight, font-size, etc.
The icon is there it takes space and grows when I apply width and height, but it is not visible. Attempts to apply color failed, though background-color works well.
What trouble is it?
I have applied CSS rules for color and fonts and expect to see the icon on page.
I am working on a basic website and have a question. I used an image as the background and a text box to make the wording stand out, the text box I set as opaque. I wanted to add a picture to the text box but it is opaque too. How would I set the picture to be solid in an opaque text box?
Thanks for the help!!!!
In general, a child element will take on the properties from it's parent element. You can override the parent property by giving the image it's own property. However the css opacity property has some unique properties and does not work as expected.
see this popular question for work arounds that may work for your specific problem:
How do I give text or an image a transparent background using CSS?
I have never seen anything like this before, so not even sure how to phrase the question. I'm using a standard CSS :hover effect to change the color of some links on my page. However, when using webkit, only the bottom 95% of the text changes color, the top stays it's original color. It is happening for most links on the page. Firefox looks fine, Chrome and Safari both have the problem.
It is a Rails site using Foundation 5, but that shouldn't matter, I don't think.
Any thoughts?
Normal text link
Hover text link
--edit it's just bog standard CSS
a{color:#559ada;text-decoration:none;line-height:inherit}
a:hover,a:focus{color:#3285d2}
In Google Chrome(34.0.1847.131), possibly other browsers too, we're having an odd rendering issue with a web font using MyFonts.
As shown in the screenshots below there is a pixel at the top of the text which is loading the default/previous colour.
When hovered the top pixel line is white (the normal state colour), when inactive the top pixel line is the default text (non-anchor) colour.
This happens on all parts of the site where using the font and only occurs when using the webfont.
I've tried adjusting text rendering modes and line heights, neither fixed the problem.
The font-size is set to 100% (on all elements) and this inherits 16px from the body element, interestingly changing this to 18px resolves the rendering problem.
Have tried with other standard fonts, not with another webfont yet. The font files, I believe, are loaded directly not remotely.
SOLUTION
Changed the anchor from display: inline; to display: inline-block; as the anchor wasn't fitting the text correctly.
Thanks
It's hard to say without looking at an actual example, but I think you might be experiencing this problem. The font metrics allow the font to run outside its container, and a bug in Chrome prevents these parts from recieving the hover color.
Try setting a background color on the element to see if there are any pixels actually running out of the element. To fix it, you'd need to make the element really wrap the text (by giving it a top padding, for example.)
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.