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
Related
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.
I'm having a problem with a floating div with href around it. The link works in FF but not in IE9. I'm hoping it's something simple but I'm left scratching my head. Easy points for someone!!
In any event, here's the page: http://www.insurancedepotdentalonline.com/
You will see at the bottom of the page it says 'For Health Insurance, Life Insurance or Medicare' and then a big red circle with Click. I have a div positioned over that red circle and a link around the div. It works in Firefox and Chrome but not in IE. Not sure why not.
For what it's worth, when I add a background to the div to see how big it is, the link works fine in IE. But when I remove it, the link disappears. It's like there's something wrong with the width.
Interesting... inspecting the structure through IE's developer tools (just press F12), the div inside the link seems to be in the right place, but the link is only working if you click a bit to its right...
-- edit --
Your "For-health-click-here" div is superimposing the link. You could either move its declaration to a place before the link (you'll have to readjust the link position too) or mess with it's z-index.
Not sure if this is the problem.. but putting block elements (div) inside inline elements (a) is invalid html and could be choking in IE?
See here for more details.
I have a div that on hover will change positioning on an image and toggle a div via css. The list uses upper-alpha for styling. This CSS works fine in every browser except IE. The issue that I'm having is that in IE, after hovering over the div, it changes to 0. from A, B, C, etc..
Here's an example in jfiddle:
http://jsfiddle.net/YALdD/
if this works for you, just put the letters in the lists and get rid of the upper-alpha style, like this: http://jsfiddle.net/mjgasner/6J6Nf/3
Here's the workaround that is mentioned from the link in the comment above:
http://jsfiddle.net/mjgasner/94tu4/1/
It clearly doesn't work.
AND
IE won't render those as animations, as they are not supported.
http://www.w3schools.com/css3/css3_animations.asp
You can animate the color change in all browsers (even IE6!) with jQuery UI:
http://jqueryui.com/demos/animate/
Here is the link to W3Schools: http://www.w3schools.com/cssref/pr_list-style-type.asp
You can see all browsers supported for certain element.
If you need something else let us know.
What version of IE are you using?
I've got myself multiple a tags floating on a page.
They have been styled in a unique way to center an image horizontally inside it, using a span and css. The a tag itself has fixed width and height.
I thought this was basic stuff, and my theme was causing the issue, but I've created a stripped down jsFiddle and I'm still getting the same problem when running the jsFiddle in IE 7.
The a tags are all click-able in every browser apart from IE7, why is this happening?
Can anyone explain? Thanks.
http://jsfiddle.net/motocomdigital/Qk9tu/6/ - Test click-able state in IE7, works fine everywhere else.
Don't worry about IE 6 - I'm not coding for this anymore.
On IE, a link element (<a></a>) with an empty attribute href doesn't display a link-cursor (hand).
Either put a # in your href attributes or add a cursor:pointer on a.home-module
It's the spans inside the a that cause the trouble...
You can achieve what you are trying to do with just CSS, but it requires a slightly different layout in your HTML and some extra CSS.
JSFiddle - http://jsfiddle.net/8E8um/2/
Note
In a.home-module I have added a transparent image. This is because IE7 will not assign an "empty" parameter (due to the negative text-indent) to the top level and would therefore still leave the link unclickable.
you should assign "#" to href attribute.
Try this: http://jsfiddle.net/Qk9tu/5/
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.