homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

Navigation issues

 11:10 am on Mar 30, 2013 (gmt 0)

Hello everyone,

I am currently working on a site and the navigation renders different on each browser i.e the on Chrome it seems as if I have entered a hard return on the last two links. How can I get the navigation to be evenly spaced and view properly on all browsers?



 3:13 pm on Mar 30, 2013 (gmt 0)

Welcome to WebmasterWorld, gfxgeek312.

It would be helpful if you posted the menu code (and any relevant css) to illustrate your problems.


 6:06 pm on Mar 30, 2013 (gmt 0)

welcome to WebmasterWorld, gfxgeek312!

have you tried validating your document?


 6:53 pm on Mar 30, 2013 (gmt 0)

Here's the menu code that I am using tbear.
#topnav {
background-color: #01b29d;
float: left;
height: 30px;
width: 100%;
font-family: "Papyrus", verdana, "san serif";
font-size: 20px;
color: #FFF;
font-style: normal;
text-align: justify;
text-indent: 40px;
font-weight: lighter;
padding-top: 7px;
word-spacing: 100pt;

Yes phranque I have tried validating as well as it still renders this way.


 7:14 pm on Mar 30, 2013 (gmt 0)

Are these browsers all on the same device or on different devices?


 7:19 pm on Mar 30, 2013 (gmt 0)

They are all on the same device.


 7:47 pm on Mar 30, 2013 (gmt 0)

"san serif"

I hope you meant sans-serif: hyphen in, quotes out ;)

We still need the html that goes with the CSS. I assume that's a div. But what's inside it? A series of paragraphs, a list, what?

it seems as if I have entered a hard return on the last two links

No such thing as a "hard return" in either html or css unless you're in "pre" mode (html element and/or css whitespace option including "pre-wrap" and "pre-line"). I think it is safe to assume you're not.

Are you sure you want Papyrus? Sure it's pretty and I love it myself, but... I put it on one site-- as images, not text-- and was later embarrassed to learn that everybody and their dog uses Papyrus. It's probably the #2 most stereotypically popular font right now. And it's only got about 75% Windows coverage, close to zero Linux.


 8:11 pm on Mar 30, 2013 (gmt 0)

Yes lucy24 I meant sans serif.

Here's the html

<div id="topnav"><a>Home</a> <a>About</a> <a>Events</a> <a>Menus</a> <a>Gallery</a> <a>Contact</a></div>


 1:20 am on Mar 31, 2013 (gmt 0)

:: much experimentation here, and hope googlebot hasn't crawled while I'm editing ::

Can you dump MSIE <8? What you need is {display: table} and {display: table-cell}. otoh, support for "font-weight" other than "bold" is pretty iffy. And, heck, Papyrus is a pretty slim font already.

You can't use "justify" because that only applies to non-final rows of naturally wrapped text, so by definition it won't work here. And you can't use explicit word spacing because that simply forces one or more menu items to overflow and become invisible. For testing, I gave "a" an explicit background color that was different from the overall background color.

Why do you have "float" in there? Once you've set the width to 100%, it becomes meaningless. Except in certain narrowly delimited circumstances that I can't think of at the moment.

This works in Mozilla, webkit and Opera.

#topnav {
display: table;
width: 100%;
text-align: center;
/* text-align: justify; */
background-color: #01b29d;
font-family: Papyrus, Verdana, "sans-serif";
font-size: 20px;
color: #FFF;
font-style: normal;
padding-top: 7px;
padding-bottom: 4px;
/* float: left; */
/* height: 30px; */
/* text-indent: 40px; */
/* font-weight: lighter; */
/* word-spacing: 100pt; */

#topnav a {border: 1px dotted blue; display: table-cell; padding: 2px;}

The blue border is just so you can see what's happening. The bottom padding is an alternative to setting an explicit height. The padding on the individual <a> elements is just to let your users be a little clumsier ;)

Do you need a height in pixels for any reason? For that matter, do you need an explicit font size? Otherwise, say something like 150%. Experiment to see what "reads" right; Papyrus has a very small x-height so you'll need a bigger size. This in fact will be a problem for users without Papyrus, because sans-serif fonts already "read" bigger than almost all serif fonts. Papyrus is technically in the "fantasy" family. (Comic Sans is technically monospace. I am not making this up.)

Global Options:
 top home search open messages active posts  

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved