I'm using twitter bootstrap (v3.3.7) and the following button was displayed just fine:
Open
After clicking on a link like this
File
the font-color of the button turns black. Reloading does not help, i have to delete all history data, cache etc.
This problem occurs in Firefox and Chrome, but not in Safari.
Does anybody have an idea what could cause this problem?
I hope it's possible to fix this without overriding the styles of the button.
EDIT
to clarify: the second link is not the same as the first one. So the style of the first button (a styled a-tag) changes after clicking on an other a-tag. In the developer tool it says that the font of the first button should be black, but it is white and therefore invisible, as the button is white, too.
It's not possible without overriding the styles of the button. What you're seeing is a:visited at work. You need to override this CSS rule to be the same as the unvisited a in order for the link to look the same both before and after.
Related
I am using a website template, have gone through much of the style sheets and have used the f12 function in chrome. However, the button is ONLY blue when highlighted so I am really struggling to find it and turn it red. Is there a way to keep it blue so I can find it that way or should I look somewhere else?
"Purchase Now" is blue when highlighted
You can try in the Chrome dev tools (F12) you can use "Force element state" to cause an element to behave as though it is hovered. When you have the button element selected, look for ":hov" in the "Styles" tab within the main "Elements" tab. That should let you toggle the :hover state. Hopefully that can let you see the button when it is blue to investigate some more!
On this website, on Chrome, when hovering or clicking the "EXPLORE" button, I am getting a lot of weird shadowed boxes popping up in random places. What could this be from? I have inspected the elements but it doesn't seem that any of them could be causing these.
A screenshot below:
In your stylesheet, I'm seeing some box-shadows (and it looks like box-shadows, not text-shadows). And they only appear on hover so chances are, when you inspected your elements, you didn't inspect them on their hover states.
Regardless, go in to your stylesheets and search for box-shadow and set it to none.
Open your site in Firefox or Chrome
Reproduce the error
right click on the weird shadow box and select inspect this
look for a box-shadow in your inspector and disable by clicking off the checkbox
If it worked, give yourself a cookie! You're a master debugger
There's a .tooltip that's being loaded via js. There was 18 instances of it being called in the custom.js file. If you don't want it, you can just stop calling it from within this file.
Alternatively, there are 27 instances of .tooltip in your css file. You can go through an remove them or just add .tooltip {border-style: hidden;} in you html file and it should remove the border.
[EDIT]
I took a screenshot of the Chrome inspector:
You can see the element being added via js when you hover over the page down chevron. You can get rid of the tooltip altogether, or inspect the .tooltip, .fade, .top or .in css to see which one of these items is creating the offending box.
You should be able to make this stop just using css. My understanding is, if you put the css directly in the html it should trump whatever is in your css file if you don't want to change the file itself. HTH
It turns out the issue was with blur: the background was using a blur filter and this created weird shadows. I am not sure why and how this was happening, though. I removed the blur and just blurred the actual BG image in Photoshop.
It seems like I was encountering the same problem as in this question.
One of the things I've always loved about the webkit inspector is that you can click into any selector and begin adding styles and watch them appear live.
I generally do all my debugging in Chrome, however needing to debug with the iPhone simulator I noticed the web inspector for Safari 7 doesn't behave like it used to.
The problem is that I can't seem to click into a selector to add/edit styles (like you can within the web inspector for ALL other browsers... even IE).
Am I missing something? I was not able to find an answer by searching, and the closest I found was this: How do you apply style rule in Safari Web Inspector?
Here is a screenshot of what I'm doing within Chrome:
And here is Safari 7:
I am using Safari Version 7.0.4 (9537.76.4). I believe this is the latest version.
I demonstrated it better with personal screenshots that I took while adding style rule:
Here is how the font color initially looked: #494949
For this example, I began by un-checking the initial CSS style color: #494949
I clicked right after the semicolon or ; after background: #FFF; and pressed enter. It put me on a new line as you can see in the picture below.
I entered color: #FFF; and it automatically applied it to the webpage. (You can also press enter after you are done writing the style rule.)
Here is the result:
Or you could also click the New Rule button shown below :)
I don't now is this can help you but theres is an answer about safari 6.x here
how do you apply style rule in safari web inspector
I haven't tested, i use elementary :D
in resume
First choose the {} brackets icon in the right sidebar
From the DOM model in the center white area of the web inspector- Click to select the HTML element you wish to view styles of. ( they will display in the right style sidebar )
On the right style sidebar: double click the closing brace on the existing style for the selector you wish to edit.
OR
Double click the open area beneath the "Style Attribute" drop down in that same sidebar to add your own styles to that particular element
If you need to change CSS digit value, for example you need to tune width or margin - use Alt + arrow up/down for 1px step or ALT + Shift + arrow up/down. Or you can just change the number with digits you need.
I am using javafx 2.2 for my desktop application.
The problem I am facing is that when I hover on the buttons some of the part of text gets hidden. The problem is only on some of the machines. Attached is a screenshot of the save button. The text (Save) gets hidden when I focus or hover on the button.
I tried removing the button: hover CSS but now when I click on it, then I get the issue.
I tried removing the button: hover CSS but now when I click on it,
then I get the issue.
Its hard to diagnose the cause with no code provided, however given that by removing the hover styling you removed the behaviour on hover, have you also tried removing the :focus and :active classes? These are typically assigned during a click event.
What you may also want to do is take the hover class you removed, look at the properties and remove each one at a time to find the culprit- if this doesnt work there is likely some other runtime manipulation of the element happening, it'll be impossible to chase up without code unfortunately.
I've been experiencing a strange issue.
I've made these buttons using div tags, they have rounded edges and the color of their borders is defined in CSS. To make them point to somewhere I surrounded them with <a> tags. The problem is, when the link points to something previously visited, the divs border turns white. Normally, I'd just inspect the element in Chrome to see which CSS rule does that but as soon as I navigate to that element, the border fixes itself to the color it's supposed to be.
This happens in Chrome but not in IE or Firefox.
Also, I'm using Joomla 1.5 and Artisteer to make the template (although I did modify it a lot).
As a temporary solution I used onclick JavaScript linkage to make the button work but I don't think that would go too well with search engine crawlers.
Do you have any ideas what could be wrong?
In chrome developer tool you have options to view elements on hover etc. If you haven't assigned styles for a:active, a:visited etc you should. If you'd like more help please post your code into jsfiddle