I always wondered how to get rid of the dotted border that covers active links right afer clicked.
I tried a:active { border:0;outline: none; } and it didn't work. I don't think that is a border, that's something chrome adds, also firefox and ie add it their own shape.
Any help would be truly appreciated.
my code :
<ul class="footer-links">
<li id="main" class="icon-bookmark">help</li>
<li class="icon-pencil">new topic</li>
<li class="icon-chat">contact</li>
<li class="icon-search">search</li>
<li class="icon-flag">report</li>
</ul>
My link if needed : http://dvforum.elegance-style.com
Screenshot:
Use the :focus class.
a:focus{ outline:none; }
You should however, consider adding alternative styles to this class, as purely disabling it will hinder usability.
Related
I am looking to make some CSS adaptions to this site:
www.cocoto.eu
I want to change the hover color of the main nav menu items (for example "Versandkosten").
Can anyone show me the code that i need to use to achieve that? cause i am not able to find it
Thanks and sorry for this beginner question.
<ul class="main-nav">
<li class="nav-item">
<a class="nav-link">ES24</a>
<a class="nav-link">Versandkosten</a>
</li>
</ul>
So here by using the following syntax : class1>class2>class3, you can style the link on hover as wanted.
.main-nav>.nav-item>.nav-link:hover {
color: red;
}
Check this link for details of different states of a link :
https://www.w3schools.com/css/css_link.asp
<a onMouseOver="this.style.color='#FF4223'"
onMouseOut="this.style.color='blue'"><u>Hower me</u></a><br>
.main-nav>.nav-item>.nav-link:hover {
color: yellow;
}
I'm trying to resolve a mystery. On chrome everything is good but in Safari when I hoover some element (circled in red) they are moving a bit.
This is only happening on the first hoover. The second time you do it nothing happens.
I tried to reproduce the situation here :
<nav class="cd-secondary-nav">
<ul class="has-magic-line">
<li id="all-events" class="active"><a>Tous</a></li>
<li id="week-events" class=""><a>Semaine</a></li>
<li id="weekend-events" class=""><a>Week-end</a></li>
<li id="recent-events" class="" style="position: relative;"><a>Nouveaux</a></li>
<li class="magic-line" style="transform: translateX(103.844px) scaleX(73.75);"></li>
</ul>
</nav>
https://jsfiddle.net/ykgjsfrh/1/ but it does work well even in Safari ...
Thank you for your help
Have you tried adding this to the li inside the nav in your css file:
li {
height: 100%;
text-align: center;
width: 100%;
}
I wasn't able to fully test this with a fresh reload in the browser. It looked like the problem might have been that the size of each <li> was different after you hovered the links in Safari, but I can be wrong.
I met the same issue, and it does need to put the height:100% in the style. But, we should put the height:100% into ul not li in this case.
Please help solve the problem, because my ideas have been exhausted...(
I have a :
<nav class="nav_editor" ng-show="status.editorMenuOn">
<ul class="menu_editor">
<li class=""><a ng-href="/articles/user/{{ status.userID }}">My Articles</a></li>
<li class="">Create Article</li>
<li class="">Comments</li>
</ul>
</nav>
And a CSS classes:
.menu_editor li a {
color: rgb(125,125,125);
font-size: 1.25vw;
margin-right: 20px;
text-decoration: none;
}
I want to make highlighting the item in the menu when this page is active (not pseudo ":active"), just when someone watching current page, for example "My Articles".
I have tried about 3 variants by CSS/HTML only, JavaScript and jQuery, but it is either not working properly or not working at all.
Please help solve this problem.
Thank you in advance!
When the myArticle page loads, just do jquery addClass method.
$(document).ready(function(){
//remove highlighted menu buttons on pageload
$(".menu_editor li").removeClass("activeMenuItem");
//add class only to the specific one
$(".foo").addClass("activeMenuItem");
});
I am facing interoperability issues in IE7 and Firefox. li elements height is somewhat more in IE than Firefox.
Here is the attached image for more clarity.
http://img225.imageshack.us/i/interop.jpg/
Code for html and CSS:
<ul class="sa-progress">
<li class="sa-progress-current"><span id="intro_idx" >Select VPN Type</span></li>
<li class="sa-progress-default"><span id="local_idx" >Local</span></li>
<li class="sa-progress-default"><span id="remote_idx" >Remote</span></li>
<li class="sa-progress-default"><span id="vpn_idx" >VPN</span></li>
<li class="sa-progress-default"><span id="remote_dyn_idx" >Remote Users</span></li>
<li class="sa-progress-default"><span id="traffic_idx" >Traffic Profile</span></li>
<li class="sa-progress-default"><span id="review_idx" >Review & Commit</span></li>
</ul>
ul.sa-progress {
color: #333333;
line-height: normal;
padding: 7px 0 10px 10px;
}
ul.sa-progress {
font-size: 12px;
}
Please let me know what am missing here.
Any help would be greatly appreciated.
Thanks
ul/li is one of the more common cross browser differences that crop up as they both have different interpretations of their default rules.
You should look into using a css reset sheet to start off with such as:
http://developer.yahoo.com/yui/3/cssreset/
This will apply consistent base rules to your formatting so that all browsers have a fair chance at matching.
Because you didn't start out with this reset stylesheet and then build your design on top of it you might find that applying it will make several other elements go a bit different when they react to the new defaults. I would say its better to fix these so they look right with the reset sheet and then you will have a consistent baseline to work from.
After that you still might have problems but from the css you have posted I think there are some more parts to it such as the double line spacing you have in some menu items.
If you are going to make these into menu items then a common way that I approach this kind of styling is to make the a tags display: block; and then work my spacings out from that. Try to keep your ul li stylings as lightweight as possible and work with other items you have (such as the container div for the menu and the anchor tags for the links).
I have a menu bar which uses the below code, when the title list items are clicked they call the showHide function to change the class of the inside list to one with display block instead of none.
On ie6 and ff it works fine, chrome opera etc etc. But on ie7 the inside list is render under the other elements in the main list. Everything i try seems to break on of the other browsers.
Any help much appreciated.
<ul id="FOOMENU" style="list-style-type: none; padding-left: 10px; text-decoration: none;">
<li class="navItemsHeader"><b>View by..</b></li>
<li>
<b><a style="text-decoration:none;" href="javascript:void(0);" onclick="showHide('foobarMenu');">foobar..</a></b>
</li>
<li id="foobarMenu" class="hideMenu">
<ul style="list-style-type:none; padding-left:10px; text-decoration:none; ">
<li>DYNAMIC LIST OF LINKS HERE.</li>
</ul>
</li>
I would get to grips with a javascript library like jQuery, as it will take care of all the cross-browser issues for you, and has such useful methods as toggle() to show and hide elements.
The jQuery code would be something like
$(".hideMenu").click(function() {
$(this+"> ul").toggle();
});
Also, if you wanted to hide previously shown submenus you would use this:
$(".hideMenu").click(function() {
$(".hideMenu > ul").hide();
$(this).children("ul").show();
});