PDA

View Full Version : font-size disabeling text-decoration: none

shlagish
04-10-2004, 11:11 PM
Here is the pertinent code of the html document:


<!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" xml:lang="en" >
<head>
[...]Some unimportant code[/...]
<title>Jazz&amp;Justice</title>

<link rel="stylesheet" type="text/css" media="screen,projection" href="Style.css" />
[...]Some unimportant code[/...]

</head>
<body>

<div id="Container">
[...]Some unimportant code[/...]
<div id="footerLinks" class="noPrint">
<ul>
<li><a href="http://www.ucmtl.ca"><acronym title="Unitarian Church of Montreal">UCM</acronym>'s official website</a></li>
<li>:: <a href="largerText.html" id="largerText">Larger Text</a></li>
</ul>
</div>
</div>

</body>
</html>

The css file linked to this page is Style.css:

[...]Some unimportant code[/...]
a:focus, a:hover, a:active { text-decoration: none; }
[...]Some unimportant code[/...]
#footerLinks li { list-style-type: none; display: inline; position: relative; left: -20px; }
#largerText { font-size: 150%; }

The problem is: When I hover over the Larger Text link, the underline doesn't dissapear, it only shrinks by half the size... This problem doesn't occur if I take 'id="largerText"' out of the HTML. What's wrong?
By the way, if you see anything else that is not good about my page, please do tell me :)
shlagish
04-10-2004, 11:20 PM
http://www.angelfire.com/pro/shlagish/images/CFSS.bmp
and then on hover:
http://www.angelfire.com/pro/shlagish/images/CFSS2.bmp
(you can't see the mouse because it's a screenshot...)

I can't post a link since the site is not online..
shlagish
04-11-2004, 12:02 AM
Well, I just discovered something:

<!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" xml:lang="en" >
<head>
<style type="text/css">
a, a:visited { font-weight: bold; color: #990; }
a:focus, a:hover, a:active { text-decoration: none; }
.largerText { font-size: 150%; }
#footerLinks li { display: inline; }
</style>
</head>
<body>

<div id="Container">
<div id="Main">
<div>
</div>
</div>
<div id="footerLinks" class="noPrint">
<ul>
<li><a href="http://www.ucmtl.ca"><acronym title="Unitarian Church of Montreal">UCM</acronym>'s official website</a></li>
<li>:: <a href="largerText.html" class="largerText">Larger Text</a></li>
</ul>
</div>
</div>

</body>
</html>

This works.

But this:

<!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" xml:lang="en" >
<head>
<style type="text/css">
a, a:visited { font-weight: bold; color: #990; }
a:focus, a:hover, a:active { text-decoration: none; }
.largerText { font-size: 150%; }
#footerLinks li { display: inline; position: relative; }
</style>
</head>
<body>

<div id="Container">
<div id="Main">
<div>
</div>
</div>
<div id="footerLinks" class="noPrint">
<ul>
<li><a href="http://www.ucmtl.ca"><acronym title="Unitarian Church of Montreal">UCM</acronym>'s official website</a></li>
<li>:: <a href="largerText.html" class="largerText">Larger Text</a></li>
</ul>
</div>
</div>

</body>
</html>

doesn't.
The only difference is position: relative; ...
I really don't get it.