SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    horizontal nav bar knocked out of alingnment in ff & ie

    Hello.
    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.
    http://thebigmeow.us/engineering/

    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.
    thx
    D

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    duplicate ids:
    Code:
    (line 76)  <ul id="menu-topnav" class="menu pull-right">
    
    (line 78)  <div class="menu-topnav-container"><ul id="menu-topnav" class="menu">

    two other real error spots (#slide01 and #slide02):
    (lines 155-156) and (line 182-183)
    Code:
    <a href="#slide01">
    <button class="btn primary readMore"><a href="<a href="http://thebigmeow.us/engineering-in-a-creative-work-place/">read more</button></a>
    an odd number of open and close <a> tags. (3)

    <button> and <a> tags improperly nested

    <a href=" stray code



    EDIT:

    This isn't necessarily the fix you are seeking, but it strongly suggests that some of your positioning techniques could be improved. eg:
    Code:
    #logo {
        padding-left: 20px;
        position: relative;  (delete me.  I am not cool.)
        top: -50px;
        margin-top: -75px;   (add me)
    }

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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;"

    thx
    D

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    ... although I still get the dupe warning/error which of course i'd like to fix.
    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.

    Quote Originally Posted by pdxSherpa View Post
    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;"
    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.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <div class="menu-topnav-container">
    			<ul id="menu-topnav" class="menu pull-right">
    				<li>
    				<?php wp_nav_menu( array( 'menu' => 'topNav' ) ); ?> 
    				</li>
    				<li>
    				<?php get_search_form(); ?>
    				</li>
    			</ul>	
    		</div>
    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.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    Being wordpress this is my code on the page.

    Code:
    <div class="menu-topnav-container">
    			<ul id="menu-topnav" class="menu pull-right">
    				<li>
    				<?php wp_nav_menu( array( 'menu' => 'topNav' ) ); ?> 
    				</li>
    				<li>
    				<?php get_search_form(); ?>
    				</li>
    			</ul>	
    		</div>
    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.
    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.

    Quote Originally Posted by pdxSherpa View Post
    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.
    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.

    Cheers

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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 :-)
    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!

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    when I posted it here I thought it was more due to a css issue. Which in a way it is.
    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.

    Quote Originally Posted by pdxSherpa View Post
    & of course some chimps are smarter than others...
    Well, I'm definitely not an astronaut-grade chimp , so I usually assume that "if I can do it, most anyone who wants to can do it, too, and probably do it better"

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

    Take care.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •