Question

When I view http://www.americaspoeticsoul.com on my iPhone, the menu overflows for some reason. See:

And it even looks worst on the other pages because of the title:

Anyone know why it’s like this? And is there a way to fix it? Here’s the CSS for the menu:

/*Menu*/

#menu {
    margin-bottom:15px;
    width:450px;
}

#menu ul { /* remove bullets and list indents */
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    float:left;
}

#menu ul li a {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#D41C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a:hover {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a.current_link {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

Thanks,

Nathan

Answer 1

You’re discovering one of the downsides of relying on text/fonts within your menu system. There is way too much variability (OS, browser, device, etc.) to expect the text to always behave properly or even use the font you intended.

I use a graphically created menu system which never changes no matter what and a simple text menu in the footer as a fallback.