I'm having this sort of issue with the Twitter button on my webpage. In Firefox Developer Edition, the background of my webpage causes the button to render incorrectly.
example:
#container
{
background-color: #f0f1f4
}
causes the text within the button to render white.
Here's how it looks:
What's up with that?
EDIT
This is a bug in Firefox Developer Edition, and does not carry over to the official Firefox release. A bug report has already been filed: Firefox Bug #1112240
The text on Twitter button takes the color of your container, so it is #f0f1f4.
You need to specify in style sheet its own color:
a.twitter-share-button {
color: #333;
}
I hope it helps, please read more documentation there:
https://dev.twitter.com/web/overview/css
Related
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
I have a div with the following css:
.someTopParentClass .someParentClass .someClass::selection {
background: #ffcc00;
}
This is working without reactjs.
The class does show in the inspector with the correct color, but the color is not really applied.
When using reactjs, the background on selection stays blue until I go into Chrome's inspector and only after I change any css property of any class - the selection becomes the correct color :/
The .someTopParentClass class is renders dynamically on button click.
My guess is that Chrome doesn't realize correctly for some reason that the parent class was added - although in the inspector it shows the correct .someClass and the correct color.
This issue seems to happen only in Chrome (Works in Edge,Firefox)
Update
I reproduced the issue in JSFiddle :
https://jsfiddle.net/rmindel/r3581ewt/
Where do I open a bug for Chrome :/ ?
For now my solution was to change the color of the text from black to #000001 so Chrome will know it needs to re-paint.
Opened a bug for Chrome:
https://bugs.chromium.org/p/chromium/issues/detail?id=685174#c6
The workaround for me is as stated -
"For now my solution was to change the color of the text from black to #000001 so Chrome will know it needs to re-paint."
the css code posted below seems to work fine in internet explorer and google chrome but when in safari the a:hover effect seems to only apply when i right click the element or when I go into inspect elements and click hover from the options for that a tag in the right sidebar. I believe that this problem may be due to http headers as I can see no problem in the source code. The url in question is available here
and the css code in question is:
#swag a:hover {
color: black;
}
and the html is the following:
<p>Mouse over and click the link:
<div id="swag">
example.com
</div>
</p>
A full reboot of my macbook has solved my issue. The nature of the issue is still unknown to me.
So, as of 4/12/15, Tumblr has changed something in their code and the "Promote Tumblr!" buttons reappeared on my blog, even if I had them disabled in the advanced settings...
I searched and found this code:
iframe:first-child { display: none !important; }
that worked for me, but now on the mobile version of the site, I get a plain white bar on top, right where the Tumblr Promote buttons used to be... On desktop, everything works ok...
I attached the screenshots of before and after here:
Before:
,
After:
Any ideas how to get rid of it?
Thank you in advance!
That is because Tumblr seem to add this class "tmblr-iframe--controls-phone-container" to the body and this style;
.tmblr-iframe--controls-phone-container {
padding-top: 43px;
}
from what I found.
Try: body { padding-top: 0 !important; }
You can use the "Developer Tools" in Chrome (desktop browser) to see the source HTML of your site on different mobile devices, that should help you with problems like this.
Note: I used the "Developer Tools" in Chrome Browser and was emulating a device called "iPhone 5" to recreate the issue in question.
I'm working on my new online portfolio at http://asbjorn.org/ny/, and I've come across the weirdest issue!
Every time you open the page for the first time, the next and previous buttons for the slideshow don't appear. If I open the inspector, they pop up immediately, and they also appear when reloading the page.
They're pretty standard html elements, not added dynamically, so I have NO clue as to why this happens! Of course I can't have the site visitors reload the page just to see them. :/
I really hope someone can help me! :)
update: seems like it's a chrome only issue. For me it happens consistently in chrome on both Win7 and OSX. A few of my friends also has the same issue (probably in chrome on osx)
So I'll take a stab at an answer. When I see the problem in Chrome 22, and I bring up the inspector, I note that the #previousLink and #nextLink divs have a width of 0 in the broken state. Try setting an explicit width for these in your CSS, or make the nested image use display: block.
#previousLink { width: 31px; }
#nextLink { width: 37px; }
or
#previousLink img,
#nextLink img { display: block; }
I think the combination of these inline items and your overflow: hidden rule are biting you. I think. This is a tricky bug!