Search the Community

Hello guys...I couldnt find anything about this kind of background in w3school either here, in the forum, so I will post a couple of links where explain and develop the LINEAR and RADIAL gradients syntax. Anyone knows why there is nothing in w3school? I'm a newbie so maybe I couldnt find it, it is worthless or... but if there are others like me I hope it will be helpfull. C U

I have a "pushed down" effect applied to active tabs in a navigation bar I made. It works in Opera, Safari, and Chrome. However, Firefox doesn't do the gradients for me. Is this Firefox's problem, or a syntactical error? Relevant code: #header .active { background-color: #eee; background-image: -moz-radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -moz-radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -moz-linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238)); background-image: -o-radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -o-radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -o-linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238)); background-image: -webkit-radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -webkit-radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -webkit-linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238)); background-image: -ms-radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -ms-radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), -ms-linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238)); background-image: radial-gradient(-2% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), radial-gradient(102% 68%, 6% 47%, rgba(0, 0, 0, 0.5059), rgba(0, 0, 0, 0)), linear-gradient(bottom, rgb(238, 238, 238), rgb(193, 193, 193) 35%, rgb(238, 238, 238));} Site: http://www.alaskavoicesforfreedom.com/about

I actually think I figured this out while my account was being validated, but I'm not 100% sure I did it right. It looks totally messed up inside Dreamweaver, but perfectly fine in my browsers. It's resizing correctly and working like it should, but the Dreamweaver thing is making me feel a little uneasy. I don't want this to fall apart. Anyway, I made a beautiful MS Paint illustration of what I'm going for. My placeholder version currently looks like this, which is great since it works. The code is down below. Styles html, body {padding:0px;margin:0px;}#wrapper {height:100px;overflow:hidden;}#left {background:#abc;height:100px;width:50%;float:left;}#middle {background:#bca;width:1000px;height:100px;position:relative;left:50%;right:50%;margin-left:-500px;margin-right:500px;}#right {background:#cab;height:100px;width:50%;float:right;} HTML <div id="wrapper"><div id="left"></div><div id="right"></div><div id="middle"></div></div> Would you guys do anything differently?