a href link inside div tag not working

hgreenesmith · Jun 22, 2009

If anyone can solve this for me I'd be eternally grateful.

I've got the following in css:
#leftmiddle {
width :25%;
float : left;
height:35px;
}

Then I've got the following on my main page:
<div id="leftmiddle"><a href="engineering.htm" target="_blank">Engineering</a></div>

It's all pretty straight forward, but my link does not like the div id for some reason and I can not connect to the second page.

I've been working on this for a week now with no clue how to fix this problem. I'm sure it's something simple, but for the life of me, I can't figure it out.

ChrisHunt · Jun 22, 2009

I don't see anything in the code that you've posted that would make the link fail.

As a first step, does the page validate? Does the CSS?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Vragabond · Jun 22, 2009

It is possible you have another element on top of the link that is preventing that link to be clicked. But for that we would have to see the page (or at least the entire code).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

hgreenesmith · Jun 22, 2009

Thank you for your responses. At least I know I'm not crazy then. Yes, the pages are validated.

I have no way at present to put this on the internet as a link, so I will have to offer the code. Main page follows:

<!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"
xml:lang="en">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Genesis Industries, Inc. Intranet home page</title>
<style type="text/css" media="screen,print">
@import "screen.css";
</style>
<style type="text/css" media="print">
@import "print.css";
</style>
</head>
<body>
<div id="pageHeader">
<img src="images/logo.gif" alt="Genesis Industries, Inc" title="Genesis Industries, Inc" />
<div id="leftHeader"></div>
<div id="middleHeader">

<div class="menu">
<dl>
<dd>       A better solution to finding what you need online</dd>
</dl>
</div>
</div>
<div id="rightHeader"></div>
</div>
<div id="pageContainer">
<div id="leftContainer"><div id="rightContainer">
<div id="pageOptions">
<div class="bclear"></div>
</div>
<div id="pageContent">

<h1>Controlled Content</h1>

<div class="bclear"><h2>By Department</h2></div>
<div id="left">Assembly</div>
<div id="leftmiddle"><a href="engineering.htm" target="_blank">Engineering</a></div>
<div id="rightmiddle">Production</div>
<div id="right">Quality</div><br />
<hr />
<div class="bclear"><h2>By Category</h2></div>
<div id="left">SOP's</div>
<div id="leftmiddle">Work Instructions</div>
<div id="rightmiddle">Documents</div>
<div id="right">Forms</div>

<div id="left">Templates</div>
<div id="leftmiddle">Org Chart</div>
<div id="rightmiddle">Facility Layout/Common Drawings</div>
<div id="right">Disaster Recovery Plan</div>

<div id="left">Emergency Evacuation</div>
<div id="leftmiddle">ERP System</div>
<div id="rightmiddle">Press Locations</div>
<div id="right">Certifications</div>

<h1>Uncontrolled Content</h1>

</div>
<div id="bottomContainer"></div>
</div></div>
</div>
</body>
</html>

screen.css sheet follows:

html, body {
margin: 0px; padding: 0px;
text-align: left;
color: #000;
background: #fff;
font-family: "Verdana", "Serif";
font-size: 13px;
}

#pageHeader {
margin-top: 30px;
position: relative;
width: 92%;
max-width: 1200px;
left: 4%;
height:140px;
background:url(images/middleHeader.gif) repeat-x;
}

#pageHeader img {
display: none;
}

#middleHeader {
float: left;
}

.crossover {
position: absolute;
top: 37px;
right: 40px;
font-family: "Verdana", "Serif";
font-size:11px;
color:#fff;
font-weight: normal;
}

#left {
width :25%;
float : left;
height:35px;
}

#leftmiddle {
width :25%;
float : left;
height:35px;
}

#rightmiddle {
width :25%;
float : left;
height:35px;
}

#right {
width :25%;
float : left;
height:35px;
}

.crossover a, .crossover a:active, .crossover a:visited {
color:#fff;
text-decoration:underline;
}

.crossover a:hover {
text-decoration:none;
}

.menu {
margin:0px;
position:absolute;
top:77px;
font-size:16px;
font-weight: normal;
color:#fff;
}
.menu dl dd {
float:left;
margin:0;
margin-right:25px;
padding:0
}
.menu dl dd a, .menu dl dd a:active, .menu dl dd a:visited {
display:block;
padding:2px 5px;
font-weight: bold;
color:#fff;
text-decoration: underline;
}
.menu dl dd a:hover {
text-decoration: none;
}

#leftHeader {
float: left;
background:url(images/leftHeader.gif) no-repeat;
height: 140px;
width: 251px;
}

#rightHeader {
float: right;
background:url(images/rightHeader.gif) no-repeat;
width: 40px;
height: 140px;
}

#pageContainer {
clear: both;
position: relative;
width: 92%;
max-width: 1200px;
left: 4%;
margin-bottom:30px;
}

#controlledContainer {
clear: both;
position: relative;
width: 25%;
height: 35px;
max-width: 330px;
min-width: 300px;
left: 4%;
margin-bottom:30px;
text-align:Left;
}

#rightContainer {
background:url(images/rightContainer.gif) top right repeat-y;
}

#leftContainer {
background:url(images/leftContainer.gif) top left repeat-y;
}

#pageOptions {
margin-right:10px;
margin-left:10px;
padding-top:5px;
padding-bottom: 5px;
font-size:11px;
border-bottom:1px dotted #999;
}

#pageOptions input.search {
position: absolute;
right: 60px;
color:#000;
width:170px;
padding:2px;
border:1px solid #aaa;
font-size:12px
}

#pageOptions input.button {
position: absolute;
display:block;
top: 4px;
right: 10px;
}

#pageOptions input.search:focus {
background:#FEFFD6;
border:1px solid #666
}

#pageControls {
clear:both;
margin-right:10px;
margin-left:10px;
padding-top:5px;
padding-bottom:10px;
font-size:11px
}

#pageFooter {
clear:both;
margin-right:10px;
margin-left:10px;
padding-top:5px;
padding-bottom:5px;
font-size:11px;
border-top:1px dotted #999;
}

#bottomContainer {
position:relative;
background:url(images/bottomContainer.gif) repeat-x;
height:3px;
border-left: 1px solid #1C2E76;
border-right: 1px solid #1C2E76;
}

.lfloat {float:left}
.rfloat {float:right}
.bclear {clear:both}
.rclear {clear:right}
.lclear {clear:left}

#pageContent {margin:0px 10px 10px 10px;}

#pageContent form {
color: #131313;
margin-left: 15px;
padding: 0px;
}

#pageContent textarea {
margin:5px 0;
width: 99%;
height:250px;
border:1px solid #aaa;
font-size:12px;
padding:3px
}

#pageContent input.textBox {
width: 95%;
padding:2px;
border:1px solid #aaa;
font-size:12px
}

#pageContent input.textBox:focus, #pageContent textarea:focus {
background:#DCE3FF;
border:1px solid #666
}

#pageContent h1 {
color: #323232;
margin: 0px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
padding: 0px;
font-family: "Verdana", "Serif";
font-size: 22px;
font-weight: normal;
padding:0px;
text-decoration: none;
background:#fff
}

#pageContent h2 {
padding: 0px;
margin: 0px;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 15px;
color: #323232;
font-family: "Verdana", "Serif";
font-size: 19px;
font-weight: normal;
text-decoration: none;
background: #fff
}

#pageContent p {
color:#000;
font-family: "Verdana", "Serif";
font-size: 12px;
font-weight: normal;
text-align: justify;

word-spacing: 0.05em;
letter-spacing: 0.02em;
line-height: 1.7em;

margin-left: 15px;
margin-right: 15px;
margin-top: 5px;
margin-bottom: 15px;
background:#fff
}

#pageContent em {
font-size: 15px;
text-decoration: none;
font-weight: normal;
font-style: normal;
}

#pageContent strong {
font-weight: normal;
background: #FFFC00;
}

#pageContent table tr td {
font-size: 12px;
font-weight: normal;

word-spacing: 0.08em;
letter-spacing: 0.02em;
line-height: 1.4em;
}

#pageContent hr {
clear:right;
margin-top:10px;
margin-bottom:10px;
border:0;
border-top:1px dotted #999;
height:1px
}

#pageContent ul li {
margin-top: 0px;
margin-left: 30px;
margin-right: 20px;
margin-bottom: 5px;

font-family: "Verdana", "Serif";
font-size: 12px;
font-weight: normal;
text-align: justify;

word-spacing: 0.08em;
letter-spacing: 0.02em;
line-height: 1.2em;

list-style-type: decimal;

color: #131313; background: transparent;
}

a, a:visited {
color:#008000;
text-decoration:underline
}
a:hover, a:active {
text-decoration:none
}

.tbp {
background: #1C2E76;
margin-left: 15px;
width: 97%;
}
.tbp img {
cursorointer;
border:1px solid #000
}
.tbp-title {
color: #fff;
text-align: center;
font-size: 15px;
}
.tbp-r1 {
color: #000;
text-align: center;
background: #F7F7F7;
}
.tbp-r2 {
color: #000;
text-align: center;
background: #FFF;
}

.thumb a, .thumb a:visited {
line-height: 1.5em;
text-align: center;
float:left;
color:#fff;
font-weight: normal;
border: 1px solid #1C2E76;
font-size:14px;
text-decoration:none;

margin-top: 10px;
margin-left: 15px;
margin-right: 5%;
background:#1C2E76;
}

.thumb a:hover, .thumb a:active {
background:#4D61B3;
border: 1px solid #4D61B3;
color:#fff;
}

.thumb a img {
clear:both;
display:block;
background: #fff;
border: 0px;
border-top: 1px solid #1C2E76;
margin:0px;
padding:0px;
}

.intext {
clear:right;
float:right;
padding: 0px;
margin-left:8px;
margin-bottom:3px;
border:1px solid #1C2E76;
}

I apologize for the lengthy-ness.

vacunita · Jun 22, 2009

Other than your mis-use of IDs which are supposed to be unique, and as such should appear only once in a page. Everything works fine.

I can click on the link and it will open in a new window.

I do suggest you change your Id's to classes instead. If only to get rid of the 12 validation errors you have that are due to using ID's more than once.

http://validator.w3.org/check

But there is nothing there to produce the error you describe.

Checked in FF3 and IE8.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

hgreenesmith · Jun 22, 2009

You are correct. I should have used classes and wasn't thinking properly. That's fixed and now it's officially validated using the page you provided.

So, if it works for you, and I am checking in FF3 and IE8 also, why am I still getting a "File Not Found"?

I wish I had more experience at this...

hgreenesmith · Jun 22, 2009

I'm using IE7. Don't see how that can make a difference, but I'll check it out.

Thanks everyone for all the valuable and appreciated input.

hgreenesmith · Jun 22, 2009

I found the problem. Somehow my files got named with a www. in front of each page. I have no idea how it happened unless my software did it for me while I was saving the files.

I should have had someone look at this sooner. I would have saved lots of time and frustration.

Thank you again.

vacunita · Jun 22, 2009

I was just about to suggest you check that the file engineering.htm indeed exists in the same folder.

Glad you sorted it out.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

ChrisHunt · Jun 22, 2009

As a rule of thumb, if you find yourself putting classes/ids on every element on the page, you're probably doing it wrong.

For example, in your case, you could simplify your code like this:

Code:

<div id="pageContent">
        
  <h1>Controlled Content</h1>
        
  <h2>By Department</h2>
  <div>Assembly</div>
  <div><a href="engineering.htm" target="_blank">Engineering</a></div>
  <div>Production</div>
  <div>Quality</div>
  <hr />
  <h2>By Category</h2>
  <div>SOP's</div>
  <div>Work Instructions</div>
  <div>Documents</div>
  <div>Forms</div>
  <div>Templates</div>
  <div>Org Chart</div>
  <div>Facility Layout/Common Drawings</div>
  <div>Disaster Recovery Plan</div>
  <div>Emergency Evacuation</div>
  <div>ERP System</div>
  <div>Press Locations</div>
  <div>Certifications</div>

  <h1>Uncontrolled Content</h1>
                
</div>

With this CSS

Code:

#pagecontent h1,
#pagecontent h2
#pagecontent hr {
   clear: both;
}

#pagecontent div {
   width :25%;
   float : left;
   height:35px;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

a href link inside div tag not working

hgreenesmith

Programmer

ChrisHunt

Programmer

Vragabond

Programmer

hgreenesmith

Programmer

vacunita

Programmer

hgreenesmith

Programmer

hgreenesmith

Programmer

hgreenesmith

Programmer

vacunita

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor