Jump to content
mudmanc4

CSS between firefox and safari

Recommended Posts

We don't seem to have a stylesheet section so here we go. (bet we do soon though  :protest: ) lol

 

I'm finding quite a few style attributes that should be working in both safari as well as firefox but are not. 

 

For instance :

background:
	radial-gradient(black 15%, transparent 10%) 0 0,
        radial-gradient(black 15%, transparent 16%) 8px 8px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
        background-color:#201e1e;
        background-size:16px 16px;

 

Which produces the following "image" <not image ~

post-9745-0-47637500-1377549351.png

 

As well as :

        margin: 25px 0;
	height: 1px;
	background: black;
	background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));

 

Which produces a nice line break ~

post-9745-0-98122600-1377549596_thumb.pn

 

 

A few more have given me troubles, I am aware mozilla and webkit are different, maybe someone can give me a kick in the arse on this ? But the webkit is working in firefox but not in safari Oo

 

thanks

 

SAFARI-   6.0.5

FIREFOX-23.0.1

Share this post


Link to post
Share on other sites

Try 

background:
	-webkit-radial-gradient(black 15%, transparent 10%) 0 0,
        -webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
        -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
        -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
        background-color:#201e1e;
        background-size:16px 16px;

I think just adding "-webkit-" might help.

 

For IE you'll want to add something like...

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=0, style=2);

Style 2 is radial vs the 1 being linear (Create radial gradient in IE 6+ from stackoverflow)

 

 

The other one... try something like...

margin: 25px 0;
	height: 1px;
	background: black;
	background: -webkit-linear-gradient(left,white,white 50%,black);

I think you just need to tweak the syntax a little.

 

I didn't test any of that... Try looking at Apple Dev Linear and Radial Gradients -- post up the correct syntax if you get it working to help others that might read this.   :)

Share this post


Link to post
Share on other sites

Thanks man , you got the neurons firing !

That leaves 50% to the right of the page just on webkit / safari . not ff

I went a few steps more, of course ugly and 5x the markup , none the less. For the line break ~

 

margin-top:25px;
    height: 1px;
    border:none;
    background: #929292;
    width:100%;
    background: -webkit-gradient(linear,0 0,100% 0,  
                from(rgba(50,50,50,0.01)),
                to(rgba(80,80,80,0.01)), 
                color-stop(.5,#5c5a5a)
                );
    background: -moz-linear-gradient(
                left,
                rgba(0,0,0,0.001) 0%,
                rgba(201,201,201,1) 50%,
                rgba(0,0,0,0.001) 100%
                );
    
    background:-ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:-o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);

 

 

Which works in everything I've tried to ie9 including opera. 

 

The background CSS is going to be a bit more complex so I'll post when I get it right. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
Speed Test Version 15.9
© 2019 TestMy Net LLC - TestMy.net - Terms & Privacy