Horizontal nav bar knocked out of alingnment in ff & ie

I have things working fairly well in chrome. Of course.
but I have done something that is taking the top horizontal navbar out of it’s alignment.
for example.

it is actually supposed to remain in the green strip above it.

i run it trough validator and it indicates a possible duplicate for topnav, but I don’t see it.

duplicate ids:

(line 76)  <ul [color=red]id="menu-topnav"[/color] class="menu pull-right">

(line 78)  <div class="menu-topnav-container"><ul [color=red]id="menu-topnav"[/color] class="menu">

two other real error spots (#slide01 and #slide02):
(lines 155-156) and (line 182-183)

<[color=blue]a[/color] href="#slide01">
<[color=green]button[/color] class="btn primary readMore">[color=red]<a href="[/color]<[color=blue]a[/color] href="http://thebigmeow.us/engineering-in-a-creative-work-place/">read more<[color=green]/button[/color]><[color=blue]/a[/color]>

an odd number of open and close [noparse]<a>[/noparse] tags. (3)

[noparse]<button>[/noparse] and [noparse]<a>[/noparse] tags improperly nested

<a href=" stray code


This isn’t necessarily the fix you are seeking, but it strongly suggests that some of your positioning techniques could be improved. eg:

#logo {
    padding-left: 20px;
    [color=red]position: relative;  (delete me.  I am not cool.)
    top: -50px;[/color]
    [color=blue]margin-top: -75px;[/color]   (add me)

Hello Ronpat!
thanks for the advice. oddly enough I added another menu (which is not even in use) and it seems to have fixed the prob. although I still get the dupe warning/error which of course i’d like to fix.

and for the positing. Thanks for the tip on that as well.
Can you tell me why i was wrong, that way I won’t do it again. I thought for best positioning & z-indexing elementes had to be given a “position: whatever;”


Post #2 shows the two duplicate id’s. You fix that error by changing one of them to a different id.

Post #2 also shows two other real HTML coding problems that are triggering validation errors. Both are similar. Line numbers are given and the nature of the problem is described.

I used colors to highlight the specific items. If you are color-blind, I apologize and will choose another method to identify the specific code.

There is no “one method fits all” solution.

An object must be positioned (other than “static”) to be given a z-index. {position:relative} is commonly used for that purpose.

However, using (position:relative; top:negativesomething} is very unlikely to be a “good” choice. Usually, {margin-top:negativesomething} is better (even if the object is already “positioned”).

Why? Because {position:relative; top:-100px} does not empty the original space occupied by that object.
{margin-top:-100px} moves the container up.
{position:relative} allows one to add a z-index; also anchors nested objects that have {position:absolute}.

Again, if an object has been given {position:relative} so a z-index will work, usually {margin-top:-something} is still the appropriate method to use to move it… usually.

Everything depends on the context in which it sits.

Hello Ronpat thanks for taking the time to write all of that down. nope not color blind.
but one of the probs is that the errors that show up are as of now a bit of puzzler, as to how to get to them.
Being wordpress this is my code on the page.

<div class="menu-topnav-container">
			<ul id="menu-topnav" class="menu pull-right">
				<?php wp_nav_menu( array( 'menu' => 'topNav' ) ); ?>
				<?php get_search_form(); ?>

so there is no dupes there for me to get to.
I am sure there is something insanely clear & it is staring at me…just have not gotten to it yet.
I got one question about validator though. am confused as to why it says row & columns, rows of course make sense…but i don’t have columns.

Well, color me perplexed. Now I understand why those colors and line numbers were meaningless to you. Wordpress is supposed to be fast and easy? This ties in with my “familiarity with your product (Wordpress)” nag in an earlier post :-/. Sorry, afraid I’m cluless beyond HTML and CSS. Maybe you’ll find an answer in the Wordpress forum.

The “columns” number is the character position where the error starts. It presumes a monospaced font. Start from zero or 1 on the left and count each character position as one “column” to the right.


thx Ron. when I posted it here I thought it was more due to a css issue. Which in a way it is.

Wordpress is supposed to be fast and easy?
not so much in my experience :slight_smile:
i think it is relatively fast & easy unless you get to customize add code & feature other than what is provided by the theme.
& of course some chimps are smarter than others…
thx for all the other info!

Yes, the problem you presented is very much a CSS issue. Unfortunately, Wordpress doesn’t appear to make it easy to find the code that needs to be modified.

Well, I’m definitely not an astronaut-grade chimp :lol:, so I usually assume that “if I can do it, most anyone who wants to can do it, too, and probably do it better” :slight_smile:

I think you would impress yourself if you took the time to “hand code” a page or two.

Take care.