0

I am working on a site/mockup for someone and I have finish it and was testing to make sure it works across several browsers. It works fine in Chrome and Opera, but I was surprised to see that in Safari, every thing is messed up. I don't even know what is wrong, it just looks weird. The website is here: http://addisonbean.com/site/. Also, when I uploaded to my server, the heading in the footer that says "Find Us" got moved down, and to the left, even in Chrome.

I'd appreciate any help. Here is the source anyone who wants that:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WEARWELL</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<header>
    <div id="sub-header">
        <div class="top">
            <div id="sub-top">
                <input type="text" placeholder="Search by keyword or product number">
                <span id="search" class="red-gradient">
                    <input type="submit" value="">
                </span>
                <ul class="red-gradient" id="top-nav">
                    <li>Language</li>
                    <li id="arrow"></li>
                    <li>Where to Buy</li>
                    <li>Login</li>
                    <li>0 Items in RFQ Cart</li>
                </ul>
            </div>
            <span class="clearfix"></span>
        </div>

        <nav id="pages">
            <h1></h1>
            <ul>
                <li>Products</li>
                <li id="current">Resources</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </nav>

        <h2 id="page-title">Resources</h2>

    </div>
<span class="clearfix"></span>
</header>

<section>
    <div id="current-page">Home > <b>Resources</b></div>

    <h3>Lorem Ispum Dolor</h3>
    <nav id="links">
        <li>Wearwell Warrenty PDF</li>
        <li>Maintenance &amp; Upkeep Guide</li>
        <li>Chemical Resistance Guide</li>
        <li>Installation Guide</li>
        <li>2013 PDF Catalog</li>
        <li>Frequently Asked Questions</li>
        <span class="clearfix"></span>
    </nav>

    <h3>Amet Lacinia Nec Hendrer</h3>
    <p id="info">Aenean rhoncus, urna quis faucibus cursus, nunc leo rhoncus velit, vitae aliquam justo lectus eu nunc. Ut elit massa, commodo eget blandit eu, consectetur quis neque. Fusce consectetur libero quis velit mattis dignissim. Sed nibh dui, lacinia nec hendrer vitae turpis.</p>
</section>

<h3 id="bottom">
    We develop working surfaces for industrial athletes
</h3>

<footer>
    <div id="footer-center">
        <table>
            <tbody>
                <tr>
                    <th>Products</th>
                    <th>Resources</th>
                    <th>About Us</th>
                </tr>
                <tr>
                    <td>ErgoDeck</td>
                    <td>Warranty</td>
                    <td>Capabilities</td>
                </tr>
                <tr>
                    <td>Rejuvenator</td>
                    <td>Maintenance Guide</td>
                    <td>News</td>
                </tr>
                <tr>
                    <td>Diamond Plate</td>
                    <td>Chemical Resistance Guide</td>
                    <td>Innovation</td>
                </tr>
                <tr>
                    <td>Grit Shield</td>
                    <td>Installation Guide</td>
                    <td>Request a Demo</td>
                </tr>
                <tr>
                    <td>Rover</td>
                    <td>Download Catalog</td>
                    <td>Request A Site Survey</td>
                </tr>
                <tr>
                    <td>Invision</td>
                    <td>Videos</td>
                    <td>Contact Us</td>
                </tr>
                <tr>
                    <td>Fit Kits</td>
                    <td></td>
                    <td>Terms and Conditions</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>Legal</td>
                </tr>
            </tbody>
        </table>
        <aside>
            <span id="line">
                <img src="img/line.png" alt="">
            </span>
            <span id="content">
                <h4>Find Us</h4>
                <p class="footer-info">
                    Wearwell Inc.
                </p>
                <p class="footer-info">
                    199 Threet Industrial Road <br>
                    Smyrna, Tennessee 37167
                </p>
                <p class="footer-info">
                    Email: <a href="mailto:[email protected]">[email protected]</a>
                </p>

                <div id="icons">
                    <a href=""></a>
                    <a href=""></a>
                    <a href=""></a>
                    <a href=""></a>
                    <a href=""></a>
                </div>
            </span>
        </aside>
        <span class="clearfix"></span>
    </div>
</footer>

</body>
</html>

css/style.css

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
margin: 0;
font-family: helvetica;
background: url('../img/bg.jpg');
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
*:first-child+html .clearfix { zoom: 1; }

.red-gradient {
background: #c33221;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover,  #c33221 0%, #8e2418 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418)); 
background: -webkit-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
background: -o-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
background: -ms-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
background: radial-gradient(ellipse at center,  #c33221 0%,#8e2418 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
color: white;
display: inline-block;
}


header {
background: url('../img/header.jpg');
color: white;
-webkit-box-shadow: 2px 0 6px black;
-moz-box-shadow: 2px 0 6px black;
box-shadow: 2px 0 6px black;
}

#sub-header {
    width: 1200px;
    margin: 0 auto;
}


    .top {
        position: relative;
        right: 0;
        padding-bottom: 20px;
        font-size: 12px;
        font-weight: 200;
    }

        .top input[type=text] {
            margin: 0 1px 0 0;
            border: none;
            padding: 12px;
            height: 28px;
            width: 230px;
            background: rgba(255, 255, 255, .7);
            float: left;
        }

            .top input[type=text]::-webkit-input-placeholder {
                color: black;

            }

            .top input[type=text]::-ms-input-placeholder {
                color: black;
            }

            .top input[type=text]::-moz-placeholder {
                color: black;
            }

        span#search {
            width: 28px;
            height: 28px;
            padding: 12px;
            float: left;
            margin-right: 5px;

        }

        .top input[type=submit] {
            border: none;
            background: url('../img/search.png') 50% 50% no-repeat;
            width: 15px;
            height: 15px;
            padding: 0px;
            float: left;
            position: relative;
            top: -7.5px;
            left: -7.5px;
        }

    #top-nav {
        height: 28px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        #sub-top {
            float: right;
        }

            #top-nav li {
                list-style: none; /* for IE8 */
                display: inline-block;
                height: 28px;
                float: left;
                padding: 8px;
                border-left: 1px solid black;
            }

            #top-nav li:first-child {
                border: none;
            }

            #arrow {
                background: url('../img/nav-arrow.png') 50% 50% no-repeat;
                width: 28px;
                margin: 0;
            }

    nav#pages {
        background: rgba(0, 0, 0, .8);
        height: 64px;
        margin-bottom: 80px;
    }

        nav#pages h1 {
            background: url('../img/logo.png') 50% 50% no-repeat;
            width: 340px;
            height: inherit;
            margin: 0;
            display: inline-block;
        }

        nav#pages ul {
            list-style: none;
            text-transform: uppercase;
            float: right;
            padding: 0;
            margin: 0;
            height: inherit;
            display: inline-block;
        }

            nav#pages li {
                list-style: none; /* for IE8 */
                display: inline-block;
                padding: 20px;
                height: inherit;
                line-height: 34px;
            }

            nav#pages li#current {
                background: #cc3423;
            }

    #page-title {
        float: right;
        background: rgba(0, 0, 0, .8);
        text-align: left;
        padding: 30px;
        padding-left: 40px;     
        padding-right: 375px;
        text-transform: uppercase;
        margin: 75px 0;
    }

section {
background: white;
width: 1220px;
margin: 0 auto;
padding: 15px 25px 100px;
-webkit-box-shadow: 0 3px 10px #555;
-moz-box-shadow: 0 3px 10px #555;
box-shadow: 0 3px 10px #555;
}

#current-page {
    font-size: 12px;
}

section h3 {
    text-transform: uppercase;
    margin: 25px 15px 10px;
}

nav#links {
    list-style: none;
    margin: 0 auto;
    width: 1170px;
    color: #eb6852;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
}

    nav#links li {
        background: #eaeaea;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjRiNGI0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-radial-gradient(center, ellipse cover, #eaeaea 0%, #b4b4b4 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eaeaea), color-stop(100%,#b4b4b4));
        background: -webkit-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
        background: -o-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
        background: -ms-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
        background: radial-gradient(ellipse at center, #eaeaea 0%,#b4b4b4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#b4b4b4',GradientType=1 );

        line-height: 75px;
        width: 382px;
        margin: 4px;
        text-align: center;
        float: left;
        height: 75px;
    }

    nav#links li:nth-child(5) {
        background: #c33221;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-radial-gradient(center, ellipse cover,  #c33221 0%, #8e2418 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418)); 
        background: -webkit-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
        background: -o-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
        background: -ms-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
        background: radial-gradient(ellipse at center,  #c33221 0%,#8e2418 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
        color: white;
    }

#info {
    margin-left: 15px;
}

h3#bottom {
text-align: center;
color: #4d4d4d;
font-size: 40px;
font-weight: 200;
}

footer {
background: url('../img/footer.jpg');
color: white;
}

#footer-center {
    margin: 0 auto;
    padding: 30px 0;
    width: 809px;
}

    footer table {
        float: left;
    }

        footer tr {
            text-align: right;
        }

            footer td {
                padding: 4px;
                padding-left: 30px;
                padding-right: none;
                font-size: 15px;
            }

            footer th {
                text-transform: uppercase;
                padding: 7px;
                padding-left: 30px;
                padding-right: none;
            }

    aside {
        float: left;
    }

        #line {
            margin: 0 35px;
            display: inline-block;
            float: left;
        }

        aside #content {
            float: left;
        }

        aside h4 {
            text-transform: uppercase;
            margin: 7px;
        }

        aside p.footer-info {
            margin: 7px;
            font-size: 15px;
            line-height: 20px;
        }

            aside p.footer-info a {
                color: #cc3524;
                text-decoration: none;
            }

            #icons a {
                height: 34px;
                width: 37px;
                display: inline-block;
                background-repeat: no-repeat;
            }

            #icons a:nth-child(1) {
                background-image: url('../img/icons/fb.png');
            }

            #icons a:nth-child(2) {
                background-image: url('../img/icons/google.png');
            }

            #icons a:nth-child(3) {
                background-image: url('../img/icons/twitter.png');
            }

            #icons a:nth-child(4) {
                background-image: url('../img/icons/youtube.png');
            }

            #icons a:nth-child(5) {
                background-image: url('../img/icons/in.png');
            }

1 Answer 1

0

Try fixing these errors from W3C Validator, clear browser cache and try again in Safari.

Your CSS needs some cleaning up as well.

2
  • I fixed all the errors, but it's still not working.. But this is so weird. Its now messed up in Chrome, but only if I view it on the server. It works fine using file:// Jul 16, 2013 at 2:49
  • But only chrome, its just a slight margin/padding thing or something. Its not as bad Jul 16, 2013 at 2:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.