Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Daniele Manca
Daniele Manca
10,986 Points

Layout messed up on Safari

Folks,

I am working on this project: http://hughes.hostings.co.uk/

Have been doing cross browser testing and came across some issues I cannot explain on Safari:

1) Home page slider is shrunk completely, at least on Safari on Windows OS 2) The sliders' arrows' style is not picked up, there should be padding and the light grey background should cover more space as per the other browsers 3) text decorations on anchor tags were eliminated on my stylesheet but they're still in there on safari

Any ideas?

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

In a nut shell, not all browser works same and even same browser differ from their version. I don't think anyone can give specific answer here but I recommend pin pointing the problem with Safari developer tool then start handling the whacky parts of Safari.

Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man. can you post up the CSS that tou are using to style those elements? I think that may help spot any issues :)

Daniele Manca
Daniele Manca
10,986 Points

Here is the css:

.slick-prev, .slick-next { z-index: 10; }

.slick-prev {
    left: 0;

    &:before {
        font-family: 'icons';
        content: 'e';
        color: black;
        background: $form-fields;
        opacity: 1;
        padding: 30px 10px;

        @include until ($tablet) {
            padding: 18px 5px;
        }
    }
}

.slick-next {
    right: 20px;

    @include until ($tablet) {
        right: 10px;
    }

    &:before {
        font-family: 'icons';
        content: 'd';
        color: black;
        opacity: 1;
        background: $form-fields;
        padding: 30px 10px;

        @include until ($tablet) {
            padding: 18px 5px;
        }
    }
}
rtprjct
rtprjct
30,548 Points

Hey mate, Apple stopped supporting safari for windows a long time ago. The Safari browser for windows is deprecated, therefore a lot of new modern css techniques will need certain fallback solutions to display your website on outdated browsers (ie8,9,10,11, safari for windows etc {I'm assuming a very small percentage of windows users use safari [I also assume a lot of other websites haven't been tested on windows safari as well]}). http://apple.stackexchange.com/questions/68836/where-can-i-download-safari-for-windows.

The only difference I saw when viewing it on Safari on a Mac (most current version of the browser) was your arrows coming from your slick slider plugin. See screenshot: http://i.imgur.com/w8DgApi.jpg

A handy application for cross platform testing btw is: https://www.browserstack.com/

Daniele Manca
Daniele Manca
10,986 Points

I resolved the slider arrow issue in the end, only by setting a fixed width and height to them, it worked, that was the main issue with the layout... Thanks anyway, :)