Grow your CSS skills. Land your dream job.

Magic Line Navigation Help

  • # May 29, 2011 at 1:22 am

    I implemented the Magic Line Navigation I found online: http://css-tricks.com/examples/MagicLine/
    and it works on mac and pc – but some ie versions the navigation is aligning vertically instead of horizontally. Do I need to give the nav bar a minimum width? less padding? do I need a JavaScript hack?

    http://meredithpicerno.com/complexions/index.html

    Any help would be great -

    # May 29, 2011 at 10:51 am

    Hi mpicerno!

    You’re missing the conditional HTML tags at the top of your page





    The css also needs updating… just this part since older IE’s doesn’t like negative margins:

    #example-two #magic-line-two {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 100px;
    background: #ECC68D;
    z-index: 100;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    }

    # May 29, 2011 at 1:32 pm

    Hi Mottie,

    Thank you for the tips – when i add the conditional html statements i get 3 errors when i validate my page in dreamweaver:
    1. the tag “html” is not allowed within: “head” it is only allowed in [xhtml 1.0 transitional]
    2. the tag “html” doesn’t have an attribute “class” in currently active versions [xhtml 1.0 transitional]
    3. the attribute xml:lang is required when using the attribute lang in xhtml [xhtml 1.0 transitional]

    Should I be concerned with these messages?

    Thank you again!!!

    # May 29, 2011 at 4:10 pm

    You shouldn’t be adding that code into the head… it’s the HTML tag, it should be above it. Look at the Magic Line download in the index.htm. That’s where I copied the HTML I pasted above, except I added your xmlns attribute.

    # May 29, 2011 at 8:24 pm

    Hi Mottie – thank you for the tips – i added the html conditional statements after the however, when i validate my page in dreamweaver, i get the following errors:

    the tag “html” is not allowed within: head it is only allowed within [xhtml 1.0 transitional]
    the tag “html” doesn’t have an attribute: “class” in currently active versions [xhtml 1.0 transitional]
    the attribute xml: lang is required when using the attribute lang in [xhtml 1.0 transitional]

    and this section of my html code is highlighted:

    should i be concerned with these errors??
    thank you!

    # May 29, 2011 at 8:26 pm

    Hi Mottie -
    okay, i pasted the code above the head tag like this:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">






    but i’m still getting 2 of the same errors:

    the tag “html” doesn’t have an attribute: “class” in currently active versions [xhtml 1.0 transitional]
    the attribute xml: lang is required when using the attribute lang in [xhtml 1.0 transitional]

    should i be concerned??

    thank you!

    # May 29, 2011 at 8:56 pm

    Conditional statements go inside the head section.

    If you’re going to use script tags this way

    you might as well switch out your current doctype with an HTML5 doctype. That would clean up most of the errors, otherwise you will have to add

    type="text/javascript"
    # May 29, 2011 at 9:04 pm

    Thank you Christopher – here’s the example I pulled from css-tricks.com:

    < !DOCTYPE html>


















    the conditional statements are both above the head tag and below it – any thoughts?

    # May 29, 2011 at 9:17 pm

    Well, I’m not too familiar with this actually. The conditional statements seem to be incase javascript is turned off so it looks to be correct. Have you tried switching doctypes?

    # May 30, 2011 at 12:33 am

    okay – this is my latest attempt to add the conditional statements to my document:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >





    I only get one error message in dreamweaver related to this:

    the tag “html” doesn’t have an attribute: “class” in currently active versions [xhtml 1.0 transitional]

    and other errors related to the javascript:






    the errors read for each script:
    in tag: script the following attributes are missing: [xhtml 1.0 transitional]

    Mottie – can you give me some help??? Thank you!!

    # May 30, 2011 at 2:32 am

    Question, why are you determined to stick with xhtml? Also, don’t rely on dreamweaver all the time.

    # May 30, 2011 at 11:40 am

    Honestly, I’m no expert at doc types and validation… I just do what this site tells me, when I’m really concerned about validation (which is rarely).

    The second error sounds like you just need to add type=”text/javascript” inside each script tag (which isn’t required in HTML5)… like this:



    # May 31, 2011 at 1:39 am

    Yep, I believe I commented on that in my first post to this discussion.

    Validating your pages can significantly reflect on SEO performance, just an fyi.

    # May 31, 2011 at 3:14 pm

    Thank you all for your help!!!

    # November 26, 2012 at 5:32 pm

    Hello Could someone help’m pretty novice at this, I would love for knowing That Should change it so That When You click on a bar room, stay there and not return to That left by default, ie Left click to give where I clicked acerca , ie the origin is where I am sailing, Which is not a default and always go back to That, but it again in the section of the bar where I clicked ….

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".