irregular activation of links

PCViking · May 1, 2010

I have constructed a .css file and 7 .htm's. The layout has a LHS 'div' for links (navigation) and a RHS 'div' for content... Following the pattern in http://www.how-to-build-websites.com/css_Tutorial/index.php

The links all work, but not all the time. The coding is correct, but sometimes the links activate and sometimes they do not. Especially the upper ones (higher in the stack), the lower ones always work. It's like a 'dead-zone' on my page?

I am writing the code in notepad, and saving it as .txt & .htm with "UTF-8" encoding. I also did encoding with "ANSI" and it did not seem to make any difference. The browser I use is Mozilla-Firefox.

OK, now with the background in place... HELP! Why don't my links work every time?

-pcv

Andrea · May 1, 2010

It'd be most helpful if we could see the html and css that YOU created.

PCViking · May 2, 2010

It'd be most helpful if we could see the html and css that YOU created.

Below is the .ccs:

/* Generic Selectors */

body {

font-family: 'Lucida Console';

font-size: 14px;

color: #333333;

background-color: #FDFAF9;

}

p {

width: 100%;

}

li {

list-style-type: none;

line-height: 150%;

list-style-image: url(../images/arrowSmall.gif);

}

h1 {

font-family: 'Lucida Console';

font-size: 24px;

font-weight: bold;

color: #000000;

}

h2 {

font-family: 'Lucida Console';

font-size: 16px;

font-weight: bold;

color: #000000;

border-bottom: 1px solid #009900;

}

h3 {

font-family: 'Lucida Console';

font-size: 12px;

font-weight: bold;

color: #000000;

}

/**************** Pseudo classes ****************/

a:link {

color: #009900;

text-decoration: underline;

font-weight: bold;

}

li a:link {

color: #009900;

text-decoration: none;

font-weight: bold;

}

a:visited {

color: #009900;

text-decoration: underline;

font-weight: bold;

}

li a:visited {

color: #009900;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: #0000FF;

padding-bottom: 5px;

font-weight: bold;

text-decoration: underline;

}

li a:hover {

display: block;

color: #0000FF;

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C6EC8C;

}

a:active {

color: #FF00FF;

font-weight: bold;

}

/************************* ID's *************************/

#navigation {

position: absolute;

z-index: 10;

width: 185px;

height: 600px;

margin: 0;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

#centerDoc {

position: absolute;

z-index: 15;

padding: 0 0 0px 200px; /*top right bottom left*/

margin-top: 0px;

}

Below is the .htm:

<html>

<head>

<title>Starter Page</title>

</head>

<body>

</div>

text content

<h1>

Rock Lines

</h1>

( Under Construction )

You can write us at:

</center>

</div>

</body>

What my goal is, is to created a 'boilerplate' for a series of webpages. With links on the lhs and content on the rhs. Since this is under construction, all files are in the same folder.

It's the links which are part of the navigation id that are giving problems... the links are irratic, sometimes they work, sometimes not.

-pcv

Andrea · May 2, 2010

Is there a doctype that you just didn't paste here? If not, you need one (HTML 4.01 strict, ideally).

A link either works or doesn't - example, if file rock_a.htm is in the same directory as the page you're linking from, the link <a href="rock_a.htm"> Rock A</a> will always work.

However, you have multiple coding errors, all of which can cause issues.

<div id="navigation"> 

<a href="rock_a.htm"> Rock A</a> <p>
<a href="rock_b.htm"> Rock B</a> <p>
<a href="rock_c.htm"> Rock C</a> <p>
<a href="rock_d.htm"> Rock D</a> <p>
<a href="rock_e.htm"> Rock E</a> <p>
<a href="rock_f.htm"> Rock F</a> <p>

</div>

There is an opening paragraph tag behind each link, but none of them ever close. You could do this:

<div id="navigation"> 

<p><a href="rock_a.htm"> Rock A</a> </p>
<p> <a href="rock_b.htm"> Rock B</a> </p>
<p> <a href="rock_c.htm"> Rock C</a> </p>
<p> <a href="rock_d.htm"> Rock D</a> </p>
<p> <a href="rock_e.htm"> Rock E</a> </p>
<p> <a href="rock_f.htm"> Rock F</a> </p></div>

(notice how the p tag now opens AND is closed?)

But to style the links correctly, they should look like this:

<div id="navigation"> <ul>
<li<a href="rock_a.htm"> Rock A</a> </li>
<li> <a href="rock_b.htm"> Rock B</a> </li>
<li> <a href="rock_c.htm"> Rock C</a> </li>
<li> <a href="rock_d.htm"> Rock D</a> </li>
<li> <a href="rock_e.htm"> Rock E</a> </li>
<li> <a href="rock_f.htm"> Rock F</a> </li>
</ul>
</div>

Also <center> is deprecated and should not be used. Just use text-align: center; for the CSS of the division in which you want to center things.

And always make sure your code validates (meaning: it has no mistakes).

PCViking · May 6, 2010

Andrea,

I did it both ways; by <p>&</p>'s and as a list. In each case I had the same results: the links would color as declared in the Pseudo classes in the .css, but they would not hover or link... nothing... just static green underlined text. Thanks for the coding observation (I do listen *S*).

In the centerdoc <div>, the links work just fine; green underlined text, then blue in hover, then magenta as they go active and yes they do link. I then duplicated (cut/paste) the contents of the navigation <div> into the centerdoc <div>, so that I had identical contents in each of the 2 <div>s and all the links in the centerdoc worked just fine, but the links in the navigation <div> remained underlined green and static. I then duplicated the list multiple times (in the navigation <div>), then the lowest ones worked... while the original ones remained static, then when I deleted the static ones (uppermost), then all the links in the navigation <div> become static and did not work.

This may sound weird, but there appears to be some kind of a shadow? or dead zone? When there is anything in the centerdoc <div> (RHS) (parallel to the navigation <div> links) (LHS), the navigation <div> links are static. This does not seem to effect the centerdoc <div>. When the navigation <div> links are multiplied to the point where they extend past the centerdoc <div> content, then those navigation <div> links (below the centerdoc <div> content) work just fine.

Is there some special magic for <div>'s? Special flag? Is this a firefox/Mozilla problem? I cannot see but that this should be a simple situation.

-pcv

Andrea · May 6, 2010

Is the page uploaded somewhere and you can link to it?

PCViking · May 6, 2010

I have it currently on my desktop.... not ready for prime time, eh?

Andrea · May 6, 2010

I'll play with the code when I get home - meanwhile, try to rearrange your CSS and list all the a:s first (in exactly this order: a:link a:visited a:hover a:active) and then all the li a:s --- I know the order is relevant, but am not sure having them intermingled causes the problem.

[i had initially misunderstood what you meant by link not working - to me, that meant you click on it, and it doesn't take you where it's supposed to.]

PCViking · May 6, 2010

I'll play with the code when I get home - meanwhile, try to rearrange your CSS and list all the a:s first (in exactly this order: a:link a:visited a:hover a:active) and then all the li a:s --- I know the order is relevant, but am not sure having them intermingled causes the problem.

[i had initially misunderstood what you meant by link not working - to me, that meant you click on it, and it doesn't take you where it's supposed to.]

I just went over to a different PC (which uses IE as it's browser) and loaded my files. In Explorer, this problem does not seem to exist... and in each of the <div>s all their linking worked as they should. This could be a Mozilla/Firefox issue with it's reading of <div>s? I use Mozilla/Firefox on my PC.

The problem as it stands is: When loading the .htm page in Mozilla/Firefox, if the links in the LHS <div> are multiplied to the point where they physically extend below the volume of content in the RHS <div>, then those links below 'that virtual line', work just fine... while the links above that 'virtual line' are static. I gather that the <div>s aught to act as independent fields of text, but they are not doing so. Above 'that virtual line' is a 'dead zone', while the links below work as normal... I've done all my work in notepad, so there should not be any software nuances in the coding. Keep it simple, eh?

Maybe Mozilla/Firefox requires some special line of code? to make all the links in all the <div>s to work. Ya just cannot have a web page that works in IE and not in Firefox, eh?

Thanks you so very much for your assistance *S*

-pcv

Andrea · May 6, 2010

No, it it's not working, it's not because Firefox requires anything special, it's because there is a mistake. Unfortunately, I cannot look into it any closer at the moment, but will when I get home. Can you repoost all your code, what you're saying doesn't seem to align itself with what's up there. And please be sure to post everything, from the first letter to the last.

Andrea · May 7, 2010

Your centerDoc div are covering your navigation division, so the links don't work in FX - get rid of the position relative and float your navigation:

http://www.aandbwebdesign.com/KSforum/viking.html

PCViking · May 9, 2010

Your centerDoc div are covering your navigation division, so the links don't work in FX - get rid of the position relative and float your navigation:

http://www.aandbwebdesign.com/KSforum/viking.html

Sweet...! I walked thru the code you wrote and learned. The big item that made a difference was the position & the float. That mod made the links work beautifully. It appears that FX is less forgiving than IE? So, I'd best be clean with my code, eh? Btw, my test page even loaded nicely (and linked nicely) on my blackberry, but the .css formatting (on the blackberry) was ignored. I assume it would be wise not to stray too far from the standard H's wrt text sizes. Thanks again for the help.

On a different note, I have the O'Reilly CSS & HTMS pocket references and the HTML4 Bible. Are there any critical books you'd recommend for a newbie? Fwiw, back in the '80's I programmed Basic, Fortran & 'C'... My programming roots are deep, I just haven't done any in 20 years. It all feel like returning to an old passion, with a new twist *S*

-pcv

Sign In

irregular activation of links

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation