Hack Forums
Please Help with this header html code, links no longer working. - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Please Help with this header html code, links no longer working. (/showthread.php?tid=5854061)



Please Help with this header html code, links no longer working. - ZanDevious - Jun 25, 2018

I'm making a website in wordpress for a local company. I have the global header wrote out like this:

<div style="margin-top:-15.5%; margin-right:6%">
<h3 style="margin-right:0%">(xxx) xxx-xxxx
<a href="website here hackforums wont let me post links">
<i class="fa fa-google" style="margin-left:18%; font-size:150%"></i>
</a>
<a href="website here hackforums wont let me post links">
<i class="fa fa-facebook-official" style="padding-left: 1%; font-size:150%"></i>
</a></h3>
<h3>Proudly Serving The Grand Strand Since 1981.</h3>
</div>


Can anyone tell me why my 2 href links are no longer clickable. This is the first time i've used direct icon tags but it was working fine the other day.

Thank you for any help. I know my code is probably ugly, but i'm still learning.


RE: Please Help with this header html code, links no longer working. - SN 1006 - Jun 27, 2018

You either need to set target="blank" or make <a href="website here hackforums wont let me post links">LINK TEXT</a>

Anchor/Link tags typically aren't self closing - This means you need to have a closing tag for them -> </a>


RE: Please Help with this header html code, links no longer working. - Jdxo - Jun 27, 2018

Is it simply that your links have collapsed (could be possible since the icons are being dynamically loaded from font awesome which means the browser might have rendered the links with 0 height)? Have you tried things like adding display block to the a tags?


RE: Please Help with this header html code, links no longer working. - Kalabybis - Jun 29, 2018

it's CSS issue. remove margin-top: -whatever; and try to click. Use developer tools for that


(Jun 27, 2018 06:52 AM)SNĀ 1006 Wrote:  You either need to set target="blank" or make <a href="website here hackforums wont let me post links">LINK TEXT</a>

Anchor/Link tags typically aren't self closing - This means you need to have a closing tag for them -> </a>

both suggestions are BS, sorry


(Jun 27, 2018 01:11 PM)Jdxo Wrote:  Is it simply that your links have collapsed (could be possible since the icons are being dynamically loaded from font awesome which means the browser might have rendered the links with 0 height)? Have you tried things like adding display block to the a tags?

Nope, never


RE: Please Help with this header html code, links no longer working. - Jdxo - Jun 29, 2018

(Jun 29, 2018 07:50 AM)Kalabybis Wrote:  it's CSS issue. remove margin-top: -whatever; and try to click. Use developer tools for that



both suggestions are BS, sorry



Nope, never

My suggestion was from experience, I've had that shit happen before (totally dependent on the scenario).

Without seeing the rest of his HTML you can't definitively say the -top margin is the cause because we don't know what other elements may be on the page. If we saw the rest of the HTML then we could easily tell if it was an invisible/visible element over the top of these.


RE: Please Help with this header html code, links no longer working. - Kalabybis - Jun 30, 2018

(Jun 29, 2018 12:05 PM)Jdxo Wrote:  My suggestion was from experience, I've had that shit happen before (totally dependent on the scenario).

Without seeing the rest of his HTML you can't definitively say the -top margin is the cause because we don't know what other elements may be on the page. If we saw the rest of the HTML then we could easily tell if it was an invisible/visible element over the top of these.

And this is why I am saying it is an CSS issue. HTML doesn't behave this way except if you set the A Tags to 0 width or height or both in CSS


RE: Please Help with this header html code, links no longer working. - Two-Ton 21 - Jun 30, 2018

If z-index for the icons is set to -1 and your try to click on them, nothing will happen.