Loading ...

Subtle differences with IE and Chrome | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » Subtle differences with IE and Chrome
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Add a new tab

Add a hyperlink to the space navigation. You can link to internal or external web pages. Enter the Tab name and Tab URL. Upload or choose an icon. Then click Save.

The name that will appear in the space navigation.
The url can point to an internal or external web page.
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Subtle differences with IE and Chrome

Subscribe to RSS
  • cbunts

    How I can make a change to one of our search templates to make the search words (criteria) more visible.  Right now, Chrome shows white letters while the IE version shows gray letters and is not clearly visible when you put in the search criteria.  I just want to make one change so both are clearly visible.

    Any advise?

  • Foster

    Hi Chris,

    Can you share a screenshot of where the issue you are experiencing occurs so we can better help you?

    Thanks,
    Foster

  • cbunts

    Chrome - the "What can we help you find?" line (White).  When you type in a search item, it stays white and you can see it.

    IE - the "What can we help you find?" line (Gray).  When you actually type in a search item, it gets even lighter gray to where you can only faintly see it.

     

  • nvstiers

    Hi Chris,

    please replace this CSS rule in your CSS Overrides starting on line 59

    with this rule below:

    .tfs-full-space-header input, .tfs-space-header input, .tfs-full-space-header input::-webkit-input-placeholder, .tfs-full-space-header input::-moz-placeholder, .tfs-full-space-header input:-moz-placeholder, .tfs-full-space-header input:-ms-input-placeholder, .tfs-space-header input::-webkit-input-placeholder, .tfs-space-header input::-moz-placeholder, .tfs-space-header input:-moz-placeholder, .tfs-space-header input:-ms-input-placeholder
    {
    color: #ffffff;
    font-weight: 500;
    }

    the text is currently grey because that is the default color the Internet Explorer browser uses for input fields 

    Internet Explorer uses different psuedo selectors for input fields than chrome, safari and most other browsers so we have to add additional selectors to account for Internet explorer so the default color can be changed

     

  • cbunts

    Hi,

    Now Chrome has changed to the same way that IE was acting.  It is gray with lighter gray in the search.  

     

  • cbunts

    I should have added that IE is still Gray as well

     

  • nvstiers
    Answered

    Hi Chris,

    try using these CSS rules. I believe the different vendor prefixes need to be separated into their own rules

     

    .tfs-full-space-header input , .tfs-space-header input{
    color: #ffffff;
    font-weight: 500;
    }

    .tfs-full-space-header input::-webkit-input-placeholder, .tfs-space-header input::-webkit-input-placeholder{
    color: #ffffff;
    font-weight: 500;
    }

    .tfs-full-space-header input::-moz-placeholder,.tfs-space-header input::-moz-placeholder{
    color: #ffffff;
    font-weight: 500;
    }

    .tfs-full-space-header input:-moz-placeholder, .tfs-space-header input:-moz-placeholder{
    color: #ffffff;
    font-weight: 500;
    }

    .tfs-full-space-header input:-ms-input-placeholder, .tfs-space-header input:-ms-input-placeholder{
    color: #ffffff;
    font-weight: 500;
    }

    After you update the CSS rules you may need to clear your browsers cache in order to see the changes

  • cbunts

    That fixed it.  Thank you 

Page 1 of 1 (8 items)