...

View Full Version : Missing Navigation Items in IE7?



dschnacky
05-28-2010, 08:00 PM
<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

abduraooft
05-29-2010, 09:28 AM
The only <li> showing up is Home...stumped and on a deadline Can we have a link to your page?

mbaker
05-29-2010, 09:46 AM
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:


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

dschnacky
06-01-2010, 07:52 AM
Here is the link to the website:

http://www.vemglobal.com

effpeetee
06-01-2010, 08:07 AM
Some html errors here. (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vemglobal.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1)
Some CSS errors here (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.vemglobal.com&profile=css21&usermedium=all&warning=1&lang=en).

dschnacky
06-01-2010, 02:50 PM
Thanks so much for the replies thus far... Here are the styles for the nav:


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

abduraooft
06-01-2010, 03:14 PM
Have you done anything to remove the errors in your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vemglobal.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1)?

dschnacky
06-01-2010, 03:25 PM
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.

abduraooft
06-01-2010, 04:51 PM
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.

dschnacky
06-01-2010, 05:01 PM
I'm sorry, I forgot to tell you that I changed the URL to a test site. Here it is... http://update.vemglobal.com

mbaker
06-01-2010, 06:36 PM
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.

dschnacky
06-01-2010, 07:21 PM
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...

dschnacky
06-02-2010, 06:05 PM
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

Scriptet
06-02-2010, 07:05 PM
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<

dschnacky
06-02-2010, 08:28 PM
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.

abduraooft
06-03-2010, 08:25 AM
Try setting position:relative; to #dropdown li and left:0; to #dropdown div

Scriptet
06-03-2010, 02:22 PM
Yea looks as though it's the same problem as your other thread! Try abdura's solution.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum