CODEWITHSUNDEEP
htmlcsscross-browser
Zhengkan Wang
Zhengkan Wang

Reputation: 13

Links bunching up in Safari

I am making a new website, and I am using Dreamweaver. A problem I am running into is my links are bunching up in safari. Here is what it looks like in Firefox

View in Firefox

and its good BUT unfortunately here is what it looks like in Safari

View in Safari

I am using Dreamweaver to develop the websit and CSS of above page looks like this 

#header {
    background-image: url(bg02.jpg);
    height: 10em;
    color: #FFF;
    font-size: 1em;
    text-align: center;
    padding: 0em;
    margin-top: -2em;
    margin-right: 0em;
    margin-bottom: 0em;
    margin-left: 0em;
    width: auto;
}

#header h1 {
    font-size: 4em;
    letter-spacing: 0.1em;
    padding-top: 0.4em;
    padding-right: 0em;
    padding-bottom: 0em;
    padding-left: 0.8em;
    text-align: center;
    display: block;
}

#header a {
    color: #468CEA;
    text-decoration: none;
    display: compact;
    font-size: 1em;
    margin-top: -2em;
    text-align: center;
}

Anyways hope someone can help me. Thanks a lot for looking at this!

Upvotes: 0

Views: 129

Answers (1)

Albert Xing
Albert Xing

Reputation: 5788

Instead of using display: compact (this is hardly supported), try display: inline-block and then play with the padding:

#header a {
    color: #468CEA;
    text-decoration: none;
    display: inline-block;
    padding: 0 5px; /* Change this to whatever suits your needs */
    font-size: 1em;
    margin-top: -2em;
    text-align: center;
}

Upvotes: 2

Related Questions