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.
Related
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´m testing my newest design and there is one specific issue I cannot figure out.
It appears that a specifik element is triggering an opacity change when I hover the element.
According to my tests this only occurs in Firefox and IE. It doesn´t happen in Chrome.
My best guess is that this is happening due to some sort of browser specific CSS but I have not been able to locate any CSS on any of the elements that is causing this opacity change.
One of the problems is also that I normally use Chrome F12 when I need to spot source code issues and hover CSS effects are hard for me to locate in Firefox and Chrome.
Here is a link to my test-site where you can see the problem in Firefox and IE when you for instance open the accordeon tab "Vælg Stof Indvendig" and hover the images:
http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer
You have css that says the following: .product-field-display:hover { opacity: 0.5; }
Because the .product-field-display element is a span wrapping div's, Chrome is basically making it a non-element (height/width of 0 and no placement on the page). But Firefox is still reacting to it (I guess IE is too).
I can't see your site, but have you used a reset at the top of your CSS? This usually solves problems like this. Some browsers s=do weird things by default!
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
I am creating a css button using the following image...
This is the background of a table.. the text for the image goes inside td blocks.
You can see it in action here, please view source to see how it all works, css is in-lined.
css button link
Everything appears to be working great... but view it in IE and Firefox. You'll notice that for some reason there are line breaks in IE and not in Firefox. I want it to not have the line breaks, firefox style.
I know a lot of people will immediately say "Just add a DOCTYPE tag and all will be well!"
Unfortunately my use case is such that it has to work in I.E. quirks mode.
So..with that being a restriction.. any ideas?
Did you try to add "float:left;" to css class ".spriteTableButton" ? This can solve the problem of linebreak in no time.
I have a site where the background-image jumps up on hover state and I can't for the life of me find the specific css that does this.
I'm able to get to the "offending" link and give it a border and change the padding and margin. The problem is that firebug and chrome inspect does not show me what happens on the hover state.
So I want a way to see what additions to the normal css state happens on :hover.
Any pointers?
(P.S. IE 8 doesn't have this issue - ie no jumping of background image)
Try using the Inspect function in FireBug to focus in on the element in question. It will show you all related CSS, including any CSS that is related to :hover. You can also see in this way what changes happen to the elements CSS (and any other DOM attribute) when you hover your mouse.
In case the changes are coming from some JavaScript, try out the Visual Event bookmarklet. Activating it on the page will let you see all events that are tied to the element in question.