Welcome to WebmasterWorld Guest from 54.205.74.11

Forum Moderators: brotherhood of lan & mack

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)

WebmasterWorld Senior Member 10+ Year Member



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)

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



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)

WebmasterWorld Senior Member piatkow is a WebmasterWorld Top Contributor of All Time 5+ Year Member



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)

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



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



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)

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



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

Featured Threads

Hot Threads This Week

Hot Threads This Month