OutputLink in a list only works for last link

Question

I have a very simple Visualforce page. It is not using a controller, it is mostly a splash page. I wanted to use outputlink tags in a list. I'm using CSS styling to determine how my headers look, and I want the options to look like headers, so it would look like this:

Title

• Header 1
• Header 2

I want the Header 1 and Header 2 to be links. However, no matter what I do, I cannot get them to appear as a list and still have the links work. If I use <p> or <br> I can get my line breaks, but the last value in the list is the only one which will work as a link. The others do not. I have also tried a list in CSS (<ul>). If I take out all tags, the <apex:outputlink> links appear in a single row, and they all work correctly. As soon as I put anything back, the last option is the only one which works.

Code snippet below:

<style>
h3{
  color:black;
  text-align:right;
  padding:30px;
  font-size:18px;
  line-height:125%;
  border:25px;
}       
</style>

<h2>
    Page Title
</h2><p></p>

  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000001l65y">Link 1</apex:outputLink></h3><br></br>
  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000000HquV">Link 2</apex:outputLink></h3><br></br>
  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000000Hqtx">Link 3</apex:outputLink></h3><br></br>

What am I missing?

Answer 1

I think you are just mising a "/" in your first br. Try this.

<h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000001l65y">Link 1</apex:outputLink></h3>**</br>**</br>
  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000000HquV">Link 2</apex:outputLink></h3>**</br>**</br>
  <h3><apex:outputLink value="{!$Page.CustomPage}?id=a08j0000000Hqtx">Link 3</apex:outputLink></h3>**</br>**</br>

Another tip...When faced with such niggling issues, always use a tool like JsFiddle to help you troubleshoot...Replace the apex tags with their html versions. For example, <Apex:outputlink> corresponds to an anchor tag (<a href>)

I created one for you to continue to test with.

https://jsfiddle.net/33s4ku8j/

EDIT:

Updated code after finding the problem with the CSS.

<apex:page >
 <style>
h3{
  color:black;
  text-align:right;  
  font-size:18px;  
  border:25px;
}       
</style>

<h2>
    Page Title
</h2><p></p>

   <ul>
  <li><apex:outputLink value="/?id=a08j0000001l65y"><h3>Link 1</h3></apex:outputLink></li><br/>
  <li><h3><apex:outputLink value="/?id=a08j0000000HquV">Link 2</apex:outputLink></h3></li><br/>
  <li><h3><apex:outputLink value="/?id=a08j0000000Hqtx">Link 3</apex:outputLink></h3></li><br/>
  </ul>
</apex:page>