Skip navigation
Currently Being Moderated

Spry Menu bar not working in IE

Jul 23, 2012 5:11 PM

Hi all,

 

I do not mean to repost like this, so please forgive. Not really sure what happened on my 2 other posts, looks like they went dead, so not sure if that means there is no solution?

 

(see my other 2 posts)

Spry Menu Bar not working In IE...is there a fix?

Jul 19, 2012 10:34 AM

 

How to fix my horizontal spry menu...

Jul 11, 2012 8:44 PM

 

After some changes (see the other posts) it still does not work in IE, and I made some format changes (color, centering) that were working and not are not...

 

As always any help is really greatly appreciated...

 

My website is wwwDOTselfdefenseproshopDOTcom

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Jul 23, 2012 5:38 PM   in reply to Dano4193

    I looked at your site in IE9/Win7 Prof and it works fine on my system.  There is no dropdown Menu - Just plain horizontal menu.  Identical in FF 14.0.1

     

    Hope this helps.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 23, 2012 6:06 PM   in reply to mytaxsite.co.uk

    @mytaxsite.co.uk

     

    You have most likely got a PHP server installed on your local system, hence the problem will not expose itself.

     

    @Dano

     

    Have a look at the last few lines in your document

    <script type="text/javascript">

    try {

    var pageTracker = _gat._getTracker("UA-18396243-3");

    pageTracker._trackPageview();

    } catch(err) {}<?php print @$googleanalyticstrackorderinfo?>

    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

    </script>

    Apparently, IE fails to go past this error, therefore the MenuBar will not be constructed.

     

    Remove the green and red coloured code and see how you go.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 23, 2012 7:02 PM   in reply to Ben Pleysier

    Altruistic Gramps wrote:

     

    @mytaxsite.co.uk

     

    You have most likely got a PHP server installed on your local system, hence the problem will not expose itself.

     

     

    Yes I have because I do all the php development on my system including WP, Joomla, & Drupal  I have Apache and MySQL as well.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 1:01 PM   in reply to Dano4193

    Dano4193 wrote:

     

    Now I'm confused, since we have 3 of us in this conversation. Should I be removing the code from my site that Gramps colored in Red/Green?

     

    Thanks for any confusion.

     

     

    So am I because I re-checked your site on my Windows XP machine on which I have IE8 and your site loads fine on it.  This Windows XP hasn't got the Apache server but I don't see what has it got to do with loading a page because I am not loading it from htdocs folder - which is a requirement for local php to kick in.

     

    Which browser are you using or can you elaborate on what exactly is the problem.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 7:27 PM   in reply to Dano4193

    Although, I did download IE-Tester which allows you to test in different IE versions and it does not seen to work there?

    IE-tester shows that you have got a problem 0n line #102. Unfortunately, the tester cannot be relied upon reflecting the correct line number. There is a problem on line #27 where there is no space in front of "type="

    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>

    and line #86 where there is no space before "rel="

    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVer tical.css"rel="stylesheet" type="text/css" />

    Now for my next problem, and if I can get this working I should be in fairly good shape. I had made some formatting changes (centered the menu bar, and made some color changes) See below, however those are now not working..
    Normally, when a question has been answered, it is marked as correct and any new questions are asked in a new post.

     

    However, you caught me in a good mood, just signed contracts for three new projects one as far away as Switserland.

     

    Lines #27 and #28 look like

    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>

    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVer tical.css" rel="stylesheet" type="text/css" />

    Lines #84 and #86 look like

    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>

    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVer tical.css"rel="stylesheet" type="text/css" />

    This may not confuse the browser, but it is not very conducive. Remove either set of links.

     

    When I look at SpryMenuBarVertical.css

    1. change the value of line 16 to auto, has not been done
    2. starting at line 81, change the highlighted values, has not been done

     

    So it is no wonder there are no changes.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 9:42 PM   in reply to Dano4193

    This is what the online version looks loke

    ul.MenuBarVertical

    {

    margin: 0;

    padding: 0;

    list-style-type: none;

    font-size: 100%;

    cursor: default;

    width: 8em;

    }

    and

    ul.MenuBarVertical a

    {

    display: block;

    cursor: pointer;

    background-color: #EEE;

    padding: 0.5em 0.75em;

    color: #333;

    text-decoration: none;

    }

    Also there is a problem with the following lines, it tells me that there is no space between attributes. This was discussed in my previous post.

    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>

    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVer tical.css"rel="stylesheet"type="text/css" />

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 7:45 PM   in reply to Dano4193

    In the first line there should be a space between .js and "type so that it reads

    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js "type="text/javascript"></script>

    and NOT

    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js"type="text/javascript"></script>

    Similarly with the second line.

     

    My apologies for using more than the required two lines.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 8:26 PM   in reply to Dano4193

    That looks OK, but I'll wait until I can see the online version.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 8:56 PM   in reply to Dano4193

    The online version has not changed. Are you sure that you are uploading to the correct place?

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 9:39 PM   in reply to Dano4193

    I don't know what is going on.

     

    Please open the online site in FF. Right click the page and choose 'View Page Source'. This will pop-up a new window with the source code. Go to lines 27 and 28. If you have the latest version of FF, you will see that both these lines are coloured red, which means that there is something wrong with these lines. You will also notice that you place the space between the file extension and the quotation marks. The space should be between the quotation marks and the following attribute type and rel respectively.

     

    Then click on line 28. This will give you the styling as the browser sees it. You will notice that the changes have not been made.

     

    Have you uploaded the modified CSS files to the correct folder??

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 26, 2012 11:06 PM   in reply to Dano4193

    1. Delete lines #27 and #28

    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js "type="text/javascript"></script>

        <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVer tical.css "rel="stylesheet"type="text/css"/>

    2. Copy and paste the following starting at line #27

     

    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>
    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet"type="text/css"/>
    <style>
    ul.MenuBarVertical {margin:auto;}
    ul.MenuBarVertical a {background-color:#DBDBFF;}
    </style>

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 27, 2012 4:10 PM   in reply to Dano4193

    Change the block starting at line #27 to

     

    <script src="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>
    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet"type="text/css"/>
    <style>
    ul.MenuBarVertical {margin:auto; width: 10em;}
    ul.MenuBarVertical li {width: 10em;}
    ul.MenuBarVertical ul {width: 10.2em;}
    ul.MenuBarVertical ul li {width: 10.2em;}
    ul.MenuBarVertical a {background-color:#DBDBFF;}
    </style>

     

    Adjust the values for the widths to suit.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 27, 2012 7:24 PM   in reply to Dano4193

    These are the first few lines of the Home page

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

    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->

    <head>

    These are the first few lines of the child pages

    <html>

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

    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->

    <head>

    The higlighted line throws IE into a frenzy. Remove that line and make sure the DOCTYPE declararion is on the first line.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 27, 2012 11:37 PM   in reply to Dano4193

    Please do the following when using Firefox as the browser while viewing your online site

     

    1. Right click anywhere in the browser window. This will show a pop-up menu as in

    _Capture.jpg

    2. Left click on View Page Source which will show a new window with the markup that the browser sees as in

    _Capture.jpg

    3. Notice <html> on the first line? Also notice that there is no space between the attributes on line 30?

     

    So, to answer your question, nothing has changed to facilitate IE

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 28, 2012 6:20 PM   in reply to Dano4193

    I'm sorry I don't understand what you mean that there is no space between the attributes on line 30? please clarify..does that mean I do need a space? or do not need a space? and where exactly? sorry about that. I am still learning.

    IfIreplytoyouwithoutusingspaces,itbecaomesveryhardtounderstand.

     

    Sotoo,ifattributesarewrittenwithoutaspace,asinthefollowing

     

    SpryMenuBarVer tical.css "rel="stylesheet"type="text/css"

     

    browserswillfindithardtounderstand. Iknowthatther earespace sbuttheyareinthewrongplace.

     

    Now we will insert spaces in our answer and in the right places. See the difference it makes when reading? I know that browsers can translate more of what we write than we give them credit for, but we must get used to sticking to the correct format and that is to separate the attributes with a space. The above becomes

     

    SpryMenuBarVertical.css" rel="stylesheet" type="text/css"

     

    Do you notice the space between the attributes?

     

    Also in your example of where you right clicked, you are right clicking on the PS-2 product that I have...which belongs to my .php shopping cart? so I do not see the html tag if I click on the main page of my site.? also do you mean that the html tag should or should not be there? Again sorry.

    Oh, sorry, I just noticed that in your other post you have declared this topic as being dead. I guess I am wasting my time.

     

    Good day sir.

     

    Grumps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 28, 2012 7:23 PM   in reply to Dano4193

    I know this is off topic, but there could be a parallel.

     

    Last night (in Ozland), I sat back watching the Olympics road race and how Bradley Wiggins, the favourite, used the wrong tactics and finished up losing the race. At the time I was munching away on a potato crisp called Thins because they are not as thick as some.

     

    Have a good day.

     

    Grumps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 28, 2012 8:57 PM   in reply to Dano4193

    Please have a look here http://pleysier.com.au/dano/.

     

    All I did was remove the <html> tag at the top, making sure that the DOCTYPE declaration started on the first line and I added the spaces for the previously named attributes.

     

    What more can I do?

     

    Grumps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 28, 2012 10:57 PM   in reply to Dano4193

    Still not sure what you are conveying to me. I removed the HTML tag from my index, and child pages.

    The index, or Home page never did show the <html>-tag. The online version still shows the <html> tag on all of the child pages.

    And I am still not sure what you mean "added spaces for previously names attributes".

    Sorry, I don't even know what an 'attribute' is. I mentioned seveal times that I am stil learning. Kinda like saying to a beggining Drummer, please make sure your using Regal Tip 5-A's for jazz drumming and  are you using Remo clear heads on the bottom of your snare drum? or, did u use mufflers on your drums? what kind did u use? )))

    I know your feeling. When my GP explains the reason for an ache on the right side of my chest, I don't know what he is saying; too many medical terms for me to worry about. But then I am not about to become a medical practitioner.

     

    You are trying to develop a web site and you are expected to at least know basic HTML and CSS. JS would be handy, but is not initially required.

     

    To understand what an attribute is, you must first know what an element is. For that, have a look here http://www.w3schools.com/html/html_elements.asp. From this, you can conclude that an element consists of an opening tag and a closing tag (with unfortunate exceptions). Within the element we can provide additional information such as rel, type, class, id, style, title just to name a few. The syntax is attribute="somevalue", e.g. rel="stylesheet". Each of these attributes must be surrounded by a space, as I have explained before. This is so that the browser can interpret the instructions properly. That is what I have been saying, yourattributesarenotseparatedbyspaces, oops, your attributes are not separated by spaces. Have a look here http://www.w3schools.com/html/html_attributes.asp

     

    Actually, the main reason that the menu does not show properly in IE is the <html> tag at the start of your document. Remember that an element has a start tag and an ending tag. The <html> tag at the top of your document is an opening tag, yet there is no related closing tag. Not that it matters because the DOCTYPE declaration must be the first thing in your document as you can see here http://www.w3schools.com/tags/tag_doctype.asp

     

    You must understand the above and fix the problem accordingly.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 29, 2012 12:52 AM   in reply to Dano4193

    I guess you win some and you lose some.

     

    I was under the impression that you were desparate to get your web site to show correctly.

     

    I am trying to help, but I keep hitting my head against brick walls.

     

    There is a simple solution:

     

    GET RID OF THE REDICULOUS <html>-TAG AT THE TOP OF YOUR DOCUMENT!!!!!!!!!!!

     

    Have a good day sir!

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 29, 2012 8:08 PM   in reply to Dano4193

    Taking things one at a time, we will tackle index.dwt, which can be found in the Templates subdirectory.

     

    1. Line #28 change

    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css"rel="stylesheet"type="text/css"/>

    to

     

    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet" type="text/css"/>

     

    2. Line #36 add

     

    <script>

     

    3. Line #92 insert a new line containing

     

    <style>

     

    The above will ensure that there are no problems with the template. Make sure that when you save the template, that you also save the changes in the documents that use the template.

     

    When you have done that, please upload all of the changed files to the server so that the changes can be verified

     

    While you do that, I will check to see what is going on with the proddetail.php file.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 29, 2012 8:15 PM   in reply to Ben Pleysier

    It looks like the problem with the stray <html> tag can be found on line #6 of proddetail.php which says

    include "vsadmin/inc/metainfo.php";?><html>

    Remove the red coloured part, save the file and upload so that it can be verified.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 29, 2012 8:42 PM   in reply to Ben Pleysier

    Not quite there yet.

     

    At this stage I see

    <!--
    .style3 {color: #0099FF}
    <style>
    -->

    </style>

    This should read

    <style>

    <!--
    .style3 {color: #0099FF}
    -->

    </style>

    Open index.dwt again and change the position of the red coloured tag.

     

    The rest looks perfect.

     

    Gramps

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points