Link Troubles

[Maverick25r]

How come when I preview the page in the browser each one of these links when clicked on except for approach goes to industryaffiliations.html

Code: Select all

<div id="infoapproach" class="sidenav">
  <a href="approach.html" class="sidenav">OUR APPROACH</a><br />
  <br />
&nbsp;&nbsp;&nbsp;<a href="safety.html" class="sidenav">Safety</a><br />
&nbsp;&nbsp;&nbsp;<a href="projectcontrols.html" class="sidenav">Project Controls</a><br />
&nbsp;&nbsp;&nbsp;<a href="industryaffiliations.html" class="sidenav">Industry Affiliations</a></div>

[ukgeoff]

There is no immediately obvious reason.

Are you previewing on your own system or on a hosted system?

If it's the latter, gives a link so we can see the pages and there code.

[Maverick25r]

Its on my own system...

Here is the css for the sidenav if this helps

Code: Select all

.sidenav {
	font-size:12px;
	font-family:arial;
	color:#FFFFFF;
	padding-top:20px;
	text-align:left;
	padding-left:32px;
	text-decoration:none;
}

[moojoo]

What is with all the non breaking spaces? This would be much more efficient as a styled list. Not what you wanted to know but eh..

<ul class="sidenav">
<li><a href="approach.html" class="sidenav">OUR APPROACH</a></li>
<li><a href="safety.html" class="sidenav">Safety</a></li>
<li><a href="projectcontrols.html" class="sidenav">Project Controls</a></li>
<li><a href="industryaffiliations.html" class="sidenav">Industry Affiliations</a></li>
</ul>

Then style it with CSS accordingly.

[Ryan Fait]

I'm assuming the non-breaking spaces were just to move the text over. In moojoo's code (which is what you should be using), you can add padding to do the same thing:

Code: Select all

.sidenav li {
    padding: 0 0 0 10px;
}

In case you're unfamiliar with shorthand, that's the same thing as:

Code: Select all

.sidenav li {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

The order for shorthand goes top right bottom left.

[ukgeoff]

Styling niceties aside, they are niether the cause nor solution of the problem described.

If you are able upload the page with its problem links and see if you have the same problem and also give us the link.

This looks like redirection but the question is what's causing it.

[Maverick25r]

I posted the page online and the links work fine. Why is it having problems with redirection on my system only?

[moojoo]

Beh windows... No idea why it wouldn't work locally, I bet the address bar would tell you in the file://hdjkhdajkdajk/dhasjhajk/foo.html whatever

[Maverick25r]

I hate to say it, but i am running osx. It does sound like something stupid windows would do though.

[Ryan Fait]

I use the built-in Apache server daily and have never experienced a problem like that. Might've just been a fluke.

[moojoo]

OS X I can help you with!

Are the files in HD/Library/Web Server/Documents? And do you have web sharing enabled in the sharing prefs pane? I have PHP, MySQL etc all stored locally for various testing things, have a few CM's installed to play with etc etc.. If the above two mentuioned things are done then it should work.

[Maverick25r]

Now I have my nav list set up like so:

Code: Select all

<div id="infoapproach" class="sidenav">
<ul class="sidenav">
<li><a href="safety.html" class="sidenav">OUR APPROACH</a></li>
<br />
<li><a href="safety.html" class="sidenav">Safety</a></li>
<li><a href="projectcontrols.html" class="sidenav">Project Controls</a></li>
<li><a href="industryaffiliations.html" class="sidenav">Industry Affiliations</a></li>
</ul></div>

and my css like so:

Code: Select all

.sidenav li a {
	font-size:12px;
	font-family:arial;
	color:#FFFFFF;
	padding: 30px 0px 0px 0px;
	margin: 0px;
	text-align:left;
	text-decoration:none;
}

.sidenav {
	font-size:12px;
	font-family:arial;
	color:#FFFFFF;
	padding: 10px 0px 0px 30px;
	margin: 0px;
	text-align:left;
	text-decoration:none;
	list-style-type: none;
}

I can't for some reason figure out how to move everything below approach over to the right more without using $nbsp. I tried making another class for everything below apporoach, but when i start messing with the padding nothing happens.

[moojoo]

instead of using a <br> in the list use <li>&nbsp;</li> also you can apply classes to individual li's for different margins, padding etc.. Are the links at least working now?

i.e.

.sidenav li.foo a { }