When I look at WordPress coding as well as other sites. I mainly see a while lot of scripts and css styles that it drives me bonkers. Here is evidence of what I am getting at:
Ul.nav setup
ul {
/* some css */
}
ul.nav {
/* some css */
}
/* and the rest goes on about ul nav and hover events */
Vs simple css (in my honest opinion)
.nav {
/* some css */
}
.nav:hover {
/* some css */
}
What will the difference be in these methods and are they the correct format of css writing? And if it is possible. Why isn't every code simple and concise to load faster etc? How it's done on both versions are correct to make a link work. (To be assumed)
Thank you all for taking your time to help!
In the first example you can add style to everything in the ul tags, and everything in the ul tags with a class of nav. In the second example you are adding style to anything with the class nav, and anything with the class nav when someone hovers their mouse over the nav. If that makes sense :-)
I think that what you chose as evidence probably is somebody specifically naming their elements .nav
For me, it's better to have more specific classnames, but not too long. But then we're going into the hardest job in IT "naming things".
Giving your ul or nav the classname .nav is a bit redundant. So i disagree with your assessment there that it's simpler. If you have a vertical nav and a horizontal nav, then .nav would be more complicated to style.
It really depends on the project, the scope and the readability.
CSS validators frown at the first example (overqualified elements) , but for the records
ul.nav will inherit everything from the class of .nav.
How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?
The post is here: http://alexisexhibits.com/trade-show-preparation-checklist
The CSS I have for the style is:
.checklist {
list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}
I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.
The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:
.shortcodes ul li {
list-style: disc;
}
but I'm hesitant to change that as I don't want all ul li to change, just this specific one.
What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?
list-style-image should be applied to the <li> not the <ul>
Like this:
.checklist li{
list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}
EDIT #3, and finall:
Ok, so i actually made it happend. Idiotically, however. In case someone will need the same, i'll post a solution here:
What i've did is, basically defined the global style as below:
a:link,a:visited
{
color:#000000;
text-decoration:none;
}
a:hover,a:active
{
color:#000000;
text-decoration:none;
}
That was the very basic parameters i could insert at the global style. The next move is makin' the same inside the link and customize it for ur need as like as u want, hover, make sure u're doin' the copy of that customization of ur div, and insert the :hover thing into it, as following:
.some-div-cutomization
{
text-decoration:none!important;
blabla
}
.some-div-cutomization:hover
{
text-decoration:none!important;
blabla
edit if needed the hover function
}
That's about it. Have fun :)
I've got some source links, that i can't touch, even to insert the class element, so i would be able to change the style of the links, but i do need somehow to change they style.
So, let's say tag of this link would be [link][/link], so what i did is, put inside it div element with full customization and it's worked, however there's two moments:
1) I don't really know if it's may work properly on all browsers, 'cause i need it cross-browser version actually.
2) i can't get rid of the text-decoration line. i've tried text-decoration with none, and even mad a copy style of that specific div with :hover and put inside it text-decoration none, and still, it's not working.
Also, if there's some another trick to avoid such a thing, please share.
EDIT:
I've tried all below, didn't work as i wanted to. BUT, i've made it, but with very, very ugly coding, and i'm not sure it's goin' to work at all browsers:
I've inserted the link-element with underline none inside the one() i can't touch, so now it's link inside another link, witch very ugly.
[link-i-cant-touch]<div class="style_test"><a id="no-textdecoration" href="#">somecooltext</a></div>[/link-i-cant-touch]
.style_test
{
text-decoration:none!important;
font-family: 'qsc';
text-align:left;
padding-top:0px;
color:#000000;
}
#no-textdecoration{
text-decoration:none!important;
color:#000000;
}
#no-textdecoration:hover{
text-decoration:none!important;
color:#1982d1;
}
EDIT Num2
That didn't work as well, because the link is changed to the second one, so it's redirect for "#"... :/
Make sure you target the a tag for the text-decoration, rather than applying it to the div
.my-div-class a { text-decoration: none; }
I don't know what you did wrong, as you haven't posted any code.
But this is the correct way of removing text-decoration on links.
HTML:
Link with text decoration
<a id="no-textdecoration" href="#">Link without text decoration</a>
CSS:
#no-textdecoration {
text-decoration:none;
}
Output: (In image format)
JSFiddle demo: Removing text-decoration from a link
I have a custom cursor for an image map with a lot of hotspots. My cursor works fine in Firefox and Internet Explorer, but Safari returns the default one.
I used code found on other websites. My directory structure is:
index.php > css/main.css > css/images/pencil.cur
Here is my implementation (please note I need the same custom cursor for both normal and a, a:hover and a:visited states:
#gameScreen area, #gameScreen .wrapper, #gameScreen .wrapper a:hover, #gameScreen .wrapper a:visited {
cursor: url("images/rcspencil.cur"),url("css/images/rcspencil.cur"),default;
}
Any ideas?
Here's the most browser-compatible syntax I can think of. There might be a better one with browser hacks but I'd ignore it.
cursor: url(cursor.cur),url(cursor/cursor.cur),default;
I wouldn't think the quotations would prevent it from working, but try it without them. The only other thing I can think of is that your selectors are wrong, like the selectors you've got listed don't include the thing you're hovering over.
When we use Text Replacement using CSS and give a negative test-indent i.e. text-indent:-9999px. Then when we click on that link the Dotted line appears like in the sample image below. What's the solution for this?
For Remove outline for anchor tag
a {outline : none;}
Remove outline from image link
a img {outline : none;}
Remove border from image link
img {border : 0;}
You can use the CSS property "outline" and value of "none" on the anchor element.
a {
outline: none;
}
Hope that helps.
For Internet Explorer 9:
a:active, a:focus {
outline: none;
ie-dummy: expression(this.hideFocus=true);
}
Source: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a
Please note that the focus styles are there for a reason: if you decide to remove them, people who navigate via the keyboard only don't know what's in focus anymore, so you're hurting the accessibility of your website.
(Keeping them in place also helps power users that don't like to use their mouse)
There is the same border effect in Firefox and Internet Explorer (IE), it becomes visible when you click on some link.
This code will fix just IE:
a:active { outline: none; }.
And this one will fix both Firefox and IE:
:active, :focus { outline: none; -moz-outline-style: none; }
Last code should be added into your stylesheet, if you would like to remove the link borders from your site.
include this code in your style sheet
img {border : 0;}
a img {outline : none;}
I hope this is useful to some of you, it can be used to remove outline from links, images and flash and from MSIE 9:
a, a:hover, a:active, a:focus, a img, object, embed {
outline: none;
ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
}
The code below is able to hide image border:
img {
border: 0;
}
If you would like to support Firefox 3.6.8 but not Firefox 4... Clicking down on an input type=image can produce a dotted outline as well, to remove it in the old versions of firefox the following will do the trick:
input::-moz-focus-inner {
border: 0;
}
IE 9 doesn't allow in some cases to remove the dotted outline around links unless you include this meta tag between and in your pages:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
This is the latest one that works on Google Chrome
:link:focus, :visited:focus {outline: none;}
in order to Removing The Dotted Outline href link you can write in your css file:
a {
outline: 0;
}
If the solution above doesn't work for anyone. Give this a try as well
a {
box-shadow: none;
}
-moz-user-focus: ignore; in Gecko-based browsers (you may need !important, depending on how it's applied)
Use Like This for HTML 4.01
<img src="image.gif" border="0">
You can put overflow:hidden onto the property with the text indent, and that dotted line, that spans out of the page, will dissapear.
I've seen a couple of posts about removing outlines all together. Be careful when doing this as you could lower the accessibility of the site.
a:active { outline: none; }
I personally would use this attribute only, as if the :hover attribute has the same css properties it will prevent the outlines showing for people who are using the keyboard for navigation.
Hope this solves your problem.
I'm unsure if this is still an issue for this individual, but I know it can be a pain for many people in general. Granted, the above solutions will work in some instances, but if you are, for example, using a CMS like WordPress, and the outlines are being generated by either a plugin or theme, you will most likely not have this issue resolved, depending on how you are adding the CSS.
I'd suggest having a separate StyleSheet (for example, use 'Lazyest StyleSheet' plugin), and enter the following CSS within it to override the existing plugin (or theme)-forced style:
a:hover,a:active,a:link {
outline: 0 !important;
text-decoration: none !important;
}
Adding '!important' to the specific rule will make this a priority to generate even if the rule may be elsewhere (whether it's in a plugin, theme, etc.).
This helps save time when developing. Sure, you can dig for the original source, but when you're working on many projects, or need to perform updates (where your changes can be overridden [not suggested!]), or add new plugins or themes, this is the best recourse to save time.
Hope this helps...Peace!
I would bet most users aren't the type of user that use the keyboard as a navigation control. Is it then acceptable to annoy the majority of your users for a small group that prefers to use keyboard navigation? Short answer — depends on who your users are.
Also, I don't see this experience in the same way in Firefox and Safari. So this argument seems to be mostly for IE. It all really depends on your user base and their level of knowledge — how they use the site.
If you really want to know where you are and you are a keyboard user, you can always look at the status bar as you key through the site.
This works perfectly for me
a img {border:none;}
Any image that has a link will have a border around the image to help indicate it is a link with older browsers. Adding border="0" to your IMG HTML tag will prevent that picture from having a border around the image.
However, adding border="0" to every image would not only be time consuming it will also increase the file size and download time. If you don't want any of your images to have a border, create a CSS rule or CSS file that has the below code in it.
img { border-style: none; }
Yes we can use. CSS reset as a {outline:none} and also
a:focus, a:active {outline:none}
for the Best Practice in Resetting CSS, The Best Solution is using common :focus{outline:none} If you still have Best Option please Share