Initially, it seems that the navigation anchors in your code are floated without proper clearing to maintain a block-like structure, resulting in broken navigation in IE 7.
According to my understanding, IE 7 may not support the use of nth-child in CSS. You might need to consider alternative solutions like using jQuery or adding a specific class to the table cell for centering content.
I hope this information proves helpful.
Sincerely,
/*UPDATED ANSWER HERE *//
I recommend familiarizing yourself with the concept of "Clearing" floated elements, which you can learn more about here.
Due to the challenges posed by browsers like IE 6 and 7, sometimes you have to find workarounds to achieve your desired layout. I have provided a Jsfiddle demonstrating how your "nav" CSS and HTML should align with current standards.
Furthermore, it would be beneficial for you to understand when to utilize an "id" versus a "class". Since there should only be one "nav" element in your HTML document, assigning it an ID would be appropriate.
If you intend to create an inline navigation, consider floating the "li" elements and applying the "clearfix" class to the "ul" for proper styling and positioning.
To illustrate the importance of "clearing", I included a div after the nav with a paragraph. Removing the "clearfix" class from the "nav" will cause the paragraph to align inline with the navigation, underscoring the necessity of clearing floated elements.
In addressing the issue of centering content within a table, I suggest following the approach outlined in the provided Jsfiddle link, as it offers compatibility across various browsers and devices.