Question

Thanks everyone for taking the time to read this.

I have styled my navigation bar and a few other things on my website using lists. For example…

<ul>
    <li id="n1"><a href="http://www.beaconrecords.com/index.php"></a></li>
    <li id="n2"><a href="artists"></a></li>
    <li id="n3"><a href="lifestyle.php"></a></li>
    <li id="n4"><a href="events.php"></a></li>
    <li id="n5"><a href="shop.php"></a></li>
    <li id="n6"><a href="contact.php"></a></li>
    <li id="n7"><a href="about.php"></a></li>
</ul>

It works perfectly, but when it loads, it kind of like breathes. It starts off shrunken in a little bit, and then expands to its properly place after a second. I do not know what is causing this problem, and I don’t think it’s due to the way I styled the list, as I will show.

This is the website with the problem.
http://beaconrecords.com/

here is a test link that doesn’t have the problem.
http://beaconrecords.com/wp-content/themes/br/test.php

Answer 1

I personally don’t see this as being all that problematic, however, I feel that cutting up the ‘lightning’ spacers into two images is and it’s likely that resolving that issue will also fix your other one. I would extend the images in each li to include a spacer (or even better, use the word image as a background for the links and use the spacer as a background for all but the last {or first} list item).

Right now the lightning bolts are not appearing correctly for me (in Chrome) and this would be a way to ensure that.