Invisible text in footer only upon opening in new Firefox browser session - css

I have an odd issue with a website that I maintain: On the homepage, the text in the footer menu is 'invisible' (it's there, but the text is the same color as the background) only when I open it in a new browser session in Firefox.
If I navigate to another page on the site, the text is visible. If I navigate back to the home page, or open the homepage again in a new tab, the text is visible. If I open the page in Safari or Chrome, the text is always visible. It's ONLY an issue in Firefox, and ONLY when I open the homepage in a new browser session.
I'm not sure where to begin to debug this problem -- I checked out the CSS for the footer and it looks fine (i.e., the text color is correct).
The site is here: http://uucj.org
Any ideas as to what might be happening?

I noticed when I disabled this style (#mp-brick-174 *) in your CSS for the font family it appeared and was working.
Disabled Style: #mp-brick-174 *
Instead of doing this:
font-family:'Oxygen:Light,300';
Try this:
font-family: 'Oxygen', sans-serif;
font-weight: 300;

Related

Wordpress page complete text gets underlined when page is hovered

I'm creating a website for myself in WordPress using Elementor free plugin and Phlox theme. I've just started and completed a couple of sections. Each section has some text, buttons and some images. The issue I'm facing here right now is that when I open the website and move my mouse pointer inside the Webpage area, the text in all sections gets underlined just like any hyperlink but there is no hyperlink with any text. I've checked settings in customizations and other stuff in theme settings but nothing helped. I'm new on WordPress and don't know how to debug this in any technical depth. Please have a look and tell me how can I fix this issue.
I can't continue with these underlined text appearing all over my page.
Link : myWebPage
Any help is appreciated.
Try this:
.csstransitions .aux-page-show-circle.aux-page-animation-done #inner-body, .csstransitions .aux-page-show-circle.aux-page-animation-done {
height: auto;
overflow: visible;
text-decoration: none;
}
Always attempt to use your browser dev tools to check these things. In your css you have this in your custom.css file. Dont know why its there but thats the cause
body:hover {
text-decoration: underline;
}

Why Extra Space with letter "w" with font-family:arial and font-size:11px?

In IE 11 , the letter "w" comes with extra space.
i.e. : "Password" becomes "Passw ord"
This only happens when font-family = arial and font-size = 11px.
body, table, input, select, textarea {
font: 11px normal Arial, Helvetica, sans-serif;
}
anybody know the reason behind it ?
Seems like IE11 has a problem with letter spacing. To fix this follow this article which says:
...add the Web site as a trusted site:
Open up IE11
Click on Tools on the top menu bar
Click on Internet Options
In the Internet Options popup, click on the Security tab
Then click on the Trusted sites button titled Sites
In the Trusted sites popup (if necessary) uncheck the checkbox labeled Require server verification (https:) for all sites in this
zone
Then add your site’s base URL in the textbox labeled Add this website to this zone (for example: http://example.com)
When you’ve added your site to the trusted sites list, you should see
that the letter spacing problem is now fixed.

CSS: Style a text link in a class

This is a most basic question about formatting text links in css
I have tried to do it myself. I got the hover to work -- at least in firefox. But can't get the default color to work. Only hover.
Please look at this development page http://ogrowby.com/ in firefox.
There is a menu about the middle of the page, called "Test Menu". Please click on that. Then, in the dropdown, go to "TEST LINK".
When you hover over it, the text color changes to Gold. That is fine. But its default text color is black and I want it to be white. I may also want to change the font size, etc. But the main thing is to get the css working to set the default text color for this class to WHITE. #ffffff.
Here's my css so far. The hover is working, but the default remains needs to be changed to #ffffff Only for the .roundedblue class. And it needs to work not only in firefox but other modern browsers.
Any help will be appreciated. Thanks
Rowby
.roundedblue:link,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: white;
}
.roundedblue:hover,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: #FFB300;
}
If that is the only link you want to change, you should add an id to it and change the id's css properties. If you want multiple elements to have the same properties add a class to the element (if it doesn't already exist).
Then simply edit its properties as you would normally.
color:white;
font-size:14px;
...
I simply changed the styles in inspector and it worked for me. added "style='color:white;'" to your span.

css code for alternate windows safari fonts

http://alleystoeden.org/testing3/index.html
in windows safari 5.1.7, the primary navigation, both regular and when hovered don't look right. in fact, when not hovering the main menu is practically unreadable it's so light. the drop down menu is fine and fonts there are rendering properly.
body text (visible on the contact form page) are also rendering correctly.
i've tested it on iphone and it is fine there.
is there some code i can add to this template to fix the windows safari font problem with just the primary menu?
i'm not sure what part of the code i would copy and paste to show what i'm currently using, but if you can tell me the name, i can copy and paste it here.
thanks so much
In your CSS file (styles.css, line 1197) you have the following declaration:
white .nav--primary > li > a {
color: #CCC;
}
Change this light grey to a darker colour and you should be fine.

Is it possible to style search-selection in Firefox?

In Firefox, I can search for text using either
CTRL+F [normal search]
/ [quick search]
' [quick search, links only]
I can style user-selected text / links using
a:focus
a:active
::-moz-selection
However
the first two seem to apply only to user-selected/focused/activated links (by mouse, or TAB-navigating).
::-moz-selection seems to be applied only to the text I manually selected, not the text that is selected due to incremental search. The incremental search match is highlighted by Firefox in the greenish color.
when I search only in links ('), the searched part is being highlighted by Firefox in the same greenish color; moreover, the whole link gets outline; when the quick find disappears (~5 secs), the whole link gets :focus style applied -- not before that.
See the screenshot:
Is there any CSS pseudoclass to allow styling of selection that resulted from the search, not the user hand-selection?
From this mozillazine forum post, you can go to about:config and add one of the following to style different ui.text* settings on the browser chrome:
ui.textSelectBackground
ui.textSelectBackgroundAttention
ui.textSelectBackgroundDisabled
ui.textSelectForeground
ui.textBackground
ui.textForeground
ui.textHighlightBackground
ui.textHighlightForeground

Resources