Gradient Backgrounds in IE/FF - Overclock.net

Highly-Annoyed · 08-24-08

Hi all,

I would like to set up a web page so that when it's loaded by IE, it gives me a gradiated background (although I have this sorted) but when it's loaded by FF, it shows a flat colour of my choice.

So:

IE: Gradiated.
FF: Flat colour of my choice.

Essentially I want the page to default to a flat colour when FF can't load the DXImageTransform.Microsoft.Gradient background, but I want to be able to choose that colour.

I know I can create a 1px wide Xpx high gradient using image editing software and have both browsers load a gradient and I may try that, but I wanted to try this first.

So, how can I get FF to default to a colour of my choice when it can't load the MS gradient?

Thanks

.

Highly-Annoyed

OasisGames · 08-24-08

Use the image, period. Using proprietary DOM interfaces is just plain stupid, especially when it causes you an obvious problem that you then need to solve.

Also, this should probably be in Web Coding.

lattyware · 08-24-08

The best thing is to make the graident a PNG image 1px wide, and then just set repeat: repeat-x; on it. That way it'll work in all browsers.

Otherwise, easiest way is to do the IE-only stuff in the IE conditional comment tags - look them up.

*dangerousHobo* · 08-24-08

If the gradient is a PNG and is going to have some alpha transparency then it will not work in IE6. You'd then need to use one of the work a rounds to fix it. Simple is better when it comes to front-end development.

Highly-Annoyed · 08-24-08

Quote:

Originally Posted by OasisGames

Use the image, period. Using proprietary DOM interfaces is just plain stupid, especially when it causes you an obvious problem that you then need to solve.

Also, this should probably be in Web Coding.

Well, I'm not really sure what a "DOM interface" is... I don't have any kind of training or education in web creation, I just try to create something I want and usually just use whatever gets the job done, really. My knowledge is directly related to what I've done (as I've had to learn as I went), so it has many holes in it.

I use IE and so do most other people, so that's what I usually build my sites for. Usually they cross over in FF etc without too many troubles (as I don't do anything particularly complex) but from what research I've done, it appears that FF doesn't have anything equivilent to the "DXImageTransform.Microsoft.Gradient" code, for making a gradiated background, so all I end up with is a bright white background. What I'd prefer is if I had a black, or dark gray background.

All I really want is a snippet of code that says "if IE, then DXImageTransform.Microsoft.Gradient, if not IE than #000000" or some other colour. Usually most of this kind of stuff seems be able to be controlled with Javascript, which I don't know very well and tend to modify other people's freely available script, rather than write any myself, but perhaps something exists along these lines you know of?

As I said before though, I'm aware of the concept of creating a thin gradiated line in image editing software and having a browser repeat in over and over, but I wanted to try a solution like the one I've roughly outlined, rather than the image one. In fairness, I did deliberatly mention my awareness of the image gradiation solution in my post, so people wouldn't reply telling me about it... I'm really looking for the nuts and bolts of how to do what I've outlined, rather than being told about a solution I already know is superiour to the one I want to try, if it's possible.

If you don't know how to do what I want, that's fine, neither do I. I'll just keep looking until I either find out, or find it can't be done. In the case of the latter, I'll just use the image solution.

Quote:

Originally Posted by lattyware

The best thing is to make the graident a PNG image 1px wide, and then just set repeat: repeat-x; on it. That way it'll work in all browsers.

Otherwise, easiest way is to do the IE-only stuff in the IE conditional comment tags - look them up.

Yeah, as above; I'm aware the image solution is most browser friendly, I just wanted to try doing it my way, if indeed my way is possible.

I don't know what the "conditional comment tags" are. I may well have used them, but without any kind of proper education in this field, I probably wouldn't know what they're called, even if I was using them... Still, you've given me something to go on I guess. I can always look it up and go from there.

As above, all I'm really after is some way for the page to:

Decided if the browser loading it is IE or not.
If it is IE, load the gradient.
If it's not IE, load a colour I specify as a background colour.

I'm sure there must be some script or other out there that can do this. It doesn't seem to be asking much really, from my amateur point of view anyway.

If either of you guys can help solve the problem in the way I want to solve it, than I'd be appreciative, if not, that's fine, I'll keep on searching until I hit the solution, or a dead end

.

Thanks.

Also: MOD PLEASE MOVE THIS THREAD TO "WEB CODING". SORRY, MY MISTAKE. VERY TIRED

Highly-Annoyed

*dangerousHobo* · 08-24-08

Conditional comment tags

Code:

<head>
  <title>MyPage</title>
    <!--[if IE]>
       
    
    <![endif]-->
</head>

lattyware · 08-25-08

Indeed.

I would seriously reccomend not designing for IE - design to W3C standards.

Firefox and IE are not the only browsers around. If you design to W3C standards, every browser other than IE will work, then just fix IE.

Highly-Annoyed · 08-26-08

Quote:

Originally Posted by dangerousHobo

Conditional comment tags

Code:

<head>
  <title>MyPage</title>
    <!--[if IE]>
       
    
    <![endif]-->
</head>

Excellent. Thank you very much. I'll give that a try

.

Quote:

Originally Posted by lattyware

Indeed.

I would seriously reccomend not designing for IE - design to W3C standards.

Firefox and IE are not the only browsers around. If you design to W3C standards, every browser other than IE will work, then just fix IE.

I'd love some figures on the usage breakdown of all internet browsers? What percentage don’t use IE? What percentage don't use IE or FF?

Still, I understand what you're saying makes sense and is good practice. I guess I just don't take web design very seriously

. What exactly are the "W3C" standards? What exactly is "W3C"? If there are just a few rules to stick to, maybe it wouldn't hurt to try to encompass them when I next put a site together?

I have to say though, "W3c Standards" just summons an image of a massive dark-yellow book, filled with dull and tiresome rules, written using a dull and tiresome writing style and brimming with even more acronyms and abbreviations I don't know and that are unlikely to help fuel any creativity.

Still, I could be wrong, I just don't know. As I said, I usually just do whatever seems to work, I'm certainly no expert and no doubt many, if not all of the sites I've built over the years do not conform to various standards.

Still, feel free to link me. Perhaps there's a wiki?

Highly-Annoyed

lattyware · 08-26-08

The W3C are the ones that tell everyone what XHTML is, what XML is, what CSS is. Think of it this way, the W3C are the dictionary of the web world - they define what the langauges are and how code should be displayed.

I don't know exact percentages, but I'm pretty sure IE still controls half the market - that doesn't mean it is right as a browser.

http://www.w3.org is the W3C site.

Really, all you need to do is run your code through the validator and make sure it passes. If it does, then it means all web browsers should now, and in the future, render it properly. Obviously, not all browsers are perfect, but it's the best bet to create the best site possible, and you can add in code to fix it in browsers that fail (like IE).

Highly-Annoyed · 08-26-08

Quote:

Originally Posted by lattyware

The W3C are the ones that tell everyone what XHTML is, what XML is, what CSS is. Think of it this way, the W3C are the dictionary of the web world - they define what the langauges are and how code should be displayed.

I don't know exact percentages, but I'm pretty sure IE still controls half the market - that doesn't mean it is right as a browser.

http://www.w3.org is the W3C site.

Really, all you need to do is run your code through the validator and make sure it passes. If it does, then it means all web browsers should now, and in the future, render it properly. Obviously, not all browsers are perfect, but it's the best bet to create the best site possible, and you can add in code to fix it in browsers that fail (like IE).

LOL, I ran the following through the checker and it said I had three errors and two warnings...

Code:

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title>IE Test</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="generator" content="">
		 
<!--[if IE]>
<style>

body {filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#000000', gradientType='0');}

</style>	
<![endif]-->

</head>

<body bgcolor="#000000">
		  
<table width="100%" height="100%" align="center" valign="middle" summary="" border="0">
<tr>
<td>		

<table align="center" valign="middle" summary="" border="0">
<tr>
<td><font color="#FFFFFF"><font size="+3"><b>THIS IS A TEST!</b></font></font></td>
</tr>
</table>	 	 


</td>
</tr>
</table>

</body>

</html>

Seems to work as I want in IE and FF though, regardless of errors, although I have no idea how correct it is...

Oh well, never mind

.

Highly-Annoyed

		Overclock.net - Overclocking.net > Software, Programming and Coding > Coding and Programming > Web Coding
Gradient Backgrounds in IE/FF

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)