Scootertaj
10-22-2004, 03:32 AM
Hey I'm kind've confused right now. I'm just messing around with HTML not on the internet just on notepad and came across a problem. When I put in the following HTML , the Menu and the items are normal links at first but when you hover over them, they change and take the values of the other links even when I have in my style sheet p.menu. Here's the html and the css.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</meta>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<h1> blah blah blah </h1>
<h2>blah blah blah</h2>
<p> this is a test</p>
<p><a href="http://www.codingforums.com"><b>CodingForums.com</b></a>-
Web coding and development forums. Visit <a href="http://www.codingforums.com">CodingForums</a> for help on JavaScript, PHP, CGI, XML, web building, and more.</p>
<p><a href="http://home.comcast.net/%7Etrampball/index.html>blah blah </a>
<p class ="menu">Menu<br>
Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br></p>
</body>
</html>
body {background-color: 3399FF
}
h1 {background-color: #0000f; text-align:center}
h2 {background-color: transparent}
p {background-color: transparent}
a:link {background-color: transparent}
a:visited {color:#333333; background-color: transparent;}
a:hover {color:yellow; background-color: transparent; text-
decoration:none;}
p.menu {font size: 9px; color: #F00;}
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</meta>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<h1> blah blah blah </h1>
<h2>blah blah blah</h2>
<p> this is a test</p>
<p><a href="http://www.codingforums.com"><b>CodingForums.com</b></a>-
Web coding and development forums. Visit <a href="http://www.codingforums.com">CodingForums</a> for help on JavaScript, PHP, CGI, XML, web building, and more.</p>
<p><a href="http://home.comcast.net/%7Etrampball/index.html>blah blah </a>
<p class ="menu">Menu<br>
Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br></p>
</body>
</html>
body {background-color: 3399FF
}
h1 {background-color: #0000f; text-align:center}
h2 {background-color: transparent}
p {background-color: transparent}
a:link {background-color: transparent}
a:visited {color:#333333; background-color: transparent;}
a:hover {color:yellow; background-color: transparent; text-
decoration:none;}
p.menu {font size: 9px; color: #F00;}