horizontal list navigation breaks when load times are slow

sch3dana · #1 Mar 17th, 2008, 17:45

Hi All,

I have a new site and it has a bug that I don't know how to fix. The navigation and sub navigation is done with a list that is styled with CSS to be horizontal. I am not an expert at this, but learned it from a site, but unfortunately can't remember where

The thing is, the site works most of the time. But when pages load slow, sometimes the list gets displayed as a normal vertical list and the entire "look" of the navigation is ruined. I'm sure I've done something wrong, but I don't know what. Are there any CSS experts here who can set me straight?

The site is http://www.thehousebreakingbible.com/training/index.htm

Thanks for your time, Dana

moojoo · #2 Mar 17th, 2008, 18:06

Sounds to me is when load is slow it does that because the CSS isn't loaded yet. if the server is going really slow and the CSS isn't loaded there is nothing telling the menu how to display.

Aso · #3 Mar 17th, 2008, 18:06

TBH I'm not sure this is a bug. It's rare I admit, but I have seen this issue before.

I think it's simply the server stops responding and/or the browser request fails, and some info fails to download.

sch3dana · #4 Mar 17th, 2008, 18:17

WOW

Thanks so much for your fast replies

So, if the CSS is loading too slow to display, what is the fix? Should I move the menu CSS directly into all the pages? That offends my sense or organization and cleanliness

, but web design is all about compromises. When the pages break it looks terrible. Is there a better way to stop it from breaking or should I just move all the CSS directly into the pages? That will fix it, right?

moojoo · #5 Mar 17th, 2008, 18:29

I have never seen a server crawl slow enough to not load a style sheet. I would keep it in a seperate .css file and keep the main nav as an include if it already is. the call to the style sheet should be in the head of your doc and thus should load early in the process. if this is a recurring issue either look into a faster pipe or a different host whichever the case may be. Not very helpful I know. but if things like style sheets aren't loading you have bigger issues than a crap looking nav.

sch3dana · #6 Mar 17th, 2008, 18:38

I don't think it's a server issue on my end. I have seen it happen at my work where we have a known bug since installing some new hardware, yet to be fixed. The bug is causing a ten second delay on every call for a new file, making our internet at work very slow. I have also seen it on my lap top when the connection to the wireless is weak. I'm sure it is not happening a lot, as most of our users are on fast connections, but I would guess it is happening at least occasionally to people on wireless connections. I really think I'll have to bring the CSS into every single page unless there is a better solution.

Thanks again for your help!

moojoo · #7 Mar 17th, 2008, 18:39

There is nothing wrong with putting all your CSS in the <head>. One way or another it all gets loaded in. Just adds to your file. Try that and see if it makes a difference. 10 seconds is a long time in internet land. I know Safari used to render the HTML before the CSS which for a sec would make the page load unstyled. That is a bugger of a problem.

sch3dana · #8 Mar 17th, 2008, 18:57

Thanks a lot for all your help! I hope I can answer someone's question someday too! It's so nice to make internet friends who can teach you something.

Aso · #9 Mar 18th, 2008, 14:22

Quote:

Originally Posted by moojoo

There is nothing wrong with putting all your CSS in the <head>. One way or another it all gets loaded in.

Quite right. But keeping CSS (and Javascript) in external files means

Separated layout and content (the ideology behind CSS)
Cleaner code - easier to edit
Faster web browsing. Most browsers will cache external files, meaning they only have to be downloaded once.

moojoo · #10 Mar 18th, 2008, 14:27

aso true but he has a sort of unique circumstance. In his case the server delays about 10 secs pulling in external files. Thus placing it in the source will eliminate that issue.

sch3dana · #11 Mar 18th, 2008, 18:32

Quote:

In his case the server delays about 10 secs pulling in external files.

Well, that's true at one location where I've seen this, but not everywhere. Maybe I do have a slow server on the site's end? How would I know?

I was chatting with someone on another list who said they see this occassionally on big sites like CNN, so it's not just happening to me- I may just be one of the few people using a styled list for horizontal navigation, making my site break in a much uglier fashion than most. Maybe the best solution is redesigning the list so that it is not a list?

moojoo · #12 Mar 18th, 2008, 18:53

I use styled lists for navigation 99% of the time, so I don't know what to tell you on that. Did placing the CSS in the head help the issue?

Aso · #13 Mar 18th, 2008, 19:39

It is good practice to use an unordered list for your navigation.

IMO, changing anything will not guarantee any kind of fix. This is a non-defined error. There is no *exact* situation when the list fails to render. For me, it works fine. For all my browsers, it works fine. In fact, it works fine on my other PC too.

sch3dana · #14 Mar 18th, 2008, 20:16

Quote:

For me, it works fine. For all my browsers, it works fine. In fact, it works fine on my other PC too.

For me too. Most of the time it works great. Would you just accept that some small percentage of the time if looks terrible?

Aso · #15 Mar 19th, 2008, 12:56

Yes, I do accept! I totally understand. All I'm saying is I doubt there is much you can do to fix it.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Using a list for navigation, can you center a list?	tonyb	Web Page Design	4	May 9th, 2008 16:26
[SOLVED] Horizontal Navigation Bar	cshanks	Web Page Design	5	Oct 3rd, 2007 15:31
My navigation breaks my wrapper.	tigerslicer	Web Page Design	6	Sep 10th, 2007 10:58
Horizontal CSS Navigation	Lchad	Web Page Design	7	Dec 5th, 2006 19:04
Horizontal list	Krakatoa	Web Page Design	4	May 16th, 2006 13:16

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
horizontal list navigation breaks when load times are slow