I'm having the weirdest most annoying issue with my web page. It's located at [2012sbc.com/demo][1]. If you click on the link for Promotional Material, then click on one of the downloads, then refresh the Promotional Materials page, it's using the a:visited, a:hover, and a:active properties from an entirely different div, the navigation.
I tried to set a whole new div for just the links on the page, and then those properties mess with my navigation!! I can't just like, set a class, then set another one, they interact with each other and I have no idea why. And of course, it's only happening in IE7.
Can someone check it out and tell me what I did wrong? I'm at a complete loss!!
edit:
Screenshot located: https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/screenshot.gif
And I personally don't care about IE7, but that's what our client uses and so I have to make it work.
2nd edit:
None of these things are helping, does anyone else have any suggestions?
There is no point in a:visited for main-menu. what if the user visited more than one item in the menu? you want to paint it as visited? it's a menu, not a normal link.
But, if you still want this behaviour then:
In the oneColFixCtrHdr.css you declared:
A:visited {
BACKGROUND-IMAGE: url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/darkredbar.jpg)
}
You should scope it like this:
.oneColFixCtrHdr #stripes UL A:visited {
BACKGROUND-IMAGE: url(https://trigger.lwcdirect.com/LWC_00486/uploadImages/2012sbc/darkredbar.jpg)
}
In order to apply it on your main-menu.
Try this,
.roundside a {color:#990000; font-weight:bold}
.roundside a:visited,
.roundside a:hover,
.roundside a:active{ color: #F00; font-weight:normal; }
Hope that help you :)
Related
I have a chapter-navigation table, with about 50 entries, shown in blue per web custom. The text turns red on a:hover, because the active area is the text rather than the entire <td> area (despite efforts to make the whole area work), and green briefly on a:active. This much is intentional and working.
However, browsers remembers all visits and set a color which overrides my CSS until I clear its history. Is there a way to keep the browsers from messing with my links?
You should follow this order.
a:link
a:visited
a:hover
a:active
If you write a:hover below a:visited, it will not work.
I am building a website for friends of mine and I stumbled upon a bug that I can't figure how to get rid of and I created an "About Us" section on the home page, and the "About Us" button in the header menu links to an anchor right above this section.
However, the hover effect for the "About Us" button is always triggered on the home page (screenshot bellow)
Hover_effect_bug
After inspecting the element, I figured that the bug might happen because of the "current_page_item" class (a default wordpress class), but I couldn't find why it would trigger the hover effect (here is what I could find about the class effects) :
.main-navigation li li.current_page_item a:hover,
.main-navigation li li.current_page_item a:focus,
{
color: #fff;
}
.navigation-top .current_page_item > a
{
color: #767676;
}
Any idea what causes this to happen ?
Thanks in advance for taking the time to read and answer if you can!
I wish you a pleasant day !
thank you for your answers, for some reason mail notification were disabled so I didn't see that you did ^^'.
I searched more, and I found out that my first hypothesis was wrong : it was the current-menu-item class that bugged. I simply disabled it and everything was fine. I still don't know the exact reason why it was a problem in the first place, however.
You can find a live version of the website here : www.euro-batim.fr
(the current-menu-item still exist in the style sheet, however, I turn it into commentaries). If anyone is interested, I can do some extra digging to find what exactly created the problem.
Have a nice day !
I have a "mega menu" that contains a .png that's supposed to hide after the user mouses off the menu. It works as expected in IE but not Chrome - it leaves the areas of the picture that hang out past the menu.
As per Sparkys suggestion, here's the JSFiddle
Here's a link to my development folder:
http://libertyeaglearms.com/dev/
here's a direct link to my css:
http://libertyeaglearms.com/dev/assets/menu.css
I think i t might have to do with line 6
.megaCreator a img{
display:block;
position:absolute;
bottom:-50px;
right:-50px;
max-width:550px;
outline:none;
border:none;
background:none;
}
but, I'm not sure.
If I need to post the code directly here I will, I'm not sure exactly where the problem lies so viewing all the css via the actual sheet, I feel ,would be better.
Here's a couple of screen shots showing the issue:
Here's the mouse over:
Here's the mouse out:
NOTE: I'm not using any javascript for the menu, in case the question comes up!
Thanks :)
HERE'S THE WORKING CODE -> JS FIDDLE
One of those rules is overwriting the overflow:
.megaMenu-fade > li.megaMenu-drop:hover > div,
.megaMenu-fade > li.megaMenu-drop:hover > ul,
.megaMenu-fade > li > ul li.megaMenu-drop:hover > ul,
.megaCreator > li.megaMenu-drop:hover > div,
.megaCreator > li.megaMenu-drop:hover > ul,
.megaCreator > li > ul li.megaMenu-drop:hover > ul
See:
I worked with it a lot and i find out that it has nothing to do with css as i change the "img" tag display to none (after the part image stayed on page), but it still stayed on. My guess would be it must be chrome graphic renderer problem that could not handle such a thing as sometimes it just disappears. my guess is it would be chrome's fault and not yours and as still as you don't put an element (like a div) over that image, the problem still exists.
Can someone help me figure out why my pull down menus (buildings, BV Mail) are showing up as being transparent on some of the pages and not the others.
The address is www.bv340.com.
Let me know if I can provide any more information.
Also, it doesn't seem to matter what browser, they all do the same thing.
I don't believe they are showing up as semi-transparent.
This is an issue with your z-index on the menu
Try adding the following to #p7menubar li ul:
#p7menubar li ul {
z-index: 1;
}
I am developing a website and everywhere i have this annoying problem... I wonder how other sites dont have this problem... any suggestion?
stackoverflow has this problem as i see...
http://inath.gr/ this site for example at the top menu although it has <a> tags there is no rectangle arround it when selected somehow..
CSS outline property:
You can turn it off with:
<style type = "text/css">
a {outline:0;} /*this is that dotted line you get when you select an image, I believe you're talking about the outline*/
a img {border:0;} /*Images in links default to having a blue border, so this could be the source of another annoying rectangle*/
</style>
The following is considered better because it allows users to still navigate by keyboard.
Here is a link explaining why:
http://people.opera.com/patrickl/experiments/keyboard/test
a:hover, a:active { outline: none; }