Visited links in IE 11 are showing up "inverted" with a dark blue background and a white foreground. I'm no CSS expert by any stretch, but my understanding is that this should cause visited and unvisited to look the same at all times.
a:link, a:visited {color: #034af3;}
Here is what it is doing (IE only)
That dark background is exactly the background-color of my ASP.Net Menu control. To get around this IE issue, I went to the .main definition in my CSS and forced the background-color to #ffffff for visited links.
.main a:visited {background-color: #ffffff;}
Everything seemed great until I looked at a page where I have AllowSorting set to "true" on my gridview. Now those links in the Header row have a white background, so by solving one issue with a hack I have created another issue.
Is there a way to block this "bluing" issue with IE and visited links?
========================
EDIT - Adding New Info:
I have changed the CSS for the navigation menu. I had originally set the "a item" (visited, hover, etc.) background color for each definition to #3a4f63, but spurred by Christoph's question below, changed those to "inherit" so, if I understand correctly, those now inherit from the hideSkiplink div which also has a background of #3a4f63. The menu still displays correctly, and this change also affected links in the body of the page. The result of that change is seen in the image below. So, clearly the definitions for my menu are affecting links in the main body of the page.
The forecolor is still inverted (almost white) but the backcolor is not being inverted to the dark blue.
Related
Thank you for taking the time to read this. I have tried every single CSS code under the sun to try change the rollover text on a woocommerce button "Continue Shopping" to white when the button is hovered (currently grey background and black text when hovered). Wordpress with Woocommerce setup.
https://www.charliecustards.co.uk/product/the-charlie-new-orleans-black-on-black-brogue-boot-in-calf-leather-suede/
To see real time simply add the shoe to the basket and you will see the "continue shopping button" on the next screen which I just can't get the rollover text correct on! Also see screenshots.
I tried everything to get hold of the button in the css and simply change it, but nothing would work. This was the last code i tried and don't understand why it won't work?!
a.button.wc-forward:hover {color: #ffffff !important;}
More annoyingly if I put a background colour change on the hover to test I have the right selection that does work and on hover the button turns red! So not sure why the background will change but the text wont?
a.button.wc-forward:hover {color: #ffffff !important;
background-color: red !important;}
So with this code the "continue shopping" button background changes to red but the text does still not change to white?
Help on this would be so appreciated, its driving me mad.I've tried every div, selector etc associated with the button and nothing will work. The code above was one of many but I think the closest due to the fact it will change the background colour on hover but not the text colour.
Thank you so much.
I can't answer specifically in the context of WooCommerce but the current CSS applying that style is:
.woocommerce-page .woocommerce-message a.button.wc-forward:hover {
color: #000000 !important;
}
So you can attempt to copy this.
There's a fairly nasty trick for increasing specificity of "identical" selectors by just duplicating a class name, so if you still find the above is getting overwritten try using
.woocommerce-page .woocommerce-message a.button.button.wc-forward:hover {
color: #000000 !important;
}
I'd recommend commenting this as it looks like a mistake to most people.
I am having some issues on my website with some CSS I can't get to work.
For some reason on some pages the sticky navigation text remains visible while on others it doesn't. I'm not a developer but would appreciate any tips people might have.
This page it looks correct:
https://ecoheatcool.co.uk/underfloor-heating/
This page is incorrect and you can see as you scroll the links disappear. (White on white)
https://ecoheatcool.co.uk/
I would appreciate any help, Thanks!
If you mean how the text is white on white when you scroll on the homepage, you could add CSS to your custom styling:
.fusion-is-sticky .fusion-main-menu>ul>li>a {
color: rgb(1,62,72);
}
The color is pulled from the background-color of the navbar, but you could change it to any brand color.
Well, upon scrolling, the navbar gets a few classes that give the links a white color. You can just remove these CSS selectors. In this css file remove the color attribute on line 3339 and on 3323. This should fix your problem.
Been battling with this for a few days - finally caving in and asking for help.
I'm experiencing a super weird issue in the Edge browser.
Here's the test site: http://edge22.com/test-edge/
When you hover over the menu items, a 1px line appears below the menu item you hovered. There's no border, text-decoration etc.. If the white header area is made black, the line is black etc..
It's like the height of the menu item is reducing by 1px only on hover: http://screencast.com/t/Lpkow3HF0
Now the weird part. This only happens when the element right before the navigation is a link (the "Test" link). If this link is removed, the glitch disappears.
Now if I wrap the link in a div and give it a small margin, the issue goes away:
<div style="margin-bottom:0.1em;">Link</div>
Does anyone have any idea what's going on? I've stripped all of the CSS down to nothing, and can't pinpoint the problem.
I'm not sure if it could fix your problem (as it's not available anymore), but it fixed mine... So for others looking for Edge artefacts that occur on hover ...
I had a somewhat similar issue where a line would appear totally without reason on some elements (and not on other elements using the same style on the same page).
In my case it damaged a menu bar under a fractionally sized image with great repeatability upon hover (and even when not hovering anymore the damage remained).
Simplest solution I found: add a border to the parent in the same color as the background that was damaged ; problem solved.
I have an issue using the slicknav responsive menu, if the navigation buttons have a different background colour set for the hover in the stylesheet, if you hover over the actual tag text the background colour changes correctly, but if you hover over any part of the button away from the text, then the colour behind the actual text doesn't change. So you get a rather ugly box around the text in the original colour. This is happening in all browsers tested.
I cannot find any way to stop this happening, the css file is not that complicated. I've used Slicknav now on a few sites and always had the same problem, but this time I really need to fix it.
You can see an example of this here: http://www.yorkluxuryholidays.co.uk/
In responsive mode, hover anywhere over one of the menu items that have sub menus, but not directly over the menu text itself, and the area behind the text does not change colour.
This is the css I'm using for the hover:
.slicknav_nav .slicknav_item:hover {
background:#59584e;
color:#fff; }
.slicknav_nav a:hover{
background:#59584e;
color:#fff;}
It seems to make no difference which class you set the colour on, either or both, the behaviour is exactly the same.
I'd love to know if there is a way to fix this with the css!
Add in your css :
.slicknav_nav a:hover * {
color:#fff;
background-color:#7b9fc7;
}
OK, sorry...this is kind of a basic CSS question but it's driving me crazy. I'm self-taught so I'm sure I am just missing something simple.
Site: http://notes.benadelt.com
The logo image sprite is just a home link...I'm trying to remove that background color that you can see is ruining the transparency of the image:
<a class="ben-logo" href="/"></a>
You can see that CSS gives any links in that section a light background-color, which is being applied to the image sprite as well. I'm trying to remove that background color from my image, but not from the body links, and cannot figure it out. Using dev tools I can only impact the style using:
header .words a { background: none; }
But that obviously removes the background from ALL links, so it also removes my image background in the sprite.
Figured there would be something I could add after the background URL to do this, such as:
background: url(http://www.benadelt.com/notes/wp-content/uploads/2013/04/Ben-Logo-Sprite.svg) none;
When you hover, it looks like I want it to look normally without that darn background-color.
Any help would be appreciated!
Ben
header .words a.ben-logo { background-color: transparent; }
The above code will target only the logo link. By setting the background colour to transparent, you leave the image itself (and all the other background properties!) intact.
Edit: One thing - I believe you already have transparent set on that background image by virtue of not specifying a colour (transparent is the default). What is probably happening in your case is that the a.ben-logo declaration comes before the .words a declaration in your stylesheet, so it's being overridden. The reason the above code should fix it is because the extra class names add more specificity. Here is Andy Clarke's specificity cheat sheet for you to peruse: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg