Website Compatibility Issue [Archive]

Click to See Complete Forum and Search --> : Website Compatibility Issue

dubya

11-30-2007, 10:43 AM

I'm not too good with HTML, so I used Microsoft Frontpage to build a website for my organization. I wanted a gradient background, for which I located some HTML code for and substituted my color choices.

The website appears exactly how I planned on my own system (running Windows Vista), but some friends tried to view it on a Mac using Safari web browser and the gradient will not show up. This is problematic since the text on the page is white and Safari replaces the gradient with a white background.

Would anyone have any suggestions on how I could modify the code so that it would show up in different web browsers?

I appreciate any suggestions.
Dubya

Fang

11-30-2007, 12:36 PM

Show the code

dubya

11-30-2007, 02:02 PM

Sorry about that. Here's the web link and the code that determines the gradient.

http://www.geocities.com/atomicpuppets/

<script language="JavaScript">var PUpage="76001548"; var PUprop="geocities"; </script><script language="JavaScript" src="http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript"> var thGetOv="http://themis.geocities.yahoo.com/themis/h.php"; var thCanURL="http://us.geocities.com/atomicpuppets/index.html"; var thSpaceId="76001548"; var thIP="76.6.161.176"; var thTs="1196452736"; var thCs="93f9e7191987bd7b4ee60efe075cb8a4";</script><noscript><link rel="stylesheet" href="http://themis.geocities.yahoo.com/jsoff.css?thIP=76.6.161.176&thTs=1196452736"></noscript><script language="JavaScript" src="http://us.geocities.com/js_source/geovck08.js"></script>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>index</title>
</head>

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#00FF00', startColorstr='#0000FF', gradientType='0');">

<link href="http://us.geocities.com/js_source/div.css" rel="stylesheet" type="text/css"><script language="JavaScript" src="http://us.geocities.com/js_source/div03.js"></script>

felgall

11-30-2007, 02:50 PM

That gradient code is IE only. If you want a colour gradient ito show in other web browsers you will need to use an image.

WebJoel

11-30-2007, 02:57 PM

I'd just use images, like this:<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
body {background-image:url('red_gradient.gif')}
</style>
</head>

<body style="margin:25px">
<h1>Red Gradient Background Image</h1>
<h2>The image used for this background is 8-pixels tall, but 1500-pixels wide!</h2>

<div style="postion:relative; left:100px; top:250px; width:467px; height:100px; padding:25px 15px; margin-bottom:10px; border:4px dashed blue; background-image:url('blue_gradient.gif') "><h3>And how about this?</h3><p>This DIV uses a background image called "blue_gradient", which is just 8-pixels tall and 500px wide. This DIV is 467px wide (to accomodate internal padding, etc.)</p></div>

<div style="postion:relative; left:100px; top:250px; width:600px; height:100px; padding:25px 15px; border:4px dashed blue; background-image:url('blue_gradient.gif') "><h3>But OPPS!!</h3><p>This DIV uses same "blue_gradient" image, which is 8-pixels tall and 500px wide, but the DIV is now <strong>600px</strong> wide! So, you start to see the image repeated again at the far right....</p></div>

<img src="blue_gradient.gif" style="position:relative; top:25px; left:6px;" />
<p style="margin-top:10px; font-size:1.1em; font-weight:bold; margin-top:35px;">Above: Here is the actual image used for the blue_gradient.<br />
Notice how it is 'sized'. This is it's normal, non-tiling size.</p>

<p>free to use</p>

</body>
</html>
img/s attached

dubya

12-01-2007, 03:28 PM

Thanks for the push in the right direction. I wanted the gradient to repeat horizontally, rather than vertically, and figured out how to make it work after fiddling with it for a bit.

I appreciate your help.
Dubya