Highlighted

link only works in Firefox

Participant ,
Apr 24, 2018

Copy link to clipboard

Copied

I'm building a site which has a row of social media buttons. There is a button each for my facebook, twitter, youtube and Amazon pages.

All except one work fine in all my three test browsers (Firefox, IE and Chrome)
The Facebook button only works in Firefox. I've stared at the link until my eyes cross but cannot find anything wrong with the address or the way I've coded it. And it can't be too far wrong or Firefox would not be able to understand it either.

Unfortunately the site is not quite ready to upload so I can't test it as a live site yet. So I'm only able to view it in browsers via the real-time preview.
And because of that, I can't show you.

I'm hoping that once the site, is uploaded to the real world it will work there.
How likely is this? Has anyone else had experiences like this?

This is the code for my four buttons. Can anyone see anything wrong with it?

<!-- Links to Social network accounts -->

  <aside class="socialNetworkNavBar">

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <a href="https://www.facebook.com/tui.allen.7"><img src="images/fb-logo.png" alt="facebook-icon"></a> </div>

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <a href="https://twitter.com/tuiallen"><img src="images/twitter-logo.png"  alt="twitter-icon"></a> </div>

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <a href="https://www.youtube.com/user/tuilorraine"><img src="images/youtube-logo.png"  alt="youtube-icon"></a> </div>

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

        <a href="https://www.amazon.com/dp/B00NHAW4PE">

      <img src="images/amazon-logo.png"  alt="amazon-icon"></a> </div>

  </aside>

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

I tried with all previously named browsers without a problem.

One minor point, you may pay a bit of attention to the following, although this should not affect the workings of the site.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.tuiscope.co.nz%2F

Views

247

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

link only works in Firefox

Participant ,
Apr 24, 2018

Copy link to clipboard

Copied

I'm building a site which has a row of social media buttons. There is a button each for my facebook, twitter, youtube and Amazon pages.

All except one work fine in all my three test browsers (Firefox, IE and Chrome)
The Facebook button only works in Firefox. I've stared at the link until my eyes cross but cannot find anything wrong with the address or the way I've coded it. And it can't be too far wrong or Firefox would not be able to understand it either.

Unfortunately the site is not quite ready to upload so I can't test it as a live site yet. So I'm only able to view it in browsers via the real-time preview.
And because of that, I can't show you.

I'm hoping that once the site, is uploaded to the real world it will work there.
How likely is this? Has anyone else had experiences like this?

This is the code for my four buttons. Can anyone see anything wrong with it?

<!-- Links to Social network accounts -->

  <aside class="socialNetworkNavBar">

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <a href="https://www.facebook.com/tui.allen.7"><img src="images/fb-logo.png" alt="facebook-icon"></a> </div>

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <a href="https://twitter.com/tuiallen"><img src="images/twitter-logo.png"  alt="twitter-icon"></a> </div>

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

      <a href="https://www.youtube.com/user/tuilorraine"><img src="images/youtube-logo.png"  alt="youtube-icon"></a> </div>

    <div class="socialNetworkNav">

      <!-- Add a Anchor tag with nested img tag here -->

        <a href="https://www.amazon.com/dp/B00NHAW4PE">

      <img src="images/amazon-logo.png"  alt="amazon-icon"></a> </div>

  </aside>

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

I tried with all previously named browsers without a problem.

One minor point, you may pay a bit of attention to the following, although this should not affect the workings of the site.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.tuiscope.co.nz%2F

Views

248

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 24, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

There is nothing wrong with the code that you have shown, hence the problem is elsewhere.

Not being privy to all of your code, I can only make a guess that you have used position: absolute; somewhere in your style rules. To test, remove socialNetworkNav ​from each of the links and see if the functionality returns.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 1
Participant ,
Apr 25, 2018

Copy link to clipboard

Copied

Thanks so much BenPleysier for your suggestions and for spending time going through the code.
I read right through the stylesheet and found no  mention of position: absolute;
I also tried removing socialNetworkNav from each link to see if functionality returned. It did not, so I put it back as it messed up the layout.
It may just be something to do with the preview. I might just have to hope it will be okay once uploaded. Just a bit nervous about uploading something that might not be right.
And once its live, people here would have a better chance to find the problem for me I guess.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 0
Adobe Community Professional ,
Apr 25, 2018

Copy link to clipboard

Copied

And once its live, people here would have a better chance to find the problem for me I guess.

Good idea.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 1
Adobe Community Professional ,
Apr 25, 2018

Copy link to clipboard

Copied

It's usually a good idea to debug your work online.  Upload your page and assets to a TEST folder on your remote server.  When done, delete the TEST folder. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 2
Participant ,
Apr 27, 2018

Copy link to clipboard

Copied

I have finally uploaded the site. Was so engrossed in the process of setting up access to the remote server, I forgot to do the whole TEST folder thing that Nancy recommended. So the site went live as is.
I went in to the remote server first and deleted the old website first. Would you believe it's so old it was built in Adobe GoLive? I'd long since lost GoLive off my system so I was doing all updates manually by altering the  code directly on uploaded files on the remote server itself! It was a big old rambling non-responsive website built in the days when your public could only use your website to get to know you because there was no social media back then.
BUT unfortunately I still have the problem described in the first question on this thread. The Facebook button only works in Firefox.
I wonder if someone here wouldn't mind going to the site and trying to work out the problem.
It's here: Ripple and Thalassa

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 27, 2018 0
Adobe Community Professional ,
Apr 27, 2018

Copy link to clipboard

Copied

I tried with all previously named browsers without a problem.

One minor point, you may pay a bit of attention to the following, although this should not affect the workings of the site.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.tuiscope.co.nz%2F


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 27, 2018 2
Participant ,
Apr 27, 2018

Copy link to clipboard

Copied

Thank-you Ben. You solved my problem. I've finally worked out what the problem was.

How's this for stupid?
The only browser I had that was logged in for Facebook was Firefox. It's my own preferred browser.
It was just a matter of entering Facebook password details on the other browsers. I only cottoned on when you said you'd had no problem.
And thanks for that validator link. I will work on that too.
And I must apologize to anyone who spent time on this trying to find non-existent errors when it was all only a stupid blind-spot on my part.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 27, 2018 0