Databases
StackOverflow2013
Postsdbo
PONav Loading Delay
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONav Loading Delay
    text
    copied!<p>I've noticed an odd loading issue on a site that I built. When the navigation links load at the top of the page, they are displayed in the left hand corner of the browser in their un-stylized form, with bullets, underlines, etc. before loading. <strong>Is there a way that I can code this differently so that it hides the loading process?</strong></p> <p>Here's a couple of images showing the problem during the page load:</p> <p><strong>Nav Loading:</strong> <img src="https://i.stack.imgur.com/i1no7.jpg" alt="Nav Loading"></p> <p><strong>Nav Loaded:</strong> <img src="https://i.stack.imgur.com/1zKfe.jpg" alt="Nav Loaded"></p> <p><strong>Here's a copy of the CSS:</strong></p> <pre><code>/*Header Link Wrap &amp; Align*/ #nav-wrap { width: 100%; overflow: hidden; height: 52px; background-image: url(/images/hlink-bg.jpg); background-repeat: repeat-x; } #nav { text-align: center; margin:0px; padding:0px; } #nav li { list-style: none; display: inline-block; vertical-align: middle; padding: 0px 10px 0px 0px; } #nav a { color: #FFFFFF; display: inline-block; font-family:arial; margin: 0; padding: 9px 18px 9px 18px; text-decoration: none; vertical-align: middle; } #nav a:hover { background-color: #ffa500; color: #fff9; } .head-divider { list-style: none; vertical-align: middle; display: inline-block; margin: 0; width:2px; height:52px; background-image:url(/images/h-divider.jpg); background-repeat: no-repeat; } </code></pre> <p><strong>The HTML:</strong></p> <pre><code>&lt;div id="nav-wrap"&gt; &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="homes.php"&gt;Custom Homes&lt;/a&gt;&lt;/li&gt; &lt;li class="head-divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="inspections.php"&gt;Inspection Services&lt;/a&gt;&lt;/li&gt; &lt;li class="head-divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="energy.php"&gt;Energy Audits&lt;/a&gt;&lt;/li&gt; &lt;li class="head-divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="complete-services.php"&gt;Complete Services&lt;/a&gt;&lt;/li&gt; &lt;li class="head-divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li class="head-divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.newdayhomes.us/blog/"&gt;Blog&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong><em>Your help is greatly appreciated!</em></strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload