Navigation Bar Positioning Issue 1

[quolo]

Hi gang,

I'm having an issue with a navigation bar on a site I'm doing for next to free.

When I or some users look at the site, the horizontal navigation bar appears where it obviously should. When others, using the same OS and browser (IE), see the navigation bar at the top of their screen. The navigation bar lies in a table cell, so I can't understand why it gets bumped up top for some users.

Here is the site:

http://www.epic-rep.com

And here is the table code around the navigation bar:

<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;37%&quot; height=&quot;28&quot; background=&quot;images/linkbarOpener.gif&quot;>&nbsp;</td>
<td width=&quot;63%&quot; height=&quot;28&quot; valign=&quot;top&quot;>
<style>.awmAnchor {position:relative}</style><span id='awmAnchor-MainNav' class='awmAnchor'></span>
</td>

</tr>
</table>

Thanks for any advice.

 

[ChrisHunt]

Don't know what's causing your problem, but here's a couple of things to try...

Declare a DOCTYPE for your document - you say everybody's using IE, but it may different versions. Declaring a doctype makes it more likely that the page will be rendered consistently. More about DOCTYPEs at

http://www.w3schools.com/tags/tag_doctype.asp

, try using HTML transitional.

Get rid of the [tt]<style>.awmAnchor {position:relative}</style>[/tt] from your html page. Instead, put it (without the enclosing <style> tags) in your css file. This shouldn't make any difference, but it's neater! Incidentally, it would be a good idea to call this file &quot;epic.css&quot; instead of just &quot;epic&quot; as the server is more likely to send it with the right MIME type (without a MIME type, Mozilla will ignore your CSS).

Incidentally, solely using Javascript for your navigation links mean that surfers with JS switched off (this includes most, if not all, of the Search Engine spiders) will not be able to get around your site. With that caveat, nice site!

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[quolo]

Thanks, Chris. Great points, all, and I'll give them a go.

Question: When you went to the site, did the navigation bar appear at the top or in the right place?

Also, something I neglected to mention: when I change it to {position:absolute} I see the navigation bar at the top where some users say they are getting it. I'm wondering if that's a clue as to what it happening...could the relative positioning not be registering somehow for some users?

 

[ChrisHunt]

On IE5.5 on my PC it all seems to appear as intended. Tried it on Netscape 7 too, where it's still in the right place but the text is smaller - making the whole thing too narrow.

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[quolo]

Thanks Chris for following up.

I've tried both the stict and transitional doctypes, and on my end I get the same curious result with both. For reference:

Strict Doctype:

http://www.epic-rep.com/

Transitional Doctype

http://www.epic-rep.com/Oldindex.html

No Doctype Specified:

http://www.epic-rep.com/PlayingNow.html

What I see is text set to size=&quot;2&quot; or &quot;x-small&quot; gets a whole lot shrimpier with either doctype specified.

 

[ChrisHunt]

There's an issue with the way different browsers render named font sizes. IE5.x is one size out from everybody else. Read more (and how to fix it) at

http://www.alistapart.com/stories/sizematters/

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

 

[quolo]

Verified with one of my users who has the problem with the naviagation bar at the top that all 3 versions still position the navigation bar at the top.

That A List Apart site is great, though.