I am building a website - newwebsite.prosperaplace.com
I use Firefox, all of the time. I mistakenly thought that the way things were showing up on my screen would be the way it shows up on everyone’s. I am admittedly not that up to par when it comes to web standards. When viewing this website on Internet Explorer I was shocked to see that lots of the elements were white; the background, the yellow line at the bottom above the red footer, and the menu bar doesn’t have the same gradient effect, it is just a black background image. So it didn’t take long to realize that it was the webkit-gradient code that wasn’t working in IE.
Also, the red that I am using and viewing in Firefox is very deep and rich, and the red in IE looks very bright and ‘childish’ to me.
And probably most importantly, in IE 8 (I think?) The menu didn’t even work, all it showed was home in the very middle of the bar. Ahh!
I was hoping for some tips/resources on cross browser coding. Is there any way that I can make the red look the same? Or do I have to make it darker to show up better in IE, sacrificing the colour that I think is perfect in Firefox?
Any help would be greatly appreciated!
PS the webkit code I’m using looks like this:
Body:
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(51,51,51,1)), to(rgba(0,0,0, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(51,51,51,1) 0%, rgba(0,0,0, 1) 100%);
Footer-Menu:
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(255,204,102,1)), to(rgba(204,153,51, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(255,204,102,1) 0%, rgba(204,153,51, 1) 100%);
Menu:
gradient(linear, left top, left bottombottom, from(rgb(111,111,111)), to(rgb(40,40,40)));
background : -moz-linear-gradient(top, rgb(111,111,111), rgb(40,40,40));
Menu Hover:
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(236,23,23,1)), to(rgba(110,0,0, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(236,23,23,1) 0%, rgba(110,0,0, 1) 100%);}
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(111,111,111)), to(rgb(40,40,40)));
background : -moz-linear-gradient(top, rgb(111,111,111), rgb(40,40,40));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
There’s more in the menu, but that will give you the idea.