Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Missing Navigation Items in IE7?

    Code:
    <div id="navbox">
    			<ul id="dropdown">
    				<li><a class="home" href="/">Home</a></li>
    				<li><a onmouseover="ddopen('dd1')" onmouseout="ddclose()" class="advertisers" href="/marketers/">For Marketers</a>
    					<div id="dd1" onmouseover="ddnoclose()" onmouseout="ddclose()">
    						<a href="/web-design/">Website Design</a><br />
    						<a href="/vertical-marketing/">Vertical Engine Marketing</a><br />
    						<a href="/web-analytics/">Web Analytics</a><br />
    						<a href="/phone-analytics/">Phone Analytics</a><br />
    						<a href="/video-services/">Video Services</a><br />
    						<a href="/search-marketing/">Search Engine Marketing</a><br />
    						<a href="/search-optimization/">Search Engine Optimization</a><br />
    						<a href="/social-media/">Social Media Marketing</a><br />
    						<a href="/web-apps/">Web Applications</a><br />
    						<a href="/content-writing/">Content Writing</a>
    					</div>
    				</li>
    				<li><a class="publishers" href="/publishers/">For Publishers</a></li>
    				<li><a class="last" href="/events/">Events</a></li>
    			</ul>
    			</div>
    The only <li> showing up is Home...stumped and on a deadline

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The only <li> showing up is Home...stumped and on a deadline
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    I suspect the problem is with your CSS.

    Have you tried your code without CSS and without Javascript?

    Here is your code fragment in an xHTML file:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
       <title>Missing Nav Items</title>
       <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
       <meta http-equiv="Content-Style-Type" content="text/css" />
     </head>
     <body>
        
        <div id="navbox">
          <ul id="dropdown">
            <li><a class="home" href="/">Home</a></li>
            <li><a onmouseover="ddopen('dd1')" onmouseout="ddclose()" class="advertisers" href="/marketers/">For Marketers</a>
              <div id="dd1" onmouseover="ddnoclose()" onmouseout="ddclose()">
                <a href="/web-design/">Website Design</a><br />
                <a href="/vertical-marketing/">Vertical Engine Marketing</a><br />
                <a href="/web-analytics/">Web Analytics</a><br />
                <a href="/phone-analytics/">Phone Analytics</a><br />
                <a href="/video-services/">Video Services</a><br />
                <a href="/search-marketing/">Search Engine Marketing</a><br />
                <a href="/search-optimization/">Search Engine Optimization</a><br />
                <a href="/social-media/">Social Media Marketing</a><br />
                <a href="/web-apps/">Web Applications</a><br />
                <a href="/content-writing/">Content Writing</a>
              </div>
            </li>
            <li><a class="publishers" href="/publishers/">For Publishers</a></li>
            <li><a class="last" href="/events/">Events</a></li>
          </ul>
      </div>
        
     </body>
    </html>
    See if the above exhibits the problem you are having in IE7. If not, then the problem is not with the above, but with something you have not shared with us - probably the CSS.

    If you are still having problems, share the missing CSS and javascript with us, and someone here will probably be able to help.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #4
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here is the link to the website:

    http://www.vemglobal.com

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Some html errors here.
    Some CSS errors here.
    Last edited by effpeetee; 06-01-2010 at 08:10 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks so much for the replies thus far... Here are the styles for the nav:

    Code:
    #navbox
    {
    	width: 600px;
    	height: 40px;
    	background-image: url(/themes/vemglobal/images/Home_Header_Tab.gif);
    	background-position: center;
    	background-repeat: no-repeat;
    	float: right;
    	margin-right: 25px;
    	margin-top: 50px;
    }
    
    #dropdown li
    {	
    	margin: 0;
    	display: inline;
    	padding: 0;
    	list-style: none;
    	float: left;
    	font-size: 11px;
    	font-weight: bold;
    }
    
    #dropdown li a
    {
    	margin: 0 1px 0 0;
    	color: #ffffff;
    	text-align: center;
    	text-decoration: none;
    }
    
    #dropdown a.last
    {
    	border-right: none;
    	height: 21px;
    	width: 85px;
    	float: right;
    	margin-right: 35px;
    	color: #ffffff;
    	font-family: Verdana, sans-serif;
    	font-size: 15px;
    	font-weight: lighter;
    	letter-spacing: 1.5px;
    	text-align: center;
    	text-decoration: none;
    }
    
    #dropdown a
    {
    	border-right: 1px solid #ffffff;
    	height: 21px;
    	width: 140px;
    	color: #3D8AA4;
    	font-family: Verdana, sans-serif;
    	font-size: 15px;
    	font-weight: lighter;
    	letter-spacing: 1.5px;
    	text-align: center;
    	text-decoration: none;
    	float: right;
    }
    
    #dropdown
    {	margin: auto;
    	padding-top: 20px;
    	float: right;
    	margin-right: 20px;
    	width: auto;
    }
    
    #dropdown a.advertisers
    {
    	width: 150px;
    }
    
    #dropdown a.home
    {
    	width: 75px;
    }
    
    #dropdown a.publishers
    {
    	width: 150px;
    }
    
    #dropdown a:hover
    {
    	position: relative;
    	font-family: Verdana, sans-serif;
    	color: #004960;
    }
    
    #dropdown div
    {	position: absolute;
    	margin-top: 25px;
    	visibility: hidden;
    	width: 220px;
    	z-index:50;
    	padding-top: 5px;
    	background: #ffffff;
    	border: 1px solid #E48225;
    }
    
    #dropdown div a
    {	
    	display: block;
    	width: 203px;
    	margin: 0;
    	padding: 3px 0;
    	white-space:nowrap;
    	letter-spacing: 1px;
    	font-size: 12px;
    	text-align: left;
    	text-decoration: none;
    	background: #ffffff;
    	color: #3D8AA4;
    	border: none;
    }
    
    #dropdown div a:hover
    {
    	color: #004960;
    }

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have you done anything to remove the errors in your markup?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes, I made the stated changes to the markup... Still nothing. I'm thinking it must have something to do with the way IE is handling the visibility:hidden div but not sure.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Yes, I made the stated changes to the markup...
    No! Validator is still returning 17 errors, out of which the ones regarding the duplication if ids might be crucial.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm sorry, I forgot to tell you that I changed the URL to a test site. Here it is... http://update.vemglobal.com

  • #11
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    I had a look at http://update.vemglobal.com/ with the W3C HTML validator.

    It is still giving lots of errors.

    Most appear to be due to a mis-match between your DOCTYPE and the your (x)HTML. While self closing tags are required in XHTML, they are invalid in HTML. You either need to change your DOCTYPE or remove the / of the /> in the self closing tags.

    You also appear to have some curly quotes instead of straight quotes in attributes.

    In addition you have two <title> tags when only one is allowed.

    While none of these are likely causing your problem, you are unlikely to have any one look for problems when they can't rule out errors in your code, because it contains so many errors.

    The first thing I do when looking for why something is not working is to check if the HTML is valid (under any doctype). If it is, then I know the problem is not cause by an error in the HTML and I can look for other causes.

    If the HTML is invalid it is hard to tell if the problem is due to an error in the HTML or not.

    The moral of this short story is, if you want help, make sure your HTML (and CSS) validates.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #12
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Alright, the code passed validation... I ran the CSS validator and it gave the following warnings:
    20 div#ccm-overlay Parse Error opacity=70)
    21 div#ccm-overlay Property -moz-opacity doesn't exist : 0.7 0.7
    22 div#ccm-overlay Property opacity doesn't exist in CSS level 2.1 but exists in : 0.7 0.7


    This is being caused by the CMS i am using and it's not in my styles. Unfortunately, the missing <li> elements are still missing... Not sure where to look from here, but will take and appreciate all suggestions...
    Last edited by dschnacky; 06-01-2010 at 08:52 PM.

  • #13
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone else have any suggestions as to what could be causing my <li> tags to disappear in IE7? Thanks in advance!
    New site with validated code is @ http://update.vemglobal.com

  • #14
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    They are not dissapearing in IE7 but instead appearing vertically you just can't see them.

    The idea is to set the LI's to display:inline (prevent IE7 bug) and float:left; - You have this already

    Then also set the A's to float: left; (this triggers display:block also) - You have float:right on all a's, this is causing IE7 to list them vertically instead of horizontally, change to float:left.

    Add all individual button styling to the A's not the LI's. - Just a tip.

    Then position the DIV absolute and make sure to declare it's left and top for IE7. - Otherwise the DIV will not position relative to it's parent in IE7<
    Last edited by Scriptet; 06-02-2010 at 07:10 PM.

  • Users who have thanked Scriptet for this post:

    dschnacky (06-02-2010)

  • #15
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Scriptet View Post
    They are not dissapearing in IE7 but instead appearing vertically you just can't see them.

    The idea is to set the LI's to display:inline (prevent IE7 bug) and float:left; - You have this already

    Then also set the A's to float: left; (this triggers display:block also) - You have float:right on all a's, this is causing IE7 to list them vertically instead of horizontally, change to float:left.

    Add all individual button styling to the A's not the LI's. - Just a tip.

    Then position the DIV absolute and make sure to declare it's left and top for IE7. - Otherwise the DIV will not position relative to it's parent in IE7<
    Thanks a bunch! That did the trick... Now the only issue is with the dropdown div showing up as being relative to the next <li> to the right of it. Is there a way to move this dropdown? I have tried a negative left margin, didn't move it.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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