Welcome to WebmasterWorld Guest from 184.72.145.109

Forum Moderators: brotherhood of lan & mack

Message Too Old, No Replies

Navigation issues

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

New User

joined:Mar 30, 2013
posts: 4
votes: 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)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 10, 2002
posts:927
votes: 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)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10542
votes: 8


welcome to WebmasterWorld, gfxgeek312!

have you tried validating your document?
6:53 pm on Mar 30, 2013 (gmt 0)

New User

joined:Mar 30, 2013
posts: 4
votes: 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)

Senior Member

WebmasterWorld Senior Member piatkow is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 5, 2006
posts:3284
votes: 12


Are these browsers all on the same device or on different devices?
7:19 pm on Mar 30, 2013 (gmt 0)

New User

joined:Mar 30, 2013
posts: 4
votes: 0


They are all on the same device.
7:47 pm on Mar 30, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12693
votes: 244


"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.

<ot>
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.
</ot>
8:11 pm on Mar 30, 2013 (gmt 0)

New User

joined:Mar 30, 2013
posts: 4
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12693
votes: 244


:: 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.)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members