CSS Forum

**twilitegxa** · 12-16-2010, 11:08 PM

Can someone take a look at my code and tell me why the top row of read more buttons are not clickable? The second row is, but now the first row. What have I done wrong? Something with my CSS I think. Here is my page and CSS:

HTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A1 Quality Corp - Home</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="page-wrap">
<a href="index.html" title="A1 Quality Corp"><div id="logo"></div><!-- END LOGO --></a>
<ul id="nav">
<li><a href="index.html" title="Home"><img src="images/home_selected.png" alt="Home" /></a></li>
<li><a href="about.html" title="About Us"><img src="images/about.png" alt="About Us" /></a></li>
<li><a href="services.html" title="Services"><img src="images/services.png" alt="Services" /></a></li>
<li><a href="contact.html" title="Contact"><img src="images/contact.png" alt="Contact" /></a></li>
</ul><!-- END NAV -->
<div id="headline-img"><a href="about.html" title="Learn More"><img src="images/learn-more.jpg" alt="Learn More" /></a></div><!-- END HEADLINE-IMG -->
<ul id="boxes">
<li><img src="images/box1.png" /></li>
<li><img src="images/box2.png" /></li>
<li><img src="images/box3.png" /></li>
</ul>
<ul id="boxes-title">
<li><img src="images/water-damage.png" /></li>
<li class="mold"><img src="images/mold.png" /></li>
<li class="fire"><img src="images/fire.png" /></li>
</ul>
<ul id="boxes-images">
<li><img src="images/Picture017.jpg" /></li>
<li><img src="images/Mold-Damage.jpg" /></li>
<li><img src="images/fire3.jpg" /></li>
</ul><!-- END BOXES-IMAGES -->
<ul id="boxes-par">
<li><p>Whether you live in an apartment, a residential home or a condominium, the possibility of water damage is very real. Even offices and commercial buildings are subject to water damage, especially damage due to faulty pipes, leakages or flooding.</p></li>
<li><p class="mold">Water damage is a major cause for concern in any household or building. Water damage does not occur only as a result of floods or heavy rain, but also due to seemingly innocuous problems such as a simple leak in a pipe.</p></li>
<li><p class="fire">Smoke is simply fuel that did not burn, made visible by the presence of small particles of carbon and other material. Complete combustion gives off light, heat, the gas carbon dioxide, and water vapor.</p></li>
</ul><!-- END BOXES-PAR -->
<ul id="boxes-buttons">
<li><a href="water-damage.html" title="Read More"><img src="images/read_more1.png" alt="Read More" /></a></li>
<li><a href="water-damage-mold.html" title="Read More"><img src="images/read_more1.png" alt="Read More" class="mold" /></a></li>
<li><a href="smoke-damage-restoration.html" title="Read More"><img src="images/read_more1.png" alt="Read More" class="fire" /></a></li>
</ul><!-- END BOXES-BUTTONS -->
<ul id="boxes2">
<li><img src="images/box1.png" /></li>
<li><img src="images/box2.png" /></li>
<li><img src="images/box3.png" /></li>
</ul><!-- END BOXES2 -->
<ul id="boxes-title2">
<li><img src="images/flood-hurricane.png" /></li>
<li class="mold"><img src="images/pipe-leaks.png" /></li>
<li class="fire"><img src="images/carpet-cleaning.png" /></li>
</ul><!-- END BOXES-TITLE2 -->
<ul id="boxes-images2">
<li><img src="images/flood-hurricane.jpg" /></li>
<li><img src="images/pipe-leaks.jpg" /></li>
<li><img src="images/carpet-cleaning-service.jpg" /></li>
</ul><!-- END BOXES-IMAGES2 -->
<ul id="boxes-par2">
<li><p>Science is amazing, isn’t it? For instance, science can help you to achieve a seemingly impossible task. Things that were considered science fiction in the past are a reality today. Still, in some ways, science is no match for nature.</p></li>
<li><p class="mold">Water damage cleanup must be undertaken immediately when floods, faulty pipes or water leaks afflict your home or office. Such water-related catastrophes can cause extensive damage to furnishings and flooring, particularly carpeting.</p></li>
<li><p class="fire">Carpets are perhaps the most aesthetically important objects that you can add to your apartment. Carpets come in many varieties and a wide range of prices, from cheap to very expensive.</p></li>
</ul><!-- END BOXES-PAR2 -->
<ul id="boxes-buttons2">
<li><a href="water-damage.html" title="Read More"><img src="images/read_more1.png" alt="Read More" /></a></li>
<li><a href="water-damage-mold.html" title="Read More"><img src="images/read_more1.png" alt="Read More" class="mold" /></a></li>
<li><a href="smoke-damage-restoration.html" title="Read More"><img src="images/read_more1.png" alt="Read More" class="fire" /></a></li>
</ul><!-- END BOXES-BUTTONS2 -->
</div><!-- END PAGE-WRAP -->
<div id="red-back"></div><!-- END RED_BACK -->
<div id="red-back2"></div><!-- END RED_BACK -->
<div id="sponsors"><img src="images/sponsors.png" alt="Sponsors" class="sponsors-img" /></div><!-- END SPONSORS -->
<div id="sponsors-back"></div><!-- END SPONSORS-BACK -->
<div id="footer"><a href="http://www.erowebcom.com/" title="EroWebCom" target="_blank">EroWebCom</a> &copy; 2010. <a href="#">Privacy Policy</a>.</div><!-- END FOOTER -->
</body>
</html>

Code:

* {
margin: 0;
padding: 0;
}
body {
background: #000000;
color: #FFFFFF;
font-size: 62.5%;
font-family: Helvetica, sans-serif;
}
div#page-wrap {
width: 800px;
margin: 0 auto;
}
ul#nav {
height:504px;
width:780px;
background: url(images/main-img.jpg) no-repeat;
}
img {
border: none;
}
ul#nav li a {
display: block;
float: left;
width: 73px;
margin-left: 14px;
margin-bottom: 10px;
}
ul#nav li {
list-style: none;
margin-left: 420px;
}
div#headline-img {
margin-top: -215px;
width: 125px;
height: 24px;
margin-left: 552px;
}
div#red-back {
background: url(images/red-back.png) repeat-x;
height: 335px;
margin-top: 200px;
margin-left: -3px;
}
div#main-back {
background: url(images/main_back.png) repeat;
height: 650px;
margin-top: 200px;
}
div#main-content {
width: 780px;
height: 650px;
float: left;
background: url(images/left-col_back.png) repeat;
}
div#footer {
padding: 25px;
width: 780px;
margin: 0 auto;
text-align: center;
}
div#footer a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
div#footer a:hover {
color: #fa4f22;
}
div#left-col {
height: 625px;
width: 530px;
padding: 10px;
float:left;
}
div#left-col p {
padding: 10px;
font-size: 1.5em;
}
div#right-col {
padding: 10px;
float: right;
background: url(images/right-col_back.png) repeat;
width: 195px;
}
div#right-col p {
padding-bottom: 15px;
}
div#right-col p span.heading {
color: #fa4f22;
text-transform: uppercase;
}
div#left-col table#services td a {
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
}
div#left-col table#services td a:hover {
color: #fa4f22;
}
div#left-col table#services td {
padding-left: 10px;
padding-bottom: 25px;
padding-top: 10px;
font-size: 1.5em;
}
div#left-col a {
color: #ffffff;

}
div#left-col a:hover {
color: #fa4f22;
}
div#left-col form#contact {
font-weight: bold;
font-size: 1.2em;
}
div#left-col table#contactForm td {
padding-left: 10px;
padding-bottom: 10px;
}
div#left-col div#googleMap {
float: left;
margin-top: 25px;
}
div#left-col div#contactForm {
float: right;
height: 190px;
margin-top: 25px;
}
div#left-col table#contact td {
padding-top: 10px;
font-size: 1.5em;
}
div#right-col img.latest_button {
position: absolute;
margin-left: 90px;
margin-top: -40px;
}
div#sponsors-back {
background: url(images/sponsor_back.png) repeat;
height: 63px;
margin-top: -63px;
}
div#sponsors {
margin: 0 auto;
width: 808px;
}
div#red-back2 {
background: url(images/red-back.png) repeat-x;
height: 335px;
margin-top: 0px;
margin-left: -3px;
}
ul#boxes li {
list-style: none;
float: left;
margin-top: 200px;
}
ul#boxes-title li {
float: left;
list-style: none;
width: 236px;
margin-top: 210px;
}
ul#boxes2 li {
list-style: none;
float: left;
margin-top: 0px;
}
ul#boxes-title2 li {
float: left;
list-style: none;
width: 236px;
margin-top: 550px;
}
ul#boxes-title {
width: 780px;
position: absolute;
margin-left: 15px;
}
ul#boxes-title li.fire {
margin-left: 40px;
}
ul#boxes-title li.mold {
margin-left: 10px;
}
ul#boxes-title2 {
width: 780px;
position: absolute;
margin-left: 15px;
}
ul#boxes-title2 li.fire {
margin-left: 40px;
}
ul#boxes-title2 li.mold {
margin-left: 10px;
}
ul#boxes-par li {
float: left;
list-style: none;
width: 230px;
margin-top: 420px;
margin-left: 30px;
}
ul#boxes-par {
width: 780px;
position: absolute;
margin-left: 0px;
margin-left: -10px;
}
ul#boxes-par2 li {
float: left;
list-style: none;
width: 230px;
margin-top: 760px;
margin-left: 30px;
}
ul#boxes-par2 {
width: 780px;
position: absolute;
margin-left: 0px;
margin-left: -10px;
}
ul#boxes-images li {
float: left;
list-style: none;
width: 230px;
margin-top: 260px;
margin-left: 30px;
}
ul#boxes-images {
width: 780px;
position: absolute;
margin-left: 0px;
margin-left: -15px;
}
ul#boxes-images2 li {
float: left;
list-style: none;
width: 230px;
margin-top: 600px;
margin-left: 30px;
}
ul#boxes-images2 {
width: 780px;
position: absolute;
margin-left: 0px;
margin-left: -15px;
}
ul#boxes-buttons li {
float: left;
list-style: none;
width: 85px;
margin-top: 490px;
margin-left: 150px;
}
ul#boxes-buttons {
width: 780px;
position: absolute;
margin-left: 0px;
margin-left: 0px;
}
ul#boxes-buttons2 li {
float: left;
list-style: none;
width: 85px;
margin-top: 825px;
margin-left: 150px;
}
ul#boxes-buttons2 {
width: 780px;
position: absolute;
margin-left: 0px;
margin-left: 0px;
}
ul#boxes-buttons li img.mold {
margin-left: 25px;
}
ul#boxes-buttons li img.fire {
margin-left: 50px;
}
ul#boxes-buttons2 li img.mold {
margin-left: 25px;
}
ul#boxes-buttons2 li img.fire {
margin-left: 50px;
}
div#main-content {
margin-top: 200px;
}

**maheshadodis** · 12-16-2010, 11:31 PM

Hi,
Use cursor pointer two show hand symbol if you are given hyper link it should work is it redirecting to correct page??

**buggie** · 12-16-2010, 11:39 PM

i think that some element is over the hyperlink. That's why U can't click it.

**twilitegxa** · 12-16-2010, 11:51 PM

I think something is over it too. Is there an easy way to figure out what might be covering it?

**racer x** · 12-17-2010, 01:05 AM

Really hard without a link to look at.

You do have all these position absolute elements, yet I see no relative parent?

When you position something absolute, it is removed from the flow of the page. It will cover things and cause all kinds of problems if you do not fully understand them. Which might be the case here or you would not have a margin set. If it is positioned absolutely, you use top:5px; left:25px; etc. not margins.

Read http://www.barelyfitz.com/screencast...s/positioning/ for more help.

**twilitegxa** · 12-17-2010, 01:50 AM

I will try that suggestion and see if that helps. You're right, I still don't fully understand positioning. I'll check back after making the changes. Thanks.

**chrishirst** · 12-17-2010, 06:30 AM

Quote:

I still don't fully understand positioning

and that is a very good reason why you should NOT use positioning of any kind.

There is rarely a need to actually position elements unless you need to do something like this.

To really understand positioning, you first need to understand the document flow.

**twilitegxa** · 12-17-2010, 10:10 PM

What I needed to do was have a fixed width for my main content, then i needed to have some background images repeat across the page infinitely. Then, I needed to have some images used as a background within the fixed content area with other images and paragraphs of text on top of those background images, so I assumed the only way to do this really was to use positioning in some circumstances.

**buggie** · 12-18-2010, 01:25 PM

As i write before, Your hyperlinks are under other element.
Add z-index:9999; to Your ul#boxes-buttons ID, and it will work. But, IMHO U should write It by other way.

**LadynRed** · 12-18-2010, 05:55 PM

Quote:

I assumed the only way to do this really was to use positioning in some circumstances.

Absolutely not (no pun intended!). Nothing you outlined in what you want needs positioning at all. You can put background images on any containing element, including the body and even the html element (though I wouldn't do that).

**rswebs** · 01-04-2011, 11:08 PM

what is you URL? so we can take a look at whats going on.