Jump to content
View in the app

A better way to browse. Learn more.
FMForums.com

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

CSS Gradient in Web Viewer

NickOE
in Web Viewer

Featured Replies

I have a CSS Gradient in a Web Viewer. It works great on all web browsers except IE10. It will not display if IE10 is installed.

 

Here is the code in the web viewer:

"data:text/html," & 

"<style>body { border: 0; margin: 1; 
background: -webkit-linear-gradient(top,  #16517c 0%,#174a74 100%); 
background: -ms-linear-gradient(top,  #16517c 0%,#174a74 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16517c', endColorstr='#174a74',GradientType=0 ); }
</style>"

If I use the same code in an html page it displays in IE10. I just will not display in the web viewer.

 

Here is the code for an html page:

<html>
<head>
<style>body { border: 0; margin: 1; 
background: -webkit-linear-gradient(top,  #16517c 0%,#174a74 100%); 
background: -ms-linear-gradient(top,  #16517c 0%,#174a74 100%); 
background: linear-gradient(to bottom, #16517c 0%,#174a74 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16517c', endColorstr='#174a74',GradientType=0 ); }</style>
</head>
<body>
</body>
</html>

I would really appreciate any help.

So why the difference between the web viewer code and the other code?

 

Of course it doesn't display anything. You didn't tell it to display anything.

 

There is no html, head, or body part in your web viewer code.

To be more explicit, the web viewer code should be:

 

"data:text/html," &

"<html>

<head>
<style>body { border: 0; margin: 1;
background: -webkit-linear-gradient(top, #16517c 0%,#174a74 100%);
background: -ms-linear-gradient(top, #16517c 0%,#174a74 100%);
background: linear-gradient(to bottom, #16517c 0%,#174a74 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16517c', endColorstr='#174a74',GradientType=0 ); }</style>
</head>
<body>
</body>
</html>"

  • 6 months later...
  • Author

The web browser does not care if you have <html>, <head>, or <body>

 

All web browsers will take any text that is given to it and views it as HTML

In this case...

 

You have applied a style to a html tag called body.

 

You have not actually put a tag called body in the web viewer code. Therefore the style cannot be applied, irrespective of actually writing standards compliant code....

Create an account or sign in to comment

https://fmforums.com/topic/88386-css-gradient-in-web-viewer/
Go to topic listing

Similar Content

Important Information

By using this site, you agree to our Terms of Use.

I accept

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.