Question

I use Tao theme http://themeforest.net/item/tao-retina-responsive-wordpress-portfolio-theme/5913809

The website I have issue with is this http://www.thamon.co.uk/ If you open the page with Safari, it overlaps the logo with the body of all pages.

In styles.css I have he following code associated with the header that I believe is somewhat relevant to the problem

.header {
        position: relative; 
    }
        .header .header-primary-content { 
            display: table;
            width: 100%;
            position: relative; 
            padding: 10px 0;
            margin-bottom: 10px;

            border-bottom: 1px solid #e6e6e6; 
        } 
            /* Border shadow */
            .header .header-primary-content:after { 
                content: " ";
                position: relative;
                z-index: -1; 
                bottom: -2px;
                left: 0;
                width: 100%;
                height: 1px;

                background: rgba(255, 255, 255, .5);
            }
                .logo, .header-buttons {
                    display: table-cell;
                    vertical-align: middle;

                }

                /**
                 * Logo
                 */
                .logo {
                    width: 70%;
                }
                    .logo a {
                        display: inline-block;

                    position: relative;

                        width: 120px;
                        height: 40px;
                        margin-left: 410px;

                        vertical-align: middle

                        color: #444652;
                        text-shadow: 1px 1px #fff, 0px 0px #0E0E0E, 2px 3px 1px #E3E3E3;
                        font: normal 400 60px 'Merriweather', Georgia, "Times New Roman", Times, serif;
                    }
                        .no-touch .logo a:hover {
                            animation: tinywiggle 220ms ease-out;
                        }
Was it helpful?

Solution

You put a height of 40px on .logo a when the height of the logo is 120px x 147px. Try matching the height of the .logo a with the img instead or remove the height from the .logo a

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top