Hi everyone,
First I'd like to thank @nandahosting for answering to my post.
After many attempts, I finally found the solution to my problem; I thought I'd share it with you guys so if it ever happened to anyone they could fix it.
So my original css code was :
#menu ul li
{
float: left;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 40px;
margin-right: 40px;
}
Note: What happens is that the margin-right tag added a 40px margin to the right of the last nav link. And doing so told iOS safari that there wasn't enough place for that 40px-margin in the div of the nav bar.
So what I did... Is pretty simple. I changed the css code to that :
#menu ul li
{
float: left;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 69px;
margin-right: 0px;
padding-left: 0px;
}
And I added
this to the html code for the last nav link to "contact" :
<ul>
<li><a id="link1" href="/">Home</a></li>
<li><a id="link2" href="/aboutme">About Me</a></li>
<li><a id="link3" href="/photographs">Photographs</a></li>
<li><a id="link4" href="/guestbook">Guestbook</a></li>
<li
style="margin-right: 0px;"><a id="link5" href="/contact">Contact</a></li>
</ul>
Note: By doing so, I was able to position my nav list with the css and removed the extra "40px-margin" to the right of "contact" in the nav bar by forcing the last list menu to have no margin to its right (see bold text above). Now that the "contact" nav link was 40px shorter, it could actually fit in my div.
Anyways, hope this will help anymore in the future who encounters my same problem.
Cheers,
Olivier