CSS/HTML Links not clicking/working

choc_pudding · 10-15-2011, 09:07 PM

Hello everyone!

I'm excited about joining this forum.

For some reason the links in the main body of the following code are not clickable nor are they underlining at mouseover. However, the links in my navigation and footer work perfectly. Please help!! Also, validator says there are problems with this code, but it does not list any problems in the area where my links are not working. I have bolded the CSS and the corresponding area in the HTML. please help!!! It's my first stylesheet!

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">
<html>
<head>
<title>CSS</title>
<style type="text/css">

.headerimg {
  position: absolute;
  left: 10px;
  top: 5px;
  background-image: url('/header.png');
  background-repeat: no-repeat;
  height: 250px;
  width: 1015px;
  text-indent: -9999px;
}


ul.navbar {
  display: inline;
  list-style-type: none;
  font-family: Aharoni;
  font-size: 1.3em;
  padding: 0px;
  margin: 0px:
  width: 1024px; 
  overflow: hidden;
  position: absolute;
  left: 40px;
  top: 275px;
}

ul.navbar li {
  display: inline;
  background: white;
  margin-right: 50px;
  margin-left: 0px;
  padding: 5px;
  width: 1024px;
}


a.two:link {color: #000000; text-decoration: none;}
a.two:visited {color: #ff0053; text-decoration: none;}
a.two:hover {color: #ff0053; background-color:black; padding: 5px; text-decoration:none;}

a.one:link {
    color: #ff0053;
    font-weight: bold;
    padding: 0px;
    text-decoration: none;
}

a.one:visited {
    color: black;
    font-weight: bold;
    background-color: #fff;
    padding: 0px;
    text-decoration: none; 
}

a.one:hover {
  color: #ff0053;
  font-weight: bold;
  padding: 0px;
  text-decoration: underline;
  cursor: default;
}

a.one:active {
  color: #000000;
  font-weight: bold;
  padding: 0px;
  text-decoration: none;
}

h1 {
  font-family: Aharoni;
  padding-top: 388px;
  padding-left: 0px;
  position: absolute;
  left: 5px;
  top: 5px;
  background-image: url('/header.png');
  background-repeat: no-repeat;
  height: 250px;
  width: 1015px;
  text-indent: -9999px;
}

h2 {
  font-family: Aharoni;
  padding-top: 338px;
  padding-left: 0px;
}

h3 {
  font-family: Aharoni;
  padding-top: 20px;
  padding-left: 0px;
}


body {
  padding-left: 40px;
  font-family: "Century Gothic", Tahoma;
  color: black;
  background-color: #fff; 
}


.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}


.footer, .push {
height: 10em;
background-color: black;
color: #ff0053;
font-family: "Century Gothic";
font-weight: bold;
font-size: 0.8em;
}

a.foot:link {color: #00bfbf; text-decoration: none;}
a.foot:visited {color: #00bfbf; text-decoration: none;}
a.foot:hover {color: #00bfbf; background-color:black; padding: 0px; text-decoration: underline;}

 ul.foot {
    list-style-type: none;
    padding-left: 10px;
    padding-top: 20px;
    margin: 0.6em;
    width: 9em;
    font-size: 0.8em;
}
 
  ul.foot li {
    background: black;
    margin: 0.5em;
    padding: 0em; 
    width: 182px;
    height: 15px;
}


</style>
</head>

<body>
<h1 class="headerimg"> text.</h1>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a class="two" href="http://blah.com">home</a></li>
<li><a class="two" href="http://blah.com">text</a></li>
<li><a class="two" href="http://blah.com">text</a></li>
<li><a class="two" href="http://blah.com">text</a></li>
<li><a class="two" href="http://blah.com">text</a></li>
<li><a class="two" href="http://blah.com">text</a></li>
</ul>
<div>
<!-- Main content -->
<h2>Welcome!</h2>

<p>text</p>

<p>text</p> 

<p>Check out our <a class="one" href="blah.com">text</a>.</p>

<h3>Check out our</h3>

Check out our super-cool 
<a class="one" href="http://blah.com">link text</a>

<p>Text
</p>
</div>
<div>
<div class="footer">
<ul class="foot">
  <li><a class="foot" href="http://blah.com">text</a></li>
  <li><a class="foot" href="http://blah.com">text</a></li>
  <li><a class="foot" href="http://blah.com">text</a></li>
  <li><a class="foot" href="http://blah.com">text</a></li>
  <li><a class="foot" href="http://blah.com">text</a></li>
</ul>
</div>
</body>
</html>

This is the error I get when I validate:

27 ul.navbar Parse Error 0px: width: 1024px;
34 Parse Error [: hidden; position: absolute; left: 40px; top: 275px; } ul.navbar li]

I'd really appreciate the help.

Thank you!

Excavator · 10-16-2011, 12:32 AM

Hello choc_pudding,
To illustrate what's happening, make the background of .headerimg red, like this -

Code:

.headerimg {
  position: absolute;
  left: 10px;
  top: 5px;
  background-image: url('/header.png');
  background-repeat: no-repeat;
  height: 250px;
  width: 1015px;
  text-indent: -9999px;
background: #f00;
}

When you do that you can see your absolute positioned element is covering your link.

tracknut · 10-16-2011, 12:39 AM

Quote:

Originally Posted by choc_pudding

ul.navbar {
display: inline;
list-style-type: none;
font-family: Aharoni;
font-size: 1.3em;
padding: 0px;
margin: 0px:
width: 1024px;
overflow: hidden;
position: absolute;
left: 40px;
top: 275px;
}

...and that is a colon, whereas it should be a semi-colon.

Dave

javanewbie7 · 10-16-2011, 12:59 AM

I add, be sure to run you css and html files through the W3schools validation to see if there are any errors.

http://jigsaw.w3.org/css-validator/

choc_pudding · 10-16-2011, 07:12 AM

Quote:

Originally Posted by Excavator

Hello choc_pudding,
To illustrate what's happening, make the background of .headerimg red, like this -

Code:

.headerimg {
  position: absolute;
  left: 10px;
  top: 5px;
  background-image: url('/header.png');
  background-repeat: no-repeat;
  height: 250px;
  width: 1015px;
  text-indent: -9999px;
background: #f00;
}

When you do that you can see your absolute positioned element is covering your link.

Thank you!!! I reduced the height and used the z-index to move it back. It's perfect now.

Hey Dav, thanks I did not notice that one.

Javanewbie, thanks. I'm already doing that.