underline <a> tag when hovering - html

I want my <a> tag gets underlined when hovered. I have the following code, but it doesn't work.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<style type="text/css">
a.hover:hover {text-decoration: underline;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" style=" text-decoration:none; color:red" href="">Site Map</a>
</div>
</form>
</body>
</html>
This:
a:hover {text-decoration: underline;}
<a style=" text-decoration:none; color:red" href="">Site Map</a>
doesn't work either.
What should I do? What is the problem?

The style attribute is more specific than any selector, so it will always be applied last in the cascade (horrible !important rules not withstanding). Move the CSS to the stylesheet.
a.hover {
color: red;
text-decoration: none;
}
a.hover:hover {
text-decoration: underline;
}
(I also suggest a more semantic name for the class).

The inline style overrides the style on the page.
Remove the inline style and uses this:
<style type="text/css">
a {text-decoration: none;}
a:hover {text-decoration: underline;}
</style>
Also advise you not to use <style>, uses an external css file. Will greatly facilitate maintenance.

I think that you should write code like:
(Demo here: http://jsfiddle.net/BH7YH/)
<!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 runat="server">
<title></title>
<style type="text/css">
a {text-decoration: none; color:red}
a:hover {text-decoration: underline;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" href="">Site Map</a>
</div>
</form>
</body>
</html>

when you use hover you cannot use inline styles.
you have to write it like this:
<!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 runat="server">
<title></title>
<style type="text/css">
a.hover
{
text-decoration: none;
color:red
}
a.hover:hover
{
text-decoration: underline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" href="">Site Map</a>
</div>
</form>
</body>
</html>

This will work for you.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>ABC</title>
<style type="text/css">
a.hover {text-decoration: none; color: red;}
a.hover:hover {text-decoration: underline;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" href="">Site Map</a>
</div>
</form>
</body>
</html>
Read more about css specification.

This might help!
a.hover:link {text-decoration: none;}
a.hover:hover {text-decoration: underline;}

Related

Dreamweaver won't read the first css group of codes

I am having a slight difficulty with my Dreamweaver and CSS... Here is the code:
<!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>
<link href="myCss.css" rel="stylesheet" type="text/css" />\
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p id="paragraph">welcome!</p>
<button id="button"> Click here </button>
</body>
</html>
Here is my css codes
#charset "utf-8";
<style type="text/css">
#button{
font-style:italic;
font-color:red;}
#paragraph{
font-style:italic;}
</style>
My question is why is my #paragraph working and #button isn't working ?
Remove that charset declaration before your style tag, also change font-color to just color
http://jsfiddle.net/63GRZ/
<p id="paragraph">welcome!</p>
<button id="button"> Click here </button>
Here is my css codes
<style type="text/css">
#button{
font-style:italic;
color:red;}
#paragraph{
font-style:italic;}
</style>

Padding not 0 on float:right

I'm trying to make an image go ALL the way right on a DIV but it's not happening:\
<!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" />
<style>* { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:5px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;">#Testing<br />Logout</div>
<div style="clear:both;"></div></div>
</body>
</html>
Try that on say... http://htmledit.squarefree.com/ that and you'll see red is still visible on the right-hand side of the border when it should float all the way right.
<div style="float:right,margin-right:5px;">
margin-right:5px
Take off the margin-right:5px; on your inner DIV around the image.
<div style="float:right;">
Well the float has "margin-right:5px;" in its style attribute. That's causing a 5-pixel margin on the right... if you remove that, it will go all the way to the right.
You asked to make the image go all the way to the right on a div, but you didn't say which div. The img is already all the way to the right on its immediate parent, but that div is 5 pixels from the right of its parent ("login").
Setting the margin to 0 inside your image div gets the image all the way over.
<!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" />
<style>body { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:0px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;">#Testing<br />Logout</div>
<div style="clear:both;"></div></div>
</body>
</html>
Do like that:
<div id="login"><div style="float:right;padding-left:10px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>

Why won't this table disappear?

I want this table to disappear, but for some reason it won't. What is happening?
I am using IE8.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.test_table
{
display: none;
background: #fff000;
}
</style>
</head>
<body>
<table id="test_table">
<tr><td>test</td><td>teh4</td></tr>
<tr><td>te3st</td><td>t2eh4</td></tr>
<tr><td>tes4t</td><td>t2eh4</td></tr>
<tr><td>tes5t</td><td>t3eh4</td></tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.test_table
{
display: none;
background: #fff000;
}
</style>
</head>
<body>
<table class="test_table">
<tr><td>test</td><td>teh4</td></tr>
<tr><td>te3st</td><td>t2eh4</td></tr>
<tr><td>tes4t</td><td>t2eh4</td></tr>
<tr><td>tes5t</td><td>t3eh4</td></tr>
</table>
</body>
</html>
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
#test_table
{
display: none;
background: #fff000;
}
</style>
</head>
<body>
<table id="test_table">
<tr><td>test</td><td>teh4</td></tr>
<tr><td>te3st</td><td>t2eh4</td></tr>
<tr><td>tes4t</td><td>t2eh4</td></tr>
<tr><td>tes5t</td><td>t3eh4</td></tr>
</table>
</body>
</html>
either way will work.
You have given table the ID = test_table for ID use '#test_table' If you have given it a class then you will use '.test_table'
Your CSS selector is wrong. .test_table selects a table with class="test_table", but your own has an id instead of a class.
Fix it by either using class instead of id, or changing your selector to #test_table (# is the id selector).
test_table id defined as a class, bud in the table, it has no class, just id "test_table". This is cortect:
<table class="test_table">

CSS page-break-after and float not playing nicely?

If I have the following HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
</head>
<body>
<div style="page-break-after: always; float: left;">hello</div>
<div style="page-break-after: always; float: left;">there</div>
<div style="page-break-after: always; float: left;">bilbo</div>
<div style="page-break-after: always; float: left;">baggins</div>
</body>
</html>
I want one word to be printed on each page, with a page break after each one. (This is simplified code - in my actual web page, the floats are important.)
Firefox prints this fine, but both IE and Safari print them all on one page, ignoring the page breaks. Is this a bug in those browsers? Is there a better way to do this?
Thanks.
It is the floats that are messing it up for printing.
Do you need the floats there for printing? or are floats only needed for the web?
Why I am asking is you can have different CSS classes for different medias (print, screen)
http://www.w3.org/TR/CSS2/media.html
So your float can be on the screen media - which will show only for web. While you will want your page break only to show for print media.
Here is an example using the media: (note when referencing CSS you can choose media via an attribute )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
<style>
#media print {
.myDiv { page-break-after: always; }
}
#media screen {
.myDiv {float:left;}
}
</style>
</head>
<body>
<div class="myDiv">hello</div>
<div class="myDiv">there</div>
<div class="myDiv">bilbo</div>
<div class="myDiv">baggins</div>
</body>
</html>
Update:
Will this work for what you need? GIves you a 3x3 on each page when printing out. But on the screen it's a 3x6. Quick sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
<style>
.break
{
page-break-after: right;
width:700px;
clear:both;
}
.myDiv {
float:left;
width:200px;
height:100px;
background-color:blue;
margin:5px;
}
}
</style>
</head>
<body>
<div class="break">
<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>
<div class="myDiv">4</div>
<div class="myDiv">5</div>
<div class="myDiv">6</div>
<div class="myDiv">7</div>
<div class="myDiv">8</div>
<div class="myDiv">9</div>
</div>
<div class="break">
<div class="myDiv">11</div>
<div class="myDiv">22</div>
<div class="myDiv">33</div>
<div class="myDiv">44</div>
<div class="myDiv">55</div>
<div class="myDiv">66</div>
<div class="myDiv">77</div>
<div class="myDiv">88</div>
<div class="myDiv">99</div>
</div>
</body>
</html>

Div height not support

Div height is not support in below code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<style type="text/css">
.Footer{
background-color:red;
width:673px;
height:1px;
}
</style>
<title>Fist</title>
</head>
<body>
<div class="Footer"></div>
</body>
</body>
</html>
But its work below code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<style type="text/css">
.Footer{
background-color:red;
width:673px;
height:1px;
}
</style>
<title>Second</title>
</head>
<body>
<div class="Footer"></div>
</body>
</body>
</html>
How to set div height in 1st coding
why are you using 2 body tags??????????????
add < befor div tag
In first piece of code you have:
div class="Footer"></div>
which should be:
<div class="Footer"></div>
You also do not have a doctype set for your first example. I would suggest adding something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body>
div class="Footer"></div>
</body>
You can add < before div tag