Website not alligned on Apple products?

HTML & CSS
1

Im currently working on a photography website and having an issue viewing it on Mac, iPhone, iPad etc.

The site is currently located here: http://www.byrnecomputingservices.ie/CP/home-3.htm

The “Contact Us” button is aligned fine on a PC but on an apple product is appears underneath the “Home” button

Any idea what could be causing this? Its driving me mad!

2

.nav has a fixed width. The font on a PC just fits inside that space. The font on a Mac is slightly larger/wider and wraps.

A better method would be to do this:


.wrapper {
    margin-bottom: 50px;
    [color=red][s]margin-left: 15%;[/s][/color]
    margin-top: 30px;
    [color=red][s]width: 70%;[/s][/color]
}
.nav {
    display: table;
    margin: 20px auto;
    [color=red][s]width: 830px;[/s][/color]
}
[color=blue].logo {
    margin: 0 auto;
    width: 70%;
}[/color]

On second thought, these two containers don’t really seem to be necessary:


<div class="nav">
<div id="navtext">

It looks like you can delete them and apply these styles on the ul instead:


.wrapper {
    margin-bottom: 50px;
    [color=red][s]margin-left: 15%;[/s][/color]
    margin-top: 30px;
    [color=red][s]width: 70%;[/s][/color]
}
ul#css3menu1 {
    [color=blue]display: table;[/color]
    font-size: 0;
    position: relative;
    padding: 0;
    [color=blue]margin: 20px auto;[/color]
}
[color=blue].logo {
    margin: 0 auto;
    width: 70%;
}[/color]

“try before you buy”