Hyperlinks will not function properly within paragraph tags

It seems that my href links stopped working while in p tags. They work fine when I put them in H3 tags, but then the layout and style sheet formatting get messed up. I'm starting to wonder if this issue is related to the site's CSS or XHTML.

Code snippet - link won't work:

<div id="written_content">
<div id="header_image"></div>
         <h1>How we do it</h1>
         <div id="casestudies">                       
              <p><a href="pdf/3Rivers FCU Case Study.pdf" target="_blank">3Rivers Federal Credit Union</a>
<br />
<br />
Momentum developed a three-pronged, integrated approach with 3Rivers to maximize market potential and increase existing branch productivity.</p>

This snippet allows the link to work but messes with formatting:

 <div id="written_content">
<div id="header_image"></div>
         <h1>How we do it</h1>
         <div id="casestudies">                       
              <h2><p><a href="pdf/3Rivers FCU Case Study.pdf" target="_blank">3Rivers Federal Credit Union</a></p><h2>

<p>Momentum developed a three-pronged, integrated approach with 3Rivers to maximize market potential and increase existing branch productivity.</p>

Here is my CSS:

 #written_content {
width: 500px;
float: left;
height: auto;
margin-top: 85px;
margin-left: 47px;
 }

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #333;
float: left;
margin-top: 0px;
margin-right: 8px;
margin-bottom: 0px;
margin-left: 0px;
 }
 h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: lighter;
float: left;
margin-right: 0px;
margin-left: 0px;
color: #999;
margin-top: 0px;
margin-bottom: 0px;
font-style: normal;
}


#written_content p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
width: 465px;
margin-top: 60px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: justify;
color: #999;
line-height: 17px;
}

 #casestudies{

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
width: 500px;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: justify;
color: #999;
line-height: 17px;

I never expected to encounter this problem. Can anyone help me figure out why this is happening?

htmlcssxhtmlhyperlinkparagraph

Answer №1

I created a small demonstration for you using your code, and it appears to be functioning correctly. You can view it here: http://jsfiddle.net/TGVWv/

There were a few closing tags missing in the code snippets you provided, but I believe that was just an oversight during copying.

I recommend sticking with your initial HTML example as the second one generates invalid HTML. Placing a <p> inside an <h2> is not allowed and also isn't semantically correct. While it may work in most browsers, it's not advisable for SEO purposes.

Upon further inspection of your link, I couldn't find any mistakes that would explain why it's not working for you. Could you possibly share the link to the actual page where it's located?...

Edit: After reviewing the page you shared, it seems there's an issue unrelated to the link itself. A transparent div is positioned on top of it, preventing access to the link. You could try adjusting your CSS with something like this (you may need to adjust the values):

.sidebar {
height: 150px;
width: 400px;
text-align: right;
position: absolute;
top: 230px;
right: 0;
}

This adjustment should resize your sidebar and prevent it from covering your link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The div display property in a media query

Below is the css styling for a specific div: .titleHome { position: absolute; top: 10px; left: 12px; width: 80px; height: 50px; z-index: 8; } My goal is to hide this div when the screen width exceeds 900px, and make it visible whe ...

cssmedia-queries

I utilized the "data-target" attribute to ensure the active link retains its style. Is there a way to preserve the style when navigating away from an active link?

Can someone assist me with this re-upload? I need help tweaking my code to maintain style when navigating between pages using the "data-target" attribute. Currently, the style is being lost when moving from the original link (e.g., "link/sub01.html") to a ...

javascripthtmljquerycss

What is the best way to continuously swap out images inside a div every second, except when the mouse hovers over

I recently posted a question on Stack Overflow about displaying an image in a div when a specific link is hovered over, and thanks to the help of user adeneo, I was able to find a solution (jsFiddle): HTML Markup: <div id="imgs"> <img src="h ...

javascriptjqueryhtmlcsshover

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

javascripthtmlangularjsangularjs-scopehref

Using PHP's DOM to extract the text within a td class

I'm brand new to working with the Document Object Model (DOM), so please be patient with me. I am attempting to extract specific content from a web page where there are citations, with the webpage URL. The target element I'm trying to access is: ...

phphtmlparsingdom

What types of video formats will be accepted?

I tried searching on Google but couldn't find the answer. I am curious to know, when using an input file like this: <input type="file" accept="video/*"> Which video formats are allowed for upload? I attempted to upload a .flv file and the ...

htmlvideo

Looking for a custom header logo that seamlessly blends with your image slider?

I'm just starting to learn about HTML and I'm trying to create a header with a logo overlapping on an image slider. I followed the method mentioned in this post: How would you make two <div>s overlap? Unfortunately, I'm still having t ...

htmlcss

Hidden background image not shown

While working on a component in vue.js, I encountered an issue where the image is not being displayed within the specified tag: <b-icon v-if="displayShowHistory && checkRole('showHistory')" class="backlight show-modal-ic ...

htmlcssvue.js

Why is Google Chrome cutting off parts of my website?

Has anyone encountered the strange rendering issue in Google Chrome? Check out this bug here http://community.mediabrowser.tv/uploads/site_1/126/annoying_rendering_bug.jpg I sometimes experience it when I visit What is causing this issue? Is there a way ...

htmlcssgoogle-chrome

What could be causing my submenu to not display the specified hover effect?

Help needed troubleshooting dropdown menu issue in HTML and CSS. Using :hover to switch from display:none; to display:flex;. Want submenu to appear when hovering over "Unsere Produkte". Grateful for any assistance. Thank you. /* Desktop Navigation Bar ...

htmlcsshover

What is the procedure for eliminating the underline located at the bottom of the table?

Can anyone please assist me with removing the underlines at the end of the table? I find it quite unattractive and can't seem to figure out how to remove it. https://i.sstatic.net/stvHt.png https://i.sstatic.net/YYbrX.png Below is the code snippet ...

htmlcssbootstrap-4bootstrap-5

What are two ways to tell them apart?

<?php if($_SERVER["REQUEST_METHOD"] == "POST") { } ?> <form action = "" method = "post"> <label>Name of vegetable</label><br> <input type = "text" name = "vegetable" class = "box" placeholder="Enter Ve ...

phphtml

Trigger a function when a button is clicked

This is an ongoing project that includes a calculator and other features. Right now, I am working on a functionality where when you input a number into the calculator results and press "+", it should trigger onClick to check if the input was an integer o ...

javascripthtmlonclick

The form within the while loop is only functioning with the initial result

Within a while loop, I have a form that is being processed with ajax. The issue is that it only works on the first form and not on the others. Can someone take a look? <?php while($a = $stmt->fetch()){ ?> <form method="post" action=""> ...

javascriptphpjqueryhtmlajax

Creating an Android game with the utilization of HTML5 and Javascript involves the adaptation of images to various screen resolutions

Currently, I am working on creating a basic game for android devices by utilizing HTML5, javascript, and cordova for wrapping it up. One of the key features of my game will involve using an image as a background and animating it to create a dynamic visua ...

javascriptandroidhtmlscreenresolution

What is the most efficient way to toggle the enable and disable functionality of a submit input type after selecting a radio input type?

Can someone help me figure this out? I have a form with multiple groups of radio buttons, and I want to disable the submit button until at least one radio button from each group is selected. The code I've tried so far isn't working as expected. W ...

javascriptjqueryhtmlformsradio-button

Creating a customized icon scheduling feature with CSS

Creating an icon using CSS that looks like the one below seems to be quite challenging. I attempted to achieve it with this approach, but the result was not satisfactory. https://i.stack.imgur.com/5W7Hj.png .schedule { height: 10px; width ...

htmlcss

Insert a new item into an existing list using jQuery

I am looking to enhance user experience by allowing them to easily add multiple sets of inputs with just one click. I have been experimenting with jQuery in order to dynamically insert a new row of input fields after the initial set. My current approach i ...

javascriptjqueryhtml

Challenges of relative positioning with dynamic height based on content

Hello! I'm trying to achieve this https://i.stack.imgur.com/Q6lXP.png In this case, there are 3 divs. The top one will have a width of 100% and a height of auto, with relative positioning. The second div is similar, but I plan to add some dummy text ...

htmlcss

Title size in css

<div class="products_list products_slider"> <ul> <li> <a id="ContentPlaceHolder1_rptCategoryProducts_hlProductImg_0" class="product_image" href="/Urun/Oyuncak/woodoy-100-parca-kovali-ahsap-oyuncak-bloklar/7078"> <div class="produ ...

css