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!
.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”