www.webdeveloper.com
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 35

Thread: W3 validation problems

  1. #16
    Join Date
    Apr 2013
    Posts
    18
    I copied and pasted the code you posted on Pastebin. I wonder if we are having a misunderstanding after looking at the pictures you attached. The problem I am having is not the "main" menu bar. It is when I am hovering over for example "products" and get the drop down menu. I wanted to send you some screen prints I have but I cannot see how I can attach a picture here.

  2. #17
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    I understand what you mean on the drop down menus. Trying to multi-task at the time and just forgot to check. I see where Safari is forcing the dropdown portions horizontally. I'll work on it as time permits, but meanwhile, you might want to try this online tool:

    Pure CSS Menu

    This worked in Safari: http://css3menu.com/elegant-dark-menu.html

    Just need to modify to fit your scheme.

    From Safari Books Online: Creating a Navigation Menu
    Last edited by Major Payne; 04-11-2013 at 09:30 AM.

  3. #18
    Join Date
    Apr 2013
    Posts
    18
    Again - thank you. Would you be interested in making this menu bar for me - maybe the elegant dark menu - which looks nice. It needs to be in the same place as the menu bar is now with the same fonts bla bla bla. I of course do not expect this to be free. If you are interested in that please give me an offer and if I accept I will donate you the money via your website.

  4. #19
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    I'll make it for you. Not sure how soon I can get on it.
    Last edited by Major Payne; 04-12-2013 at 01:13 AM.

  5. #20
    Join Date
    Oct 2012
    Posts
    41
    Looking at the example URL you supplied, the CSS is applying display:inline and float:left to ALL the li elements in the main nav. What you want to do is only apply these properties to the top level links, but apply display:block;float:none; to the li elements in the drop down.

    #navMenu ul li ul li{display:block;float:none;margin-bottom:10px;}
    #navMenu ul li ul li a{height:auto;line-height:1.2em;}

    This CSS:
    stacks the dropdown list items vertically
    adds an arbitrary 10px bottom margin to each list element to control the vertical spacing between links
    resets the height of the link tag to auto (the height and line height are set at 30px for the top level links)
    resets the line height of each link to the default value

  6. #21
    Join Date
    Apr 2013
    Posts
    18
    Dear rh_lloydnorthov,

    Thanks for your input. I messed around with it and got some results but because I am not very good at css I have probably deleted and changed things in the wrong places. I know it is a drag to explain things to people that does not know a whole lot about a subject but do you mind telling me like I am an idiot;-) Maybe you could explain to me what exactly to delete etc. For example I do not see

    #navMenu ul li ul li

    anywhere in the css document but maybe you mean that I should add it which I did but came up with a funny result.

  7. #22
    Join Date
    Apr 2013
    Posts
    18
    Major Payne,

    Thank you. I liked the http://css3menu.com/elegant-dark-menu.html you sent me but maybe it is easier to make the existing code right.

  8. #23
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Try this one with Safari: http://pastebin.com/ej8hZ9ES

    Redid the CSS of the original nav menu. Modify if you need to. If you still want the elegant dark menu, let me know.
    Last edited by Major Payne; 04-14-2013 at 11:00 PM.

  9. #24
    Join Date
    Apr 2013
    Posts
    18
    Dear Major Payne,
    Thx, I have now uploaded the corrected CSS and the page http://goblinnightvision.com/test4.html and now the menubar drops down, however now the drop down menu under "products" and "about us" is very narrow. I am sure that is probably not a huge deal but I cannot figure it out.

  10. #25
    Join Date
    Apr 2013
    Location
    İstanbul
    Posts
    2
    it seems that u had wrote css style in html tag with "style" attribute,so w3c shows it as a problem

  11. #26
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    http://validator.w3.org/check?verbos...tvision.com%2FJust checked it in Fx and Safari. It was showing a problem for awhile. While I was looking at code, I went back and did a page refresh and all was working in both browsers. You do have more coding errors though:

    30 HTML Errors

    Still have the same two CSS errors. Other two are because the validator flags CSS 3 rules which can be ignored if properly constructed.

    Result: 26 errors / 0 warnings (4 hidden)

    line 67 column 12 - Error: document type does not allow element "br" here; assuming missing "li" start-tag
    line 68 column 10 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 70 column 31 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 73 column 11 - Error: end tag for "li" omitted, but OMITTAG NO was specified
    line 67 column 7 - Info: start tag was here
    line 86 column 12 - Error: document type does not allow element "br" here; assuming missing "li" start-tag
    line 87 column 31 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 89 column 10 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 91 column 10 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 93 column 10 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 95 column 31 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 97 column 31 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 99 column 10 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 101 column 31 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 103 column 15 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 106 column 10 - Error: end tag for "li" omitted, but OMITTAG NO was specified
    line 86 column 7 - Info: start tag was here
    line 130 column 13 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 134 column 12 - Error: document type does not allow element "br" here; assuming missing "li" start-tag
    line 135 column 10 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 137 column 31 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
    line 140 column 11 - Error: end tag for "li" omitted, but OMITTAG NO was specified
    line 134 column 7 - Info: start tag was here
    line 144 column 8 - Error: end tag for "li" omitted, but OMITTAG NO was specified
    line 130 column 5 - Info: start tag was here
    line 249 column 23 - Error: required attribute "type" not specified
    line 251 column 286 - Error: value of attribute "scrolling" cannot be "No"; must be one of "yes", "no", "auto"
    line 262 column 27 - Error: end tag for "p" omitted, but OMITTAG NO was specified
    line 261 column 4 - Info: start tag was here
    line 265 column 75 - Error: required attribute "alt" not specified
    line 266 column 77 - Error: required attribute "alt" not specified
    Last edited by Major Payne; 04-16-2013 at 02:29 PM.

  12. #27
    Join Date
    Apr 2013
    Posts
    18
    I only changed the code on a test page. I do not want to make it throughout the website before everything is good. If you look at this http://validator.w3.org/check?uri=ht...org%2Fservices

    there is only 7 errors. However the menubar does not work correctly on the test page www.goblinnightvision.com/test4.html You will see that the drop down menu is too narrow on "products" and "about us".

  13. #28
    Join Date
    Apr 2013
    Posts
    18
    The css only shows the 2 errors as I also uploaded the corrected css (mainoriginal.css) that I also using as a test

  14. #29
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207

  15. #30
    Join Date
    Apr 2013
    Posts
    18
    Dear Payne,
    The menu bar could work if it had the same width and margins like the menu bar I have now and would have the same design with the green border around the menu bar. I tell you this really drives me crazy. I cannot understand it. I guess css is a lot more difficult and time consuming than html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles