Webkit Gradient and Other Cross Browser Problems

[amberbam]

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.

[Paul O'B]

Hi,

the first think you need to do is provide fallbacks for browsers that don't understand the new css3 properties and also add the -ms prefixe for IE where appropriate and finally the real valid syntax for that property (if it exists).

Follow the examples mentioned here to see the proper way to do gradients that then fallback to an image for browsers that don't understand them.

Using any vendor pre-fixed property is always a risk as they are not a finished spec and there are differences between implementations so use with care and follow standard approaches. In your examples you have limited yourself to moz- and -webkit which leaves all the other browsers out in the cold so always include the real property at least as the final rule. IE9 and -IE10 understand quite a few of the CSS3 rules but need the -ms vendor prefix also.

You can find out support for CSS3 properties quite easily here.

[amberbam]

Thanks, that's helpful.

Do you have any idea why my menu css isn't working in IE? I have 2 separate css documents for the menu. It's not just the gradient of the menu that's not working, it's simply not pulling anything from those css docs.

Edit: Actually, that's not completely true. It seems to be selectively picking which elements to pick up from the 2 CSS docs. I'm sure its hard for you to know what I mean without seeing all the different docs and code.

[Sega]

I had a similar problem on a website I recently did. It was displaying it as white. Once I removed the filter from the CSS3. I used this CSS Gradient Generator, it it included the filter property. Once this was removed it worked okay. I know it's probably not the exact answer you wanted but it helped me in a sticky situation with a client as their links were completely invisible.

When you say pulling anything from the CSS docs what do you mean?

[Paul O'B]

Thanks, that's helpful.

Do you have any idea why my menu css isn't working in IE? I have 2 separate css documents for the menu. It's not just the gradient of the menu that's not working, it's simply not pulling anything from those css docs.

Edit: Actually, that's not completely true. It seems to be selectively picking which elements to pick up from the 2 CSS docs. I'm sure its hard for you to know what I mean without seeing all the different docs and code.

It seems to be working in IE9 except the menu colours are missing because you haven't set up suitable fallbacks as I mentioned before.

e.g.

.dj-mtmenu li.hover{ 
background: url(image for ie goes here); 
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%);			
				}

You seem to be including the menu code twice although one version looks slightly different I think. In the menu code you have corrupted this section with half written rules:

	.dj-mtmenu {
	padding: 0;
	margin: 0; 
	list-style:none; 
	height: 40px;

	background : -webkit-
        position: relative;
	z-index: 500; 
	font-family: Arial, Helvetica, sans-serif;
	width: 958px;
	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));   
     border-top: 1px solid #939393; 
    position: relative;  
    margin-bottom: 30px; 
	text-align: center;
	}

[amberbam]

Sega: Thanks for the link. And about the 'not pulling anything from the docs' question, ignore that, until I figure out what i mean myself at least lol.

Paul: I was a little confused about the menu css.. i'm just slowly changing it all around. I'm completely getting rid of all of the css3 and just using image gradients I think. This site is made with Joomla so the menu is actually a module that I downloaded, and it came with the two different css files. Not sure why there needs to be two when they seem to be the same. I'm curious about how you are able to get in and see my code and then copy it onto here. I have firebug, is it something like that?

[Paul O'B]

I'm curious about how you are able to get in and see my code and then copy it onto here. I have firebug, is it something like that?

I use Firebug to look at the code but to grab code easily I use the webdeveloper toolbar which lets you see and edit css on the fly. Another great tool for debugging sites is CSS terminal which lets you test new css on live sites without having to upload new css.

Even without those tools I could simply follow the path to the css file from View Source (in Firefox select view source and in the window that opens just click the link in the href of the style element and it will load the css in that wndow).

[amberbam]

My BIG question/problem now is that the menu isn't working properly in IE8. Its like the browser is trying to display the menu vertically, so home is in the middle of the menu bar and you can see one other option and then it is cut off. How could this be??? Any ideas?

Edit: Scratch that.. I am in IE8 and it works horizontally, but on another computer in IE8 it's not working. Could this be because of screen resolution? Would it be because I defined width in pixels?

[Paul O'B]

My BIG question/problem now is that the menu isn't working properly in IE8. Its like the browser is trying to display the menu vertically, so home is in the middle of the menu bar and you can see one other option and then it is cut off. How could this be??? Any ideas?

Edit: Scratch that.. I am in IE8 and it works horizontally, but on another computer in IE8 it's not working. Could this be because of screen resolution? Would it be because I defined width in pixels?

It Looks ok in my ie8 (although I only have IEtester to test it on as I run IE9) but it is broken in IE7. You need to float the anchor as well.

.dj-mtmenu li a.dj-up_a{float:left}

If an element inside a floated element is in haslayout mode it stretches the float to 100% width of the parent. The solution is to float both.

[amberbam]

That fixed it for the other computer in IE8, thanks so much!! I have so much to learn..