Link Troubles

Maverick25r · #1 Sep 29th, 2006, 21:59

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 · #2 Sep 29th, 2006, 22:36

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 · #3 Sep 29th, 2006, 22:38

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 · #4 Sep 29th, 2006, 23:03

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 · #5 Sep 30th, 2006, 01:56

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 · #6 Sep 30th, 2006, 14:31

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 · #7 Oct 2nd, 2006, 13:30

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

moojoo · #8 Oct 2nd, 2006, 13:48

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 · #9 Oct 2nd, 2006, 18:23

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

Ryan Fait · #10 Oct 2nd, 2006, 18:43

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

moojoo · #11 Oct 2nd, 2006, 19:26

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 · #12 Oct 3rd, 2006, 19:35

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 · #13 Oct 3rd, 2006, 19:39

instead of using a <br> in the list use <li> </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 { }

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
having some troubles	luv2php	PHP Forum	7	May 26th, 2008 06:40
IE Troubles	MotorManiac	Web Page Design	0	May 11th, 2008 01:01
IE troubles and more, what else is new	Maverick25r	Web Page Design	4	Oct 18th, 2006 18:40
PHP Troubles	Maverick25r	PHP Forum	1	Sep 1st, 2006 04:22
IE troubles	Maverick25r	Web Page Design	2	Jul 25th, 2006 00:34

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Link Troubles