Hi there,
I have two div classes containing an image and text. Above it are two more divs with text and links. I want to say the bottom image/text area is covering the top link information. I can’t click on those links anymore. Any ideas?
<div id="column_right_adsense">
<h3 Facebook</h3>
Like Us <a href="http://www.facebook.com" target="_blank"><img src="assets/facebook.png" alt="Like us On Facebook!" width="16" height="16" align="absbottom" longdesc="http://www.facebook.com" /></a><br />
</div>
<div id="column_right">
<h3>Hours</h3>
Mon - Fri: xxxx am - xxxx pm<br />
Sat: xx <a href="appointments.html">Appointment</a><br />
Sun: xxxx - xxxx</div>
<div class="column_img">
<div class="column_img_txt"><br/>Text Text Text</div>
<a href="buysell.html"><img src="assets/buysell.gif" alt="we buy and sell cars!" /></a> </div>
@charset "UTF-8";
/* CSS Document */
/* ------------------------------
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0px; padding:0;
background-color: #1a728a;
background-image: url(bg-image.gif);
background-position: center top;
background-repeat: repeat-x;
width: 100%;
display: table;
}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{
font-size:18px;
line-height: 1px;
}
h1-italic{
font-size:18px;
line-height: 2px;
font-style:italic;
font-weight: bold;
}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}
h4{font-size:18px; line-height: 22px; color:#25276e}
a:link, a:visited{color:#25276e; text-decoration: none;}
a:hover{color:#4D4D4D;}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container{width:880px; margin:0 auto;}
#topbar{
width:auto;
display:block;
}
.t-h1 {
font-family:"Myriad Pro", Georgia, Verdana, Helvetica;
font-size:13px;
font-weight:400;
color:#25276e;
line-height: 16px;
}
.t-h2 {
font-size:18px;
font-weight:600;
color:#25276e;
}
bullet {color: #25276e; }
#spacertop{
height: 80px; width:auto; display:block;
}
#navbar{width:auto; display:block; height:28px; background-color:#f4f2de;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline; font-weight:bold; font-family:"Myriad Pro", Georgia, Verdana, Helvetica;
text-decoration:none; color:#4D4D4D;}
#navbar a:hover {
color: #25276e;
}
#content{
width:auto; display:block;
border: solid 1px #000;
padding: 20px;
}
#spacer{
height: 30px; width:auto; display:block;
}
#column_left{width:460px; margin-right:20px; float:left;}
#column_left para{
line-height:18px;
font-size:13px;
}
#column_right{
width:160px;
margin-right:20px;
float:left;
margin-left: 50px;
padding-bottom:40px;
}
#column_right_adsense{
width:120px;
float:left;
margin-left: 8px;
}
.column_img {
position: relative;
}
.column_img_txt {
position: absolute;
top: 150px;
* *left: 0;
right: 141px;
* *width: 100%;
font-size:15px;
color:#666666;
font-weight: bold;
}
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; height: 30px; display:block; padding:4px 0; font-size:11px; background-color:#f4f2de;}
#footer a { color: #000000; text-decoration: none;}
#footer a:hover {color: #25276e;}
#footer #copyright{
width: 250px;
position: absolute;
margin-left:20px;
margin-top: 5px;
}
#footer #smallnav {
width: 600px;
text-align: right;
color:#f4f2de;
margin-left: 250px;
margin-top: 16.5px;
position: absolute;
}
/* ------------------------------
CUSTOM CLASSES
------------------------------ */
/* Add here your custom classes ... */
sdt76
September 22, 2011, 5:29pm
2
Try closing the first <h3>
Hi there - just realized the typo. No luck though
sdt76
September 22, 2011, 5:53pm
4
That’s strange. It works for me in both Chrome and Firefox MacOS. It what browser does it not work for you?
I’m sorry - I should have been clearer. The link with the image works (column_img) but not the Facebook or Appointment links
sdt76
September 22, 2011, 6:28pm
6
You mean the Facebook image link and the appointment text link? Well for me the Facebook link was not working until the <h3> was fixed. Now both work for me in the browsers I mentioned. In fact all three links work for me as far as being functional. Here is the code I have. Is it still the same for you?
<!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>Untitled Document</title>
<style>
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0px; padding:0;
background-color: #1a728a;
background-image: url(bg-image.gif);
background-position: center top;
background-repeat: repeat-x;
width: 100%;
display: table;
}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{
font-size:18px;
line-height: 1px;
}
h1-italic{
font-size:18px;
line-height: 2px;
font-style:italic;
font-weight: bold;
}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}
h4{font-size:18px; line-height: 22px; color:#25276e}
a:link, a:visited{color:#25276e; text-decoration: none;}
a:hover{color:#4D4D4D;}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container{width:880px; margin:0 auto;}
#topbar{
width:auto;
display:block;
}
.t-h1 {
font-family:"Myriad Pro", Georgia, Verdana, Helvetica;
font-size:13px;
font-weight:400;
color:#25276e;
line-height: 16px;
}
.t-h2 {
font-size:18px;
font-weight:600;
color:#25276e;
}
bullet {color: #25276e; }
#spacertop{
height: 80px; width:auto; display:block;
}
#navbar{width:auto; display:block; height:28px; background-color:#f4f2de;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline; font-weight:bold; font-family:"Myriad Pro", Georgia, Verdana, Helvetica;
text-decoration:none; color:#4D4D4D;}
#navbar a:hover {
color: #25276e;
}
#content{
width:auto; display:block;
border: solid 1px #000;
padding: 20px;
}
#spacer{
height: 30px; width:auto; display:block;
}
#column_left{width:460px; margin-right:20px; float:left;}
#column_left para{
line-height:18px;
font-size:13px;
}
#column_right{
width:160px;
margin-right:20px;
float:left;
margin-left: 50px;
padding-bottom:40px;
}
#column_right_adsense{
width:120px;
float:left;
margin-left: 8px;
}
.column_img {
position: relative;
}
.column_img_txt {
position: absolute;
top: 150px;
* *left: 0;
right: 141px;
* *width: 100%;
font-size:15px;
color:#666666;
font-weight: bold;
}
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; height: 30px; display:block; padding:4px 0; font-size:11px; background-color:#f4f2de;}
#footer a { color: #000000; text-decoration: none;}
#footer a:hover {color: #25276e;}
#footer #copyright{
width: 250px;
position: absolute;
margin-left:20px;
margin-top: 5px;
}
#footer #smallnav {
width: 600px;
text-align: right;
color:#f4f2de;
margin-left: 250px;
margin-top: 16.5px;
position: absolute;
}
</style>
</head>
<body><div id="column_right_adsense">
<h3> Facebook</h3>
Like Us <a href="http://www.facebook.com" target="_blank"><img src="assets/facebook.png" alt="Like us On Facebook!" width="16" height="16" align="absbottom" longdesc="http://www.facebook.com" /></a><br />
</div>
<div id="column_right">
<h3>Hours</h3>
Mon - Fri: xxxx am - xxxx pm<br />
Sat: xx <a href="appointments.html">Appointment</a><br />
Sun: xxxx - xxxx</div>
<div class="column_img">
<div class="column_img_txt"><br/>Text Text Text</div>
<a href="buysell.html"><img src="assets/buysell.gif" alt="we buy and sell cars!" /></a> </div>
</body>
</html>
They actually work in the html you sent, but not mine. It has to be something else affecting my html then. Here is the full HTML:
<!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>Title</title>
<link href="assets/default.css" rel="stylesheet" type="text/css" />
<!--add this optimization script -->
<script type="text/javascript">
var addthis_config = {"data_track_clickback":true};
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=[YOUR PROFILE ID]"></script>
</head>
<body>
<div id="container">
<div id="spacertop"></div>
<div id="topbar">
<br />
<img src="assets/logo.png" width="211" height="58" />
<div class="t-h2"> text</div>
<div class="t-h1"> text</div>
</div>
<div id="spacer"></div>
<div id="navbar"><a href="index.html">HOME</a><a href="services.html"></a> <a href="testimonials.html"></a>
<bullet>•</bullet>
<a href="services.html"> </a> <a href="testimonials.html"></a><a href="services.html">SERVICES</a>
<a href="services.html"></a> <bullet>•</bullet><a href="testimonials.html"></a><a href="testimonials.html">TESTIMONIALS</a><a href="services.html"></a> <bullet>•</bullet><a href="testimonials.html"></a><a href="coupons.html">COUPONS</a>
<a href="services.html"></a> <bullet>•</bullet><a href="testimonials.html"></a><a href="appointments.html">APPOINTMENTS</a><a href="services.html"></a> <bullet>•</bullet><a href="testimonials.html"></a><a href="buysell.html">BUY/SELL</a>
<a href="services.html"></a>
<bullet>•</bullet><a href="testimonials.html"></a><a href="contact.html">CONTACT</a> <img src="assets/wrench.png" alt="wrench" width="70" height="22" align="baseline" /></div>
<div id="content">
<div id="column_left">
<br/><h1-italic>text</h1-italic> <br />
<h1>text</para>
<br/><br/><br/>
<h5_services>text</h5_services><br/><br/>
<li class="bullet"><span class="services">1</li><br/>
<li class="bullet"><span class="services">2</li><br/>
<li class="bullet"><span class="services">3</li><br/>
<li class="bullet"><span class="services">4</li><br/>
<li class="bullet"><span class="services">5</li><br/>
<li class="bullet"><span class="services">6</li><br/>
<li class="bullet"><span class="services">7</li><br/>
<li class="bullet"><span class="services">8</li><br/>
<li class="bullet"><span class="services">9</li>
<br/><br/>
Share this:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e77f2d838a2676b"></script>
<!-- AddThis Button END -->
</div>
<div id="column_right_adsense">
<h3>Facebook</h3>
Like Us <a href="http://www.facebook.com" target="_blank"><img src="assets/facebook.png" width="16" height="16" align="absbottom" longdesc="https://www.facebook.com/" /></a><br />
</div>
<div id="column_right">
<h3>text</h3>
Mon - Fri: xxxx am - xxxx pm<br />
Sat: <a href="appointments.html">Appointment</a><br />
Sun: xxxx</div>
<div class="column_img">
<div class="column_img_txt"><br/>text and text and text and text!</div>
<a href="buysell.html"><img src="assets/buysell.gif" alt="text and text and text!" /></a> </div>
</div>
<div id="footer">
<div id="copyright">
<p>copyright © text.</p>
</div>
<div id="smallnav">
<a href="index.html">home</a> -
<a href="services.html">services</a> -
<a href="testimonials.html">tesimonials</a> -
<a href="coupons.html">coupons</a> -
<a href="appointments.html">appointments</a> -
<a href="buysell.html">buy/sell</a> -
<a href="contact.html">contact</a> </div>
</div>
</body>
</html>
sdt76
September 22, 2011, 7:51pm
8
This seems to work for me where I added overflow:hidden to both #container and Content
<!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>Title</title>
<link href="assets/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px;
padding:0;
background-color: #1a728a;
background-image: url(bg-image.gif);
background-position: center top;
background-repeat: repeat-x;
width: 100%;
display: table;
}
input, form, textarea h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
}
h1 {
font-size:18px;
line-height: 1px;
}
h1-italic {
font-size:18px;
line-height: 2px;
font-style:italic;
font-weight: bold;
}
h2 {
font-size:14px;
color:#999999;
}
h3 {
font-size:13px;
border-bottom:solid 1px #DEDEDE;
padding:4px 0;
margin-bottom:10px;
}
h4 {
font-size:18px;
line-height: 22px;
color:#25276e
}
a:link, a:visited {
color:#25276e;
text-decoration: none;
}
a:hover {
color:#4D4D4D;
}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container {
width:880px;
margin:0 auto;
overflow:hidden;
}
#topbar {
width:auto;
display:block;
}
.t-h1 {
font-family:"Myriad Pro", Georgia, Verdana, Helvetica;
font-size:13px;
font-weight:400;
color:#25276e;
line-height: 16px;
}
.t-h2 {
font-size:18px;
font-weight:600;
color:#25276e;
}
bullet {
color: #25276e;
}
#spacertop {
height: 80px;
width:auto;
display:block;
}
#navbar {
width:auto;
display:block;
height:28px;
background-color:#f4f2de;
}
#navbar a {
heigth:28px;
line-height:28px;
padding:0 8px;
display:inline;
font-weight:bold;
font-family:"Myriad Pro", Georgia, Verdana, Helvetica;
text-decoration:none;
color:#4D4D4D;
}
#navbar a:hover {
color: #25276e;
}
#content {
width:auto;
display:block;
border: solid 1px #000;
padding: 20px;
overflow:hidden;
}
#spacer {
height: 30px;
width:auto;
display:block;
}
#column_left {
width: 400px;
margin-right:20px;
float:left;
}
#column_left para {
line-height:18px;
font-size:13px;
}
#column_right {
width:160px;
margin-right:20px;
float:left;
margin-left: 50px;
padding-bottom:40px;
}
#column_right_adsense {
width:120px;
float:left;
margin-left: 8px;
}
.column_img {
position: relative;
}
.column_img_txt {
position: absolute;
top: 150px;
* *left: 0;
right: 141px;
* *width: 100%;
font-size:15px;
color:#666666;
font-weight: bold;
}
div.spacer {
clear:both;
height:10px;
display:block;
}
#footer {
width:auto;
height: 30px;
display:block;
padding:4px 0;
font-size:11px;
background-color:#f4f2de;
}
#footer a {
color: #000000;
text-decoration: none;
}
#footer a:hover {
color: #25276e;
}
#footer #copyright {
width: 250px;
position: absolute;
margin-left:20px;
margin-top: 5px;
}
#footer #smallnav {
width: 600px;
text-align: right;
color:#f4f2de;
margin-left: 250px;
margin-top: 16.5px;
position: absolute;
}
</style>
<!--add this optimization script -->
<script type="text/javascript">
var addthis_config = {"data_track_clickback":true};
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=[YOUR PROFILE ID]"></script>
</head>
<body>
<div id="container">
<div id="spacertop"></div>
<div id="topbar"> <br />
<img src="assets/logo.png" width="211" height="58" />
<div class="t-h2"> text</div>
<div class="t-h1"> text</div>
</div>
<div id="spacer"></div>
<div id="navbar"><a href="index.html">HOME</a><a href="services.html"></a> <a href="testimonials.html"></a>
<bullet>•</bullet>
<a href="services.html"> </a> <a href="testimonials.html"></a><a href="services.html">SERVICES</a> <a href="services.html"></a>
<bullet>•</bullet>
<a href="testimonials.html"></a><a href="testimonials.html">TESTIMONIALS</a><a href="services.html"></a>
<bullet>•</bullet>
<a href="testimonials.html"></a><a href="coupons.html">COUPONS</a> <a href="services.html"></a>
<bullet>•</bullet>
<a href="testimonials.html"></a><a href="appointments.html">APPOINTMENTS</a><a href="services.html"></a>
<bullet>•</bullet>
<a href="testimonials.html"></a><a href="buysell.html">BUY/SELL</a> <a href="services.html"></a>
<bullet>•</bullet>
<a href="testimonials.html"></a><a href="contact.html">CONTACT</a> <img src="assets/wrench.png" alt="wrench" width="70" height="22" align="baseline" /></div>
<div id="content">
<div id="column_left"> <br/>
<h1-italic>text</h1-italic>
<br />
<h1>
text
</para>
<br/>
<br/>
<br/>
<h5_services>text</h5_services>
<br/>
<br/>
<li class="bullet"><span class="services">1</li>
<br/>
<li class="bullet"><span class="services">2</li>
<br/>
<li class="bullet"><span class="services">3</li>
<br/>
<li class="bullet"><span class="services">4</li>
<br/>
<li class="bullet"><span class="services">5</li>
<br/>
<li class="bullet"><span class="services">6</li>
<br/>
<li class="bullet"><span class="services">7</li>
<br/>
<li class="bullet"><span class="services">8</li>
<br/>
<li class="bullet"><span class="services">9</li>
<br/>
<br/>
Share this:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> </div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e77f2d838a2676b"></script>
<!-- AddThis Button END -->
</div>
<div id="column_right_adsense">
<h3>Facebook</h3>
Like Us <a href="http://www.facebook.com" target="_blank"><img src="assets/facebook.png" width="16" height="16" align="absbottom" longdesc="https://www.facebook.com/" /></a><br />
</div>
<div id="column_right">
<h3>text</h3>
Mon - Fri: xxxx am - xxxx pm<br />
Sat: <a href="appointments.html">Appointment</a><br />
Sun: xxxx</div>
<div class="column_img">
<div class="column_img_txt"><br/>
text and text and text and text!</div>
<a href="buysell.html"><img src="assets/buysell.gif" alt="text and text and text!" /></a> </div>
</div>
<div id="footer">
<div id="copyright">
<p>copyright © text.</p>
</div>
<div id="smallnav"> <a href="index.html">home</a> - <a href="services.html">services</a> - <a href="testimonials.html">tesimonials</a> - <a href="coupons.html">coupons</a> - <a href="appointments.html">appointments</a> - <a href="buysell.html">buy/sell</a> - <a href="contact.html">contact</a> </div>
</div></div>
</body>
</html>
Seems to be something to do with the floats that you have, but I can’t say exactly why it was happening. But I would run your code through the validator. I did and it comes back with alot of errors.