4 Replies - 151 Views - Last Post: 02 November 2017 - 07:04 AM

#1 Radius Nightly  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 91
  • Joined: 07-May 15

CSS not the same for each web-browser

Posted 01 November 2017 - 06:26 PM

Firefox showing everything right, perfect, but other web-browsers got various problems. Its hard to see all details thats wrong, first thing i can see are text colors (looks like all web-browsers are using their defaults and not CSS one) and effects (its like each effect works differently for each browser render), background color problems (opera got ICC problems i guess), guess some sizes too because there are different sizes (even they are in pixels)...
There are lots of work (if im gonna notice each detail), is there any converter or help that can help me quickly to set single CSS more reliable for all web-browsers?
BTW Android devices (their main web-browser) blocking fonts too.

This post has been edited by Radius Nightly: 01 November 2017 - 06:27 PM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS not the same for each web-browser

#2 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13491
  • View blog
  • Posts: 53,888
  • Joined: 12-June 08

Re: CSS not the same for each web-browser

Posted 01 November 2017 - 06:29 PM

Yup.. it happens.

Depends on how you are using it all. I mean if you aren't linking things right, using some wonky sizing type, or using a relative path right, you may have issues.. for hte most part the bulk of the CSS should be intact across browsers.
Was This Post Helpful? 1
  • +
  • -

#3 Radius Nightly  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 91
  • Joined: 07-May 15

Re: CSS not the same for each web-browser

Posted 01 November 2017 - 08:49 PM

I found several problems with RGBA. Actually Alpha.
RGBA like "255, 255, 255, 100", if A are not defined, like 255, 255, 255, whole color option are drop by most web-browsers, and they will use their built-in main one (like purple for links), however, Firefox will understand, if Alpha are not set, it means its 100% visible... i rename RGBA into RGB at this things.
Also i had A set somewhere in percentage, like 255, 255, 255, 100% (and it was left like that from time when i was making it long time ago), and most web-browsers do not accept alpha to be defined with % sign, A is in percentage (probably for them 100% means 100%%), same thing, whole color option are dropped, and default are used instead. However, Firefox understand, if A are 100%, it means 100, if its 50, its 50%, A are always in percentage 0.50 (0.00-1.00), 50 (0-100) or 50% (0%-100%), same thing. So i removed %, it was just at one place anyway.

There are a problem with TR, TD, positions and similar, looks like Firefox have 0 or 1px between eg. two columns, and you can define it (if you set 50px, its 50px), while other web-browsers have 2-3px, even you define it (like 50px), this 2-3px are added anyway by web-browser (so it will be 53px), since its small number of pixels, doesnt make much difference, but its not, well, perfect... you know, if you put it down bottom-right, 8x8px from corner, its gonna be like 11x8px from corner if several position/tables were used its increased difference (dont have that problem), so i wont invest my time using each command for IE, and GC to define each one of them.

And there is simply render thing, you know, like color, shadow color, glow color, drown/hard edges of text color, etc. combined at one text with other things, even you set like 50:50 power or so, Firefox can render it right, proportionally 50:50, while other web-browsers force something to be greater then another (like putting 50:50 ratio into 90:10 for white, making whole mix simply almost totally white).
And some differences between default "Browse..." buttons size and similar.

All this problems are actually on Google Chrome based web-browsers.


One more question. There are fonts in CSS, if they are on HTTP://like.com/font/..., and will be used on HTTPS, it will get blocked, logic. I dont wanna put them into HTTPS://like.com/font/... so i used instead just /font/... so it will be used from HTTP/S (depends on what its ATM) from same domain (as i need), and it works great, but peoples saying thats not good thing to do. Why?

This post has been edited by Radius Nightly: 01 November 2017 - 08:50 PM

Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13491
  • View blog
  • Posts: 53,888
  • Joined: 12-June 08

Re: CSS not the same for each web-browser

Posted 02 November 2017 - 06:40 AM

Do you have a minimal chunk of code that shows your areas of contention?
Was This Post Helpful? 1
  • +
  • -

#5 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: CSS not the same for each web-browser

Posted 02 November 2017 - 07:04 AM

At a glance I don't think you can mix integer and percentage values with rgba, unless using the whitespace form:

/* Functional syntax */
rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */ 
rgba(51 170 51 / 40%)    /*  40% opaque green */

Stick to the published CSS specifications, check caniuse.com if you are attempting to use newer CSS features; also validate your HTML and CSS. This will get you nearest to cross-browser consistency. There will always be some slight inconsistencies!

Also, importantly, check your work in a variety of browsers as you progress.

Some people prefer to start with a CSS reset which attempts to flatten differences between browsers.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1