Hi natalija, I can't think of a way to create a normal http:/https: link for that. Usually, if you want a link to launch in a different application, you specify a different protocol at the beginning (like ms-word:) or you tell the browser that it is something it can't handle (like a ZIP archive) so it downloads the file instead. Either way, the user probably will have to take some extra steps (like install Firefox if they don't have it!).

But about your page, generally speaking, it should look very similar in Firefox and Chrome, so maybe there is something easy to fix that would be "good enough" for Chrome users? Forum volunteers could take a quick look, or you could try a developer site. See: Where to go for developer support.

Also, if the layout is critical, you could provide a PDF to your users.

It's not possible to make your link exclusive to Firefox. Any link is just going to open in whatever browser the user is using.

What you could do is use feature detection to detect a browser that's not Firefox and then display a message on the screen suggesting the user download Firefox.

However, it's poor practice to make websites browser-specific and not compatible with all browsers. Generally speaking, websites should display nearly the same in Firefox and Chrome. The two browsers support largely the same features.

It's a much better option, as jscher2000 has suggested above, to troubleshoot and fix any browser-related compatibility issues.

thank you but I don't know how to fix it and have no budget for it.

If anyone from you know how to fix it, I would be grateful. It is about tabs element with subtitle Itinerary on this page - http://virtuology.biz/expedition/. I fixed it temporary so that I spelled the Prague city wrong (as Prag) so you wont see the problem in Chrome right now, but the problem is that because of two letters too many the tabs section overflows into the second row and then the content under each tab is moved to the right so that last tabs' content like that of Barcelona and Milan cannot be read at all. In Firefox is perfect but in Chrome there seems to be one tab too many as the width of the whole element seems to be smaller in Chrome for some reason. I fixed it for now by misspelling one of the tabs name (Prague) but obviously this is not a good solution, so I am looking for a proper one. Any ideas?

When it comes to forcing a link to open in Firefox, I thought this would do it, but I am surprised that this is not possible. I noticed that firefox or google adds firefox name when I search something, like here in this link, after I typed something in search, there appeared in link an adage of "client=firefox-b-d" - https://www.google.com/search?client=firefox-b-d&q=how+to+link+a+page+to+open+it+in+firefox

I thought if I add something like that, that it would then open it in that client (firefox) but it doesn't work. I don't see the point of adding that to the link other than it should use that "client" for viewing it. I don't have the head for these things, so I appreciate help with finding a real solution. Thank you.

In Firefox there are issues as well if you make the screen smaller. When the tabs wrap because of the width of the view port then the next row starts after the currently selected tab . Brussels looks worst for me because the tabs are spread over three rows.

The disappearing text can be fixed by adding a "clear: both;" rule under .tab-content. I don't know how to make the tab row wrap properly, but maybe Jefferson knows.

See line 2936 and below:

• http://virtuology.biz/wp-content/themes/Terra/stylesheets/stylesheet.css

.tab-content {
	clear: both;
}

See:

• https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Hi natalija, to address the strange sizing situation in Chrome, try adding this:

.htabs {
  width: 100%;
}

At full width, that increases the length of that line from 938px to 940px, which is just enough to avoid the wrapping.

cor-el has a good point about the viewport width. If it gets below 960px the design is too narrow to fit the tabs on one row and the content doesn't clear, so this definitely helps:

.tab-content {
  clear: both;
}

You might check with your theme/plugin provider on whether there is a way to make it more attractive when the page resizes.

natalija7 said

When it comes to forcing a link to open in Firefox, I thought this would do it, but I am surprised that this is not possible. I noticed that firefox or google adds firefox name when I search something, like here in this link, after I typed something in search, there appeared in link an adage of "client=firefox-b-d" - https://www.google.com/search?client=firefox-b-d&q=how+to+link+a+page+to+open+it+in+firefox I thought if I add something like that, that it would then open it in that client (firefox) but it doesn't work. I don't see the point of adding that to the link other than it should use that "client" for viewing it.

That is something else: Google pays Mozilla to be the default search provider in Firefox and that "client" part allows Google to know that the search came from Firefox's address bar, search bar, or a search box on the new tab page instead of from using Google's site directly. So they can see their investment paid off. ;-)

Thank you for your replies. My problem is not the disappearing text. Text doesn't disappear. The problem is that the last tab and its content box move to the next row, so when anyone clicks on the couple of the tabs before that, their content boxes are so squeezed that the letters of words are moved down.

Here is how the code on page looks like, so tell me please where did you mean that I should add .tab-content { clear: both; }

or

.htabs {
 width: 100%;

}

[tabs tab1="title1" tab2="title2" tab3="title3"]

/tab [tab id=2] text2 /tab [tab id=3] text3 /tab

I contacted my theme/plugin provider on some other issues before but never got a reply, so I don't bother asking them again.

Hi natalija, those are style rules, so they would go into your custom CSS. Depending on your theme, there may be a predetermined place to add that, or it might be an option for the plugin. Unfortunately that part is very variable so I can't say exactly where it will be.

I am new at using WP so I never changed css before and don't know where to find this css, as there are many of them in this theme. I checked it before on tablet and the smartphone, and it was ok, as the tabs are automatically placed vertically, so the problem is not the size of the screen, but only Chrome (or maybe also some other browsers).

Since I don't know how to fix this via css, is there some other available solution?

Here are some screenshots that show the effect of adding the "clear:both" rule using the Inspector. Paris looks best with this screen width.

At worst if you aren't able to modify the involved style sheet is to add the rules to style tag you already have on your page.

<style type="text/css">
.tab-content {clear: both;}
.htabs {width: 100%;}
</style>

Does your WP installation's Theme Customizer have an Additional CSS link? I got here from the Dashboard by clicking Appearance in the left column, then Customize below that:

More info: https://wordpress.org/support/article/appearance-customize-screen/

Thank you cor-el, but how did you add style in my css? And what browser are you using because it looks very deformed there?

It has additional css btw, here is how it looks like when I click on the Theme editor:

natalija7 said

It has additional css btw, here is how it looks like when I click on the Theme editor:

If you have the Additional CSS item under Customize, add the two new rules there and preview how they affect the page.

what exactly shall I write there? It is an empty sheet, so should I just write this there: .tab-content {clear: both;} .htabs {width: 100%;}

Also, I tried to search the css to find the one that might have tabs but couldn't find it. here's what css I have - am I looking in the right place?

I'm using a basic Firefox 73.0.1 version on Linux.

You need to search for stylesheet.css as shown on line 13 in the screenshot. That should give you this file:

• http://virtuology.biz/wp-content/themes/Terra/stylesheets/stylesheet.css

I'm still curious how to fix the weird wrapping that seems to be caused by the float:left property.

Note that there can be issues if you specify a fixed width and height for elements and a font is used that is wider/larger, so content may not fit and overflow or overlap.

I did it! Thank you guys! I added those two codes in additional css, changed Prag to Prague, checked in Chrome and now is fine!

cor-el, in that stylesheet there is no tab code, so I don't know where there I should add these new codes. Will it be ok if it stays this way now with this codes in the additional css?