I have a mobile web application with an unordered list containing multiple listitems with a hyperlink inside of each li:

<ul>
    <li id="home" class="active">
        <a href="home.html">HOME</a></div>
    </li>
    <li id="home" class="active">
        <a href="test.html">TEST</a></div>
    </li>
</ul>

...My question is how can I format the hyperlinks so that they DON'T change size when viewed on an iPhone, and the accellerometer switches from portrait -> landscape? Right now, I have the hyperlink font size spec'ed to 14px, but when switching to landscape, it blows way up to like 20px. I want the font-size to stay the same. Here is the selector:

ul li a
{
   font-size:14px;
   text-decoration: none;
   color: #cc9999;
}