If I add this CSS to the bottom of a page:
<style>
a:link {
font-weight: bold;
}
a:visited {
font-weight: normal;
}
</style>
I would expect it to make unvisited links (only) bold. But it's not.
Am I misunderstanding the purpose/use of these pseudo-classes?
Here's a full page example:
<!DOCTYPE html >
<html>
<head>
<style>
body {
font-size: 16pt;
}
a:link {
font-weight: bold;
}
a:visited {
font-weight: normal;
}
</style>
</head>
<body>
This link should not be bold
</body>
</html>
Making text bold changes its size. This moves everything around the page.
If you could stop links being bold when they became visited you could use JavaScript to measure their size or the position of things near them and determine if the user has visited that link or not.
This is an invasion of privacy (and has security implications as it could be used to tailor phishing attacks) and so it is forbidden.
See Privacy and the :visited selector.
Related
In the following example the color selectors in the <li> styles are not having an effect but the background-color and font-weight ones work just right.
If it isn't just operator-error but some subtle feature conflict I'd love to know where to find the reference for the next odd thing I trip over. I've tried removing the background-color and using the numeric value for the color.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- based on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements -->
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.2">
<style>
ul {
padding: 0;
}
li {
padding: 3px;
margin-bottom: 5px;
}
li:nth-of-type(even) {
background-color: #ccc;
color: darkred;
}
li:nth-of-type(odd) {
background-color: #eee;
}
li:hover {
font-weight: bold;
color: red;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>United Kingdom</li>
<li>Germany</li>
<li>Finland</li>
<li>Russia</li>
<li>Spain</li>
<li>Poland</li>
</ul>
</body>
</html>
You need to set the color on the anchor when it is hovered.
a:hover {
color: red;
text-decoration: underline;
}
Currently it's using the default color for anchors when hovered and red is not being inherited.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- based on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements -->
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.2">
<style>
ul {
padding: 0;
}
li {
padding: 3px;
margin-bottom: 5px;
}
li:nth-of-type(even) {
background-color: #ccc;
color: darkred;
}
li:nth-of-type(odd) {
background-color: #eee;
}
li:hover {
font-weight: bold;
}
a {
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>United Kingdom</li>
<li>Germany</li>
<li>Finland</li>
<li>Russia</li>
<li>Spain</li>
<li>Poland</li>
</ul>
</body>
</html>
FWIW, I'd switch from the HTML4 doctype to an HTML5 doctype.
<!DOCTYPE html>
It's because there are more specific rules that are overriding your styles on the li elements. Each browser has it's own set of default styles called "user agent styles", which are determined by the browser. There is a user agent style for anchor tag color, but there isn't one for font-weight. Because of this, the inherited value of font-weight is applied to your links on hover, but color is not. Any value that is inherited has a lower "specificity" than any other style (even the default user agent styles) that might be applied. As you can see from the image below, in chrome the color is set to -webkit-link. There is a similar style in all other major browsers.
To correct the issue, you need to apply your style directly to the anchor. You can do this with a rule for li:nth-of-type(even) a, a:hover (or li:hover a but I prefer to keep my :hover styles on an anchor only), et.al. The point is, you need the style to be on the anchor itself. Otherwise, it's just implicitly inherited and the browser will consider its own user agent styles to be the more specific ones.
Maybe try using hex colors instead of the way you have them typed?
you could try putting the styles inline on the list? ie.
try using applying the css to the a tags instead of to the li tag ie:
a:hover{
color:red;
};
try using the nth child selector instead of nth of type:
ul > *:nth-child(2n) <- for even
ul > *:nth-child(2n-1) <-for odd
I'm honestly not sure but I think something in the above should work. If not, please let me know and I'll try to help more.
Let me illustrate. Consider this :
<!DOCTYPE html>
<html>
<head>
<title>A page</title>
<link rel="stylesheet" href="mystylesheet.css">
</head>
<body>
<div id="title_div">
<h2>This title has style</h2>
</div>
<div id="content_div">
<h2>This is not styled.</h2>
</div>
</body>
</html>
Let's say I want to style the first h2 in my CSS stylesheet.
Which way is better ?
1:
redtext{
color: red;
}
italictext{
font-style: italic;
}
And then add the following attribute to the first div : class="redtext italictext"
Or 2:
#title_div h2{
color: red;
font-style: italic;
}
Personal but I would go for (if you need a uniform H2 through the site)
h2
{
color: red;
font-style: italic;
}
but the for you may need to integrate the other option for more custom parts of the site if you would like different H2 styles through the site.
However have you coincided using SASS sounds like it may be the answer for you.
I would use example #2 or change your html to by removing the surrounding div tag. The surrounding div tag seems to only be there to have a class.
<h2 class="title">This title has a style</h2>
And your css to
.title{
color: red;
font-style: italic;
}
The content <h2> should probably be an <h3> not an <h2> to keep the document structure clean.
I have read all relative answers on this site, as well as everywhere else on the www, but I still can't get my fonts to show up at all. Paths are right, files are in the right place, font squirrel example works...
This is on my PC, and everything else works (Paths, images, links...) according yo everything I have read and seen it should work, here is my code in the CSS file:
body {
background: url('mcontentback.jpg') repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin:0;
padding:0;
border:0;
width:100%;
height:100%;
min-width:497px;
text-align:center;
}
#font-face {
font-family: 'bahamasregular';
src: url('../fonts/bahamas-webfont.eot');
src: url('../fonts/bahamas-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bahamas-webfont.woff') format('woff'),
url('../fonts/bahamas-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size:100%;
}
#font-face {
font-family: 'bahamaslightregular';
src: url('../fonts/bahamaslight-webfont.eot');
src: url('../fonts/bahamaslight-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bahamaslight-webfont.woff') format('woff'),
url('../fonts/bahamaslight-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size:100%;
}
a {
color:#369;
}
a:hover {
color:#000;
background:#369;
text-decoration:underline;
}
h1, h2, h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
font-family: bahamasregular;
}
p {
color:#000;
margin:.4em 0 .8em 0;
padding:0;
font-family: bahamaslightregular;
}
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
.col1 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.fullpage {
min-height:1200px;
}
.fullpage .col1 {
width:96%;
left:2%;
}
img {
max-width:100%;
}
Here is my HTML5:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>Blaa blaa</title><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
<meta name="description" content="Blaa blaa">
<meta name="keywords" content="Blaa blaa">
<meta name="robots" content="index, follow">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../resourses/css/mcontent.css" media="screen"></head>
<body onload="parent.resizeIframe(document.body.scrollHeight)">
<div class="colmask fullpage">
<div class="col1">
<h1>Blaa blaa!</h1>
<p>Blaa blaa foo blah bla.</p>
<p>Blaa blaa foo blah bla!</p>
</div>
</div>
</body>
</html>
What on earth am I doing wrong? Tested in IE 11, Firefox 28 and Comodo Dragon (by Comodo) on windows7.
There too many brackets in your CSS code, which causes that the font-family isn't applied to any element or part of your webpage. And also, the quotes around the font-family are missing.
I think you should correct this part
h1, h2, h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
}
{
font-family: bahamasregular;
}
to this
h1, h2, h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
font-family: 'bahamasregular';
}
There's the same mistake in your CSS code for the p element
Check also this clear tutorial on #font-face for more info. Also, as Jukka pointed out, check if the font files are loading by using your browser's developer tools.
First, the problem was more than one problem: Why it did not work in IE is not 100% clear to me since I tried a few solutions before testing with IE, but MF82 pointed out something that may have solved it in IE. As for Firefox, it seems a lot of people have this problem. This pertains to a local PC, not a server! Here is what worked for me:
In Firefox Local documents have access to other local documents in the same directory and in sub directories, but not directory listings.
The setting "security.fileuri.strict_origin_policy" in Firefox's prefs.js file is responsible, read this: MozillaZene's description
As far as I can tell it is not entirely correct since moving the font files into the same directory as the css file, and changing the path statements in the css file appropriately still did not work, but changing the setting did solve the problem.
Here is how to change the setting "security.fileuri.strict_origin_policy": Editing prefs.js in Firefox Double clicking the setting will change its value from "False" to "True".
The drawback is that you open up Your filesystem to be traversed, so I recommended You reverse the process, once You know everything works, and only change the setting when You need to see the fonts and then change it back again. Maybe this will be fixed in a future version of Firefox.
I have a problem with my CSS, when I'm trying to make links on my page, another color, when you put the mouse over it. The problem is, that I have 2 pages, and it works in one, but I can't get it to work in the other one. I have no idea why it is not working? Anyone have any idea?
I'm using this:
<style type="text/css">
font-weight: {bold}
A:link {text-decoration: bold; font-weight:bold}
A:visited {text-decoration: bold; font-weight:bold}
A:hover {color: #F91B27; text-decoration: bold}
A:active {text-decoration: bold; font-weight:bold}
</style>
I agree with the first answer... "look at the path" however if that does not work I would suggest you perform a simple test (it has always helped me to do stuff separately) doing a simple test always works for me, look... you need to do this:
Create simple css file with just the code you want:
font-weight: {bold}
a:link {text-decoration: bold; font-weight:bold}
a:visited {text-decoration: bold; font-weight:bold}
a:hover {color: #F91B27; text-decoration: bold}
a:active {text-decoration: bold; font-weight:bold}
Create a test page "With Out" referencing this css:
Page Without CSS
Without CSS no css
Create a second page (this will be [page1].html) that will add the reference to your css file:
Comment 1: Please Note that myCss is the name of the css file you created
Comment 2: in the href you need to replace with the file's current location
http://www.w3schools.com/tags/att_link_href.asp
<html>
<head>
<title> Page Referencing Css </title> <link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body>
link one
</body>
</html>
Repeat step 3, but name the page different to create a second page ([page2].html)
Put all files inside a unique folder.
Now, perform a simple test by opening all files and determine if the css is applied to the tags or not.
If this worked, then compare this test to what you are doing in your current project.
Hope it helps!!!
I have a problem with positioning a text with an image using CSS. It works good in Firefox and IE but not in Safari. The image is placed left of the text and I want the text to be in the center of the image in vertical positioning. I'm using a custom font (MyriadProLight), using font-face.
This is how it looks in Safari:
http://oi52.tinypic.com/2eg5p8x.jpg
This is how I want it (and how it looks in Firefox and IE):
http://oi54.tinypic.com/1zg3xhx.jpg
HTML:
<!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" >
<head>
<title>Title</title>
<style>
#font-face {
font-family: 'MyriadProLight';
src: url('myriadpro-light-webfont.eot');
src: local('☺'), url('myriadpro-light-webfont.woff') format('woff'), url('myriadpro-light-webfont.ttf') format('truetype'), url('myriadpro-light-webfont.svg#webfontpR0gSEvM') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-size: 20pt;
font-family: "MyriadProLight", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
color: #333;
text-transform:uppercase;
line-height: 21pt;
font-weight: normal;
letter-spacing: 0px;
margin: 0px 0px 10px 0px;
padding: 0px;
}
.iconimage
{
margin-right: 7px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1><img class="iconimage" src="image.png" />This is the header</h1>
</body>
</html>
Not sure this adds anything, but if you view your page in Firefox and then use firebug to hunt down the element, you may notice that an #font-face web fonts are not lined up vertically in the centre of their line-heights. I don't know enough about fonts to know whether this is a font-file issue, but I did all my generation with font-squirrel, which people seem to think is the most reliable option.
WORKAROUNDS
My font ('Destroy') was lined up very heavily toward the bottom. So if I didn't include enough space for it, it looked chopped off at the bottom. Two solutions worked:
If your element is non-breaking: Make the line-height double the font-size.
If your element breaks: add padding to the bottom of the element equal to or slightly less than the font-size.
Obviously (or maybe not so, sorry), I'm dealing with headers and such. I have no idea if these would work with paragraphs or other multi-lined elements.
Positioning images inline with text is a messy business. I would move the image outside of your h1 tag and float it left, then tweak placement with margins. Something like this:
<img class="iconimage" src="mail.png" style="float:left; margin:10px" />
<h1>This is the header</h1>
Maybe it would be best to remove the img tag and do it in CSS alone:
h1 {
padding: 0 0 0 30px;
background: url(image.png) no-repeat left;
}