We've got a site wide style sheet that's setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associated with the ui-icon-trash CSS class is not being displayed because the a:link background property overrules it.
I could apply the same styles ui-icon-trash uses to the link in question but that will be fragile if the jqueryui theme were ever to be updated in the future. Is there a way I can get the jqueryio icons to display at the same time as having a site wide background:transparent property on a:link?
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<style>
a:link {
text-decoration: underline;
color: #066E37;
background: transparent;
}
</style>
</head>
<body>
<a class="ui-icon ui-icon-trash" href="#"></a>
</body>
</html>
I don't see a real solution there, but I can offer two hacks:
Put an additional <span> inside the <a> and apply the css to this element.
Don't use <a> but <button> instead. Drawback: this would require additional javascript to make the button work.
If it is sufficient to override only the background color of your links, background-color: transparent instead of background: transparent could do the trick (but I guess you might have thought of that already).
Related
i want to change color of all my link on the page but it won't work on chrome, works fine on opera. i don't get what's going on can you help me make it work on every browser ??
a:link
{
color: rgb(255, 169, 73);
text-decoration: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lake Towada</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p>
some textOirase
some textthe mountainssome more text
</p>
</body>
Styling anchor links can be a bit tricky. There are several pseudo classes along with the basic a tag selector that can be used for styling that affect links based on their state.
/* newly added in the CSS selectors Level 4 specification */
:any-link, p :any-link{
color:black;
}
/* it is recommended to always have the pseudo classes it in this order */
:link{
color:blue;
}
:visited{
color:mediumvioletred;
}
:hover{
color:mediumaquamarine;
}
:active{
color:green;
}
/* lowest specificity, so it will not be applied */
a{
color:green;
}
<div>This link starts out blue.</div>
<div>This link *might* be violetred in your browser.</div>
<div>So might this.</div>
<div class="special">Hovering will turn the links aquamarine.</div>
<p>This link is black in browsers that support the new pseudo class. It also won't have any hover effects.</p>
If you ever visited one of the links in your code snippet on your Chrome browser (but not Opera) it will have a different color.
Most likely one or two of the links in the code snippet I provided will already have a different color for you because you visited one of those sites in the past.
To achieve a consistent result, explicitely set both :link and :visited and be mindful of selector specificity.
You can use :any-link to achieve consistent results, which is effectively the same as :link,:visited but keep in mind that not all browser support this newer pseudo-class yet and it has the same base specificity, so it needs to be declared last (This is the reason why the rule in the code snippet is only applied to the last link).
I am creating a graphic user interface with a drop down menu filled with css styles (bold, italics, changing color of words, etc). The problem I am running into is when I apply these styles, it applies to the entire paragraph and not the individual words. How can I code it to recognized what is highlighted and applying the formatting specifically to that.
I would like to apply span to just the highlighted portion. How?
Ex:
<style>
.red {
color: red;
}
</style>
<body>
<p>This <span class="red">is a</span> test.</p>
</body>
This is the only way I know of to apply span but would like to learn how to have it apply to what the user highlighted. Is there code that detects what user highlighted?
Edit: The goal is to highlight, apply a css style to what is highlighted, remove highlight and style is still there.
I think you are looking for ::selection
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
::selection {
background: cyan;
}
Some text
If you want to highlight only the span.red, use the ::selection pseudo-element like so:
span.red::selection { background-color: red }
<p>Hello, <span class="red">RED HIGHLIGHT</span>!</p>
Try this out. It should work for you. We have an a span with an id bg-span on which we apply our styling.
<!DOCTYPE html>
<html>
<head>
<style>
#bg-span {
background-color: #f18973;
}
</style>
</head>
<body>
<p>Set a <span id="bg-span">background</span> color for only a part of a text.</p>
</body>
</html>
I searched and found one solution to get selected/highlighted text by JavaScript and hide it.
You can use this solution and change code to wrap selected text with span and add selected class to that span.
JQuery selector for highlighted text
Good Luck
Specifaclly I just want to change this header by giving it's own, color, font, size, weight.etc
<div id="header">
<a href="google.com">
<h1>
<li>EXAMPLE LINK</li>
</h1>
</div>
Firstly, there are several errors in your HTML, which should be fixed first:
<div id="header">
<!-- needs a closing </a> tag and some text, as well as a full href -->
<!-- what is your reason for using an LI element here? -->
<h1><li>EXAMPLE LINK</li></h1>
</div>
As far as styling, you can use CSS, like so:
h1 {
color: red;
font-size: 5em;
text-decoration: underline;
}
/* etc. */
Search Google for basic CSS tutorials. Once you've decided which styles you would like to apply, simply save your text document as something like "style.css", and add a LINK element to the header of your HTML file (this will allow you to use it as an external stylesheet.):
<head>
<link rel="stylesheet" href="style.css" />
</head>
There are other methods for applying styles, such as inline styling, etc., but the above is one of the more typical ways of going about doing it.
Here are some resources to get you started:
w3schools CSS tutorial
CSS-Tricks
How to apply stylesheets
Here is a jsfiddle
You specify a stylesheet with:
<link href="<path>/site.css" rel="stylesheet" type="text/css" />
where <path> is the path to the stylesheet and Site.css is the name of your stylesheet. This is normally in <head>.
You do this either with an inline style or a style section in your page or in a style file.
I wasn't sure if you wanted to format the a as well. Also, I wasn't sure if you want to style the header div or h1. If you want to style h1, then replace #header with h1 in css.
Is there any reason why CSS declaration won't display in the browser?
Here's a sample of my CSS file:
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
When I do <font class=adv>hello</font>, it works a treat.
When I do <font class=earnings>hello</font>, the color specified for .earnings doesn't display in the browser.
The page is linked to the correct CSS file.
Chances are somewhere on your page you have a style whose specificity supersedes the .earnings (See this page). CSS is applied by a weight scale, so anything with a higher weight (calculated specificity) takes priority over what you think may be applied.
Best thing to do is use something like Firebug (firefox extension) or Chrome's inspector to see what style really is applied.
Example (And, by the way, CSS order is irrelevant)
<style>
/* what you think is applied */
.foo { color: red; }
/* What is being applied due to specificity */
#bar .foo { color: green; }
</style>
<span class="foo">.foo</span> <!-- color is red -->
<div id="bar">
<span class="foo">#bar .foo</span> <!-- color is actually green -->
</div>
Make sure to surround your parameter values with quotes. You also need to make sure your tags match up
<a class="adv">hello</a>
<font class="earnings">hello</font>
Finally, if you have multiple css parameters in .earnings you need to put a semi-colon after each one.
The last semicolon in a CSS declaration is optional, so that's not your problem.
Most likely you have other styling applied that has a higher precedence. The CSS precedence rules can be a bit weird; the most common stumbling point is that a highly specific declaration takes precedence over subsequent declarations that are less specific
Example from HTMLdog.com:
div p { color: red; }
p { color: blue; }
Using that stylesheet, any p elements within a div will be colored red, not blue.
What I really suggest you do is get a decent developer tools plugin for your browser (e.g. Firebug on Firefox) and look through the style tracing; it will tell you what is being overridden, and by what.
Add a semi-colon after your color line.
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
Also, you should be using double quotes around your classes in html, along with matching closing tags:
<font class="earnings">hello</font>
Your second font tag is getting parsed as inside your first one, and not showing up.
I'm not sure if you intend to close a font tag with an a tag, but the following code works just fine:
<html>
<head>
<title>CSS Color Example</title>
<style type="text/css">
.adv {color:red;}
.earnings {color:red;}
</style>
</head>
<body>
<div class=adv>hello</div>
<div class=earnings>hello</div>
</body>
</html>
With firebug, use the element inspector (because I do not remember that the semicolons and the quotes was obligatory in the class attribute) and try to see what other selectors are involving whith the class "earnings".
Can you put a jsfiddle example of your problem?
I want my submit buttons + links to look as buttons and the same in all browsers.
Firefox 3.5 plays nice. But IE6,7,8 have all different looks. Can you help me with that (apparently) simple task?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Crossbrowser css submit button, links</title>
<style type="text/css">
button {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
input {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
a {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
text-decoration:none;
}
</style>
</head>
<body>
Buy now
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
You can replace the Submit button with an image the same way you do it with a background-image for a link. Simply get rid of the background and border, put the background-url in the input selector, and give it the right width and height.
input{
background-color: white;
border: 0;
background-image: url('blah.png');
}
For the button instead of type="submit" use type="image".
For instance:
<button type="image" src="path_to_your_image.png">Buy now</button>
For link you can use css to set the background of your link:
background-image: url('path_to_your_image.png');
I take it you do understand that you'll never get them to look exactly the same, since even in Firefox 3.5 they don't look exactly the same for me.
And apart from purely the style, they'll always have different behavior. For example, buttons will respond differently to tabbing or clicking (some browsers "depress" the text), buttons won't show the URL they point to in contrast with links, and you can select the text of a link, but not that of a button.
You can fix the most glaring differences on IE6 and 7 quite easily, though.
Add this to the CSS for your buttons (<button> and <input>):
overflow: visible;
You can put it inside a stylesheet for IE6/7 only, though this shouldn't affect any other browser, since visible is actually the default value. But for some reason this fixes the inconsistencies with the padding, compared to that for the link, on IE6 and IE7.
And add the following to the CSS for the link. All browsers need this, to make the link behave more like a block element, just like the buttons:
display: inline-block;
I know this is an old question, but I recently ran into this issue and didn't want to use any images in my layout. The solution I came up with (after making the links blocks, as others suggested) was to explicitly setup the borders, fonts, and background colors. To get the borders to match, set them individually. Originally I was trying to use outset borders, but I had better success using solid borders with specific colors for top, left, bottom, and right. (I chose the colors based on what firefox was using for its outset borders.) Hope this helps someone. Also, adding a border-radius to the links and buttons makes them a bit cleaner.
If you want a uniform appearance, you'll need to use an image submit button.
You could always use a JavaScript framework to replace the element with one that is more stylable or use MSIE's conditional comments for browser-specific styling.
Sad truth is cross-browser pixel perfection seems impossible with pure CSS and buttons.