Forums

mpicerno

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 -

Mottie

Hi mpicerno!

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

<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en xmlns="http://www.w3.org/1999/xhtml""&gt; <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; <!--<![endif]-->

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;
}

mpicerno

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!!!

Mottie

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.

mpicerno

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!

mpicerno

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"&gt;
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en xmlns="http://www.w3.org/1999/xhtml""&gt; <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; <!--<![endif]-->

<head>

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!

chrisburton

Conditional statements go inside the head section.

If you're going to use script tags this way

<script src="example.js"></script>

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"

mpicerno

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

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
	<meta charset='UTF-8'>
	
	<title>jQuery MagicLine Navigation Demo</title>
	
	<link rel='stylesheet' href='css/style.css'>
	
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script&gt;
	<![endif]-->

		
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script&gt;
    <script src='js/jquery.color-RGBa-patch.js'></script>
    <script src='js/example.js'></script>
</head>

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

chrisburton

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?

mpicerno

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en" xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en" xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" xml:lang="en" xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <!--<![endif]-->

<head>

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:


</script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script&gt;
    <script src="jquery.color-RGBa-patch.js"></script>
    <script src="example.js"></script>

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!!

chrisburton

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

Mottie

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:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script&gt;
<script type="text/javascript" src="jquery.color-RGBa-patch.js"></script>
<script type="text/javascript" src="example.js"></script>

chrisburton

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.

mpicerno

Thank you all for your help!!!

Yotis

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

jenda

Hello,

I would like to use the MagicLine. But on my first page there is no item in the navigation for the first page. How can I define the start position of the MagicLine without the start item on this first page?

Currently there is defined as start item the tag li with class "first".

Thank you. Jenda

treehouse : what would you like to learn today?

Forums

Magic Line Navigation Help