Adding code to header works in Firefox, not Safari

I’m trying to add a “Quick Links” line below the main navigation of https://artalicious.org. I’m using WordPress 3.2 running Twenty Ten.

The look I’m going for is this:
https://imageshack.us/photo/my-images/6/quicklinksj.jpg/

I added the following code to header.php after the final </div> and before the <div id="main"> at the very end of the file:

<p style="color: black; font-size: 12px; font-weight:bold; font-family:sans-serif; line-height:3;">
QUICK LINKS: <a href="https://artalicious.org/visit-art-a-licious/entertainment" style="text-decoration:none; color:black;">Entertainment Schedule</a> | <a href="https://artalicious.org/visit-art-a-licious/where-to-find-us" style="text-decoration:none; color:black;">Directions</a> | <a href="https://artalicious.org/get-your-2011-art-a-licious-pins" style="text-decoration:none; color:black;">Get your Art-A-Licious pins</a></p>

It works in Firefox (see image above), but in Safari, the text ends up half ON TOP of the top right corner of the header image, like this:

https://imageshack.us/photo/my-images/219/quicklinkssafari.jpg/

If I move the code to below the <div id="main">, it shows up the same in both browsers, but way below where I want it to be.

The code is below the portion of header.php that calls the header image and creates the navigation menu; why is Safari rendering part of it on top of the image?