Jump to content
Sign in to follow this  
jamiewalden

Visited Link Color

Recommended Posts

jamiewalden    1
jamiewalden

Hey guys, I'm having some issues with the visited link hover color on my drop down menu. It only happens in IE and Firefox. Here's a link to my site: http://blogstage.americandatanetwork.com Here's the custom code I am using on the dropdown:

 .sub-menu {
	font-color: #000 !important;
	text-shadow: #fff 0 1px 0;}
	
	.menu-item a{
	color: #555 !important;
	text-shadow: #fff 0 1px 0;}
	
	.menu-item a:hover{
	color: #000 !important;
	text-shadow: #fff 0 1px 0;}
	
	#primary-nav ul.sf-menu ul li {
	white-space: nowrap;
	width: 17em;
	padding: 3px;
	}
	
	#page #primary-nav ul.sf-menu ul li {
	border-top: 1px solid #fff;
	} 

For those of you without IE or Firefox, here's a link to a photo of when I click on the menu item: http://blogstage.americandatanetwork.com/wp-content/uploads/2011/11/Screen-shot-2011-10-31-at-8.36.31-PM.png And here's a link to a photo of when i hover just over the border of the visited link: http://blogstage.americandatanetwork.com/wp-content/uploads/2011/11/Screen-shot-2011-10-31-at-8.36.13-PM.png Thanks very much for you help. I not much of a coder, but I do love this theme! Cheers.

Share this post


Link to post
Share on other sites
catrina    103
catrina
What other Custom CSS do you have (other than what navigation code you posted above)? The white is coming from somewhere (either other CSS or a color setting).

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jamiewalden    1
jamiewalden
Here's all the custom code I've cobbled together. It may be kind of sloppy and perhaps in some places redundant. I'm not a coder. My apologies. Thanks for your help though. [code].pagelines{display:none;} .fbox{width:230px !important;margin-left:11px !important;} .fboxinfo{width:230px !important;} .fboxgraphic{width:230px !important;} .fbox .dcol-pad{padding:0px !important;padding-bottom:10px !important;} #boxes .content{width:960px !important;} .dcol_container_4{width:960px !important;float:left !important;} #fbox_745{margin-left:0px !important;} #fbox_742{margin-right:0px !important;} .fixed_width #branding .content-pad { padding: 0px 15px 15px 0px; } .fboxtitle{font-size:11px !important; color: #424242 !important; } #feature_slider .fcontent { text-shadow: none; } #feature_slider .fcontent a{ background: #ebebeb; color: #333333; border: 1px solid #ffffff; text-shadow: #fff 0 1px 0; } #feature_slider .fcontent a:hover{ background: #ebebeb; color: #000000; border: 1px solid #ffffff; text-shadow: #fff 0 1px 0; } #feature_slider .fcontent a:active{ background: #ebebeb; color: #000000; border: 1px solid #ffffff; text-shadow: #fff 0 1px 0; } #feature a.pagelines-blink.black-blink:active .pagelines-blink-pad { background: #dadada; border: none; text-shadow: #fff 0 1px 0; } #feature_slider span.pagelines-blink-pad {border: 0px;} .banner_container .banner-area{ padding-bottom: 0; padding-top: 40px; border-bottom: 1px solid #e1e1e1; } div.highlight-area {margin-bottom: -30px;} div.banner_container {margin-top: -50px;} .banner-media img { vertical-align: bottom; } .sign-in { width: 200px !important; float: right; } .sub-menu { font-color: #000 !important; text-shadow: #fff 0 1px 0;} .menu-item a{ color: #555 !important; text-shadow: #fff 0 1px 0;} .menu-item a:hover{ color: #000 !important; text-shadow: #fff 0 1px 0;} #primary-nav ul.sf-menu ul li { white-space: nowrap; width: 17em; padding: 3px; } #page #primary-nav ul.sf-menu ul li { border-top: 1px solid #fff; } .splashsubhead { font-family: Georgia; font-size: 24px; font-style: italic; } .splashhead { font-family: Georgia; font-size: 38px; font-style: italic; } .splashcenter { font-family: Georgia; font-size: 24px; font-style: italic; text-align:center !important; } #banners .banner-content { font-size: 1.1em; line-height: 1.5em; } a.srp-widget-title-link { font-weight: bold; } h3.widget-title { color: #424242 !important;} /*#highlight .highlight-subhead { color: #999 !important;}*/ ul.sf-menu ul.sub-menu, ul.sf-menu ul.children { width:234px !important;} .videothumb { float: left; margin-right: 8px; border: 1px solid #eee; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 3px; vertical-align: middle; -moz-box-shadow:0 1px 3px #ddd; -webkit-box-shadow:0 1px 3px #ddd; } .videothumb:hover{ border: 1px solid #DDD; border-right: 1px solid #AAA; border-bottom: 1px solid #AAA; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.4); } .imagestyle { border: 1px solid #eee; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 5px; vertical-align: middle; -moz-box-shadow:0 1px 3px #ddd; -webkit-box-shadow:0 1px 3px #ddd; }[/code]

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi Jamie, From what I can see the cause is the padding in this code, when I changed it from 3px to 0px, the error was gone. [code] #primary-nav ul.sf-menu ul li { padding: 3px; white-space: nowrap; width: 17em; } [/code] It's quite difficult to change this on the fly, but try this and let me know if this resolves the issue: [code] .main-nav li.current-page-ancestor a:active, .main-nav li.current_page_item a:active, .main-nav li.current-page-ancestor ul a:active, .main-nav li.current_page_item ul a:active { background-color: #EFEFEF; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jamiewalden    1
jamiewalden
That does resolve the different color on the padding when hovering over it. But is there a better way to add some breathing room to the navs in the dropdown? That's why i added that padding. Also the white upon clicking still occurs. Thanks for your help. I appreciate it.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi Jamie, You could give this a try, remove the 3px padding you have and then have a play about with the padding in the code below: [code] ul.sf-menu ul li a { padding: 8px 15px 9px; } [/code] Let me know if this worked or not.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jamiewalden    1
jamiewalden
That did the trick! You are a gentleman and a scholar, Danny. Thanks, Catrina, for your help too. Cheers.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×