I'm a beginner, so if u know other solution tell me ;)
I want to make menu on my website look like this:
link / link / link / link / link
Menu is in so here's what I've made:
li:before {
content: "/";
}
li:first-of-type {
color: #FFF; /* I've made first "/" same color as background, so we don't see it */
}
There are some padding tags so it looks nice, but I want to make it simple to read for You.
In most browsers it looks fine, but of course older Internet Explorer doesn't support :first-of-type tag. How can I work it out, so the user don't see just the first slash?
li:first-child:before {
content: '';
}
The :first-child pseudo class is supported by IE7 and later.
Note that IE7 supports :first-child (with some caveats), but not until IE9 did it support its friend :last-child.
Also, to hide content added with content property, don't change the color to match the background color, as that is what I would call an ugly hack.
Instead, set its content to an empty string, like in the example above.
Related
Is there a way to reset visited and unvisited link colours to the browser default after they have been changed?
In my specific situation, I have a main style file containing:
a:link { color: black; }
a:visited { color: black; }
And I would like to have a few specific links rendered with the default colours.
EDIT: Here is a jsFiddle to play with. I would like a style for the default class that makes it match the browser default.
Edit:
Another way is avoiding the problem from the beginning. Give the special links you want to be with the default style a special class (let's call it .default), and instead of:
a:link { color: black; }
a:visited { color: black; }
Use the not pseudo class and write:
a:not(.default):link { color: black; }
a:not(.default):visited { color: black; }
Notice that this pseudo class doesn't work on IE 8 and lower. For them you can use a special CSS (I don't like it, but it'll work).
It is different for each browser.
What you would have to do is get a stylesheet from the browser you are trying to reset (Gecko, WebKit, or Trident) and make that the new default.
Source: Browsers' default CSS for HTML elements
What you're looking for is revert keyword, but it's not yet implemented in most browsers, currently only Safari supports it. The links to track the development per browser are listed in the Browser compatibility section on MDN.
Some day this should work everywhere:
a { color: red; }
a.reverted { color: revert; }
red <a class="reverted" href="#">default</a> red
But for now think about a workaround. The feature is just not there yet.
If that is the only css controlling your a tags then just remove those and that will take off any styling. You could also just change the color?? Like so...
a:link {color: blue;}
a:visited {color: purple;}
Nowadays we can do something like this:
<head>
<style>
:link { color: black; }
:visited { color: black; }
.default-color :link { color: LinkText; }
.default-color :visited { color: VisitedText; }
</style></head>
<body>
<a href='#'>link</a>,
<span class='default-color'>
<a href='#'>link</a></span></body>
The second link renders with default colours.
See: CSS Color Module § System Colors
You can only fiddle with the URL. Browsers record the URLs they've visited. If they're rendering a page, and a particular URL appears in that list, then url is colored as "visited".
You can't force a browser to treat a URL as visited, unless they've actually been there. But you CAN make a visited URL appear as "new" by adding something different to the url, so that it APPEARS new to the browser. e.g.
example.com/foo.php
example.com/foo.php?random=value
both point at the same script, but the browser will treat both as "different". If that random value changes each time, the the browser will effectively think each time it's a brand new url and color it as "new".
I guess one question to ask here is: why? Why would you want to do that in the first place? To my knowledge, there's no W3C standard delineating what default link colors should be, anyways. A value (such as default) for color wouldn't make sense at all, seeing as that the isn't a default value.
With that being said, the most logical way to go about this would to just style things yourself. I'm not sure what situation your in, but whatever the case is, I'm pretty sure you're doing something wrong if you're asking how to restore colors to the browser default. So, before I give you a rather dry solution, I'll ask: can you give us some context? In the case that you're making something like menu bar links and you don't want the same styling for those menu bar links to leak into your normal links, you should really be using some kind of container to select those links in.
Anyways, here comes that dry solution. Most browsers use blue for links, purple for visited links, and red for active links. So, something like the following would work for browsers that go by these colors (assuming that the user hasn't modified the browsers' styling sheet, in which case you may want to learn about that or use something like initial, examined in Itay's answer).
a:link, a { color: blue; }
a:visited { color: purple; }
a:active { color: red; }
enter code herea.class{
color:inherit;
}
Specifies that the color should be inherited from the parent element.
so if your body was color:blue; then followed by a.class{color:inherit} then those examples would be blue. at the same time, you could just use a.class:link{color:blue}. and another for when you visit the link.
Your best with just customizing classes of links of special interest and leaving the rest by default.
No, you cannot set any CSS property to the browser default if it has been changed (i.e., if there is any style sheet being applied that assigns a value to the property. This follows from basic principles of CSS.
So consider asking a different question. There are ways to limit the effect of CSS rules to specific elements, instead of e.g. preventing all links from looking like links.
Just style the ones you want to style by setting a class on them.
.class:link{}
.class:visited{}
Then leave the others default.
You can use this:
a {
color: inherit;
}
That will inherit, and as there is no other link color so the browser will give the link its own style!
I'm trying to set the selection color on our site [for browsers that support this; unsupported will get the system default; looking for CSS-only & won't implement JS for this].
The ::selection works fine (leaving out -moz for clarity here) on regular page text. However, I want the ::selection to also work on selected text within INPUT and TEXTAREA elements. The following works in Firefox (https://d3vv6lp55qjaqc.cloudfront.net/items/3f2m2S342i2a2V0z2C2W/Screen%20Shot%202013-08-21%20at%2012.34.54%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=c618e057) but does not work in webkit (chrome or safari), where I get the system-default light blue (https://d3vv6lp55qjaqc.cloudfront.net/items/1r2l1X1P2V3g031F152A/Screen%20Shot%202013-08-21%20at%2012.35.29%20PM.png?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=c886aa70):
::selection { background: #f7a494; }
input::selection { background: #f7a494; }
I've looked around for -webkit overrides but haven't been able to find the relevant property.
I have tested this on my Mac in Chrome 51.0.2704.103 and Safari 9.1.1(11601.6.17) and it seems this is no longer an issue. There is no need for input::selection like the OP has suggested, the code needed for this is:
::selection{
background: #f7a494;
}
::-moz-selection{
background: #f7a494;
}
If you are still having this issue try the following fiddle, if it works there may be something else in your code that is interfering with it.
https://jsfiddle.net/nLftpwjc/
Proof
bcz, WebKit follows the rgba instead of #123456
please try the following code:
input::selection { background:rgba(231,105,105,0.7) }
I have just been looking around for this and have noticed you can just use a :focus selector to define the focused input field CSS. Like this then:
input:focus { background: #f7a494; }
Hope this helps.
What does the star do? What is it called? For me it is some kind of wild card. What is it called so I can read about it?
#div {
*zoom: 1; /*this ... *
zoom : 1;
display: inline;
*display: inline; /*... and this, whats the difference? *
}
I know what this means (all elements):
* {
..css code
}
In simple words, its the key to target css on different IE browser versions. It can also be called as an CSS Hack.
#div {
*zoom: 1; /*Only works on IE7 and below*/
zoom : 1;
display: inline;
*display: inline; /*Only works on IE7 and below*/
}
Means this CSS works only on IE7 and below. It's kind of a hack we can use to apply CSS on IE7 and below.
Here is how to target IE6, IE7, and IE8 Uniquely
#div{
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
CLICK HERE if you want learn more about browser specific CSS.
star-property hack The IE family ignore the *, however, and apply the property without it.This hack is used in order to deliver style rules only to Internet Explorer 7 (and lower). It relies on a wrong DOM implementation that affects Explorer since 1997. According to the specifications, the actual root element of any well-formed (X)HTML document is the html element. Instead, Explorer 7 (and lower) considers the html element as wrapped in another unknown element.
*property: value
Although Internet Explorer 7 corrected its behavior when a property
name is prefixed with an underscore or a hyphen, other
non-alphanumeric character prefixes are treated as they were in IE6.
Therefore, if you add a non-alphanumeric character such as an asterisk
(*) immediately before a property name, the property will be applied
in IE and not in other browsers. Unlike with the hyphen and underscore
method, the CSS specification makes no reservations for the asterisk
as a prefix, so use of this hack could result in unexpected behavior
as the CSS specifications evolve.
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
In your context it seems to be the star hack. It does that property only applies in some versions of IE, depends of its use.
You could retrieve more info here.
What does the * in css? -> Selects all the elements after specified elements for eg. div.red *{color: red;} will result all color red after its class red even if you define the other color inside div.red hence you know * means ALL
See This Fiddle
* zoom: 1; -> here you have placed * at first, so this would hack IE only that is this type of style works only in IE and other browsers neglect this.
* it is called asterisk in simple language and in coding language this is called Universal Selector
I would like to apply a character to the end of some of my HREFs with CSS, and I found a way that works, but it applies the character to anchors as well. I don't want the character on my anchors. So far I can only get the property to apply to whole DIVs, I can't get it to stick to a simple class that I can selectively apply only to HREFs.
Here's what I have:
#sample a:after {
position: absolute; /* Prevent underline of arrow */
padding-left:2px; /* Add a little space between text and arrow */
content: "\00bb"; /* Unicode hex for » */
}
Any suggestions?
My DIVs do hold some link styling, will I need to move that? Example:
#sample a:hover {
color:#CCCCFF;
text-decoration:underline;
margin-top:20px;
}
My boss says: make all the links on the site have the character, except for the links we say should not have it. Of course he has no working example to show me.
Just use a[href] { this means target all anchor elements that have the href attribute set. More information can be found on the W3C specification.
Example.
HTML
link
<br />
<a id="anchor">anchor</a>
CSS
a[href]:after {
position: absolute; /* Prevent underline of arrow */
padding-left:2px; /* Add a little space between text and arrow */
content: "\00bb"; /* Unicode hex for » */
}
The most cross-browser way in general to refer to links in CSS is to use the :link and :visited pseudo-elements (representing unvisited and visited links, respectively) instead of the selector a:
#sample :link:after, #sample :visited:after
In this case, you can just as well use the simpler method of using an attribute selector, as you are using the :after pseudo-class too (and it has slightly less limited support than attribute selectors):
#sample a[href]:after
Simplest of all, do not use the a element for purposes other than links. The use of <a name=...> has been deprecated, in favor of using the id attribute on some natural element.
Addition: The question was also about preventing the arrow for selected links. This ca be implemented so that you indicate the selection using an attribute like class=noarrow on those links and add a CSS rule that sets the generated content to empty for them:
#sample :link.noarrow:after, #sample :visited.noarrow:after {
content: "";
}
This might be a better approach than using the :not(...) selector, due to issues in browser support. But on modern browsers, the following approach works, too: Instead of two rules, use just one rule that excludes the specific class:
#sample :not(.noarrow):link:after, #sample :not(.noarrow):visited:after {
content: "\00bb"; /* Unicode hex for » */
padding-left: 2px;
}
It’s a yet another question how to prevent the underlining of the arrow (the generated content). The trick used in the question does not seem to work on IE. Besides, it makes the arrow overlay text. I have no good answer to this issue, and I think it would best be discussed as a separate question (unless you can find it discussed in existing questions).
I'd add a class name to the anchors and over-write the declared CSS used on the links.
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