...

View Full Version : Menu inconsistency between IE7 and FireFox 3.



effpeetee
07-04-2008, 05:31 PM
I have been trying to help a poster with this site.

It's here for you. (http://exitfegs.co.uk/Turchette.html)

I have spent almost the whole of two days to try to solve it.:rolleyes:

If you view it in FFox, you will find that selecting PORTFOLIO in FFox gives a horizontal result whereas in IE7 it gives an unwanted vertical result. As with the original poster, it is slowly driving me up the wall. For pity's sake someone, please put us out of our misery!:eek:

Brownie points all round.

Frank

abduraooft
07-04-2008, 05:56 PM
That's a big mess, start to build with the following


<div id="menu">
<ul>
<li class="top"><a href="#">HOME</a></li>
<li class="top"><a href="#">SERVICES</a></li>
<li class="top"><a href="#">CLIENTS</a></li>
<li class="top"><a href="#">CASE STUDIES</a></li>
<li class="top"><a href="#">PORTFOLIO</a>
<ul class="subnav">
<li class="item"><a href="#">ADVERTISING</a></li>
<li class="item"><a href="#">WEB DESIGN</a></li>
<li class="item"><a href="#">COLLATERAL</a></li>
<li class="item"><a href="#">PUBLIC RELATIONS</a></li>
</ul>
</li>
<li class="top"><a href="#">CORE TEAM</a></li>
<li class="top"><a href="#">CONTACT US</a></li>
</ul>
</div>

(properly nested and it's valid code)

Or simply with

<ul id="menu">
<li ><a href="#">HOME</a></li>
<li ><a href="#">SERVICES</a></li>
<li ><a href="#">CLIENTS</a></li>
<li ><a href="#">CASE STUDIES</a></li>
<li ><a href="#">PORTFOLIO</a>
<ul >
<li ><a href="#">ADVERTISING</a></li>
<li ><a href="#">WEB DESIGN</a></li>
<li ><a href="#">COLLATERAL</a></li>
<li ><a href="#">PUBLIC RELATIONS</a></li>
</ul>
</li>
<li ><a href="#">CORE TEAM</a></li>
<li ><a href="#">CONTACT US</a></li>
</ul>



No divitis and no mess. Now it's very easy to write CSS, like

#menu{

}
#menu ul{

}

#menu li{
}

#menu li ul li{

}
and so on

effpeetee
07-04-2008, 07:10 PM
Thank you abduraooft, But does it need to be re-written to cure the fault?

My eyes are very bad and I was hoping for an IE hack or work around..
Why does it not present correctly in IE7?

Frank

abduraooft
07-05-2008, 08:36 AM
Because at present there are a lot of markup errors, due to improper nesting.

effpeetee
07-05-2008, 05:57 PM
Because at present there are a lot of markup errors, due to improper nesting.

This is one area I find most difficult. where to put the </div>,s. I usually land up doing a suck it and see job.:D

Removing the more obvious faults did nothing useful,:eek:

Still, I'll press on regardless,:thumbsup:

Frank

abduraooft
07-06-2008, 02:13 PM
Frank, the basic structure of an unordered list is

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<!--........as many <li></li>s- list items required in primary list -->
</ul>

Now, if we want to add a sublist to a list item, split the <li></li> and add another <ul>...</ul> set (like above inside it).

<ul>
<li>A</li>
<li>B
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li>C</li>
</ul>
Again, if we need to add anhcors to the text, just wrap our text inside <a></a> without touching the ul-li structure, say

<li><a href="a-url">A</a></li>.
So the above list would become

<ul>
<li><a href="a-url">A</a></li>
<li><a href="a-url">B</a>
<ul>
<li><a href="a-url">a</a></li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li>C</li>
</ul>
We can increase the nesting to any level, but be vary careful that the immediate child of any <ul> or <ol> should be an <li> (and it's close tag after some content)

In your case, you have closed your starting <ul> before completing all list item. This is not going to be a markup error, but it's not the proper way to create a list. They are sitting as independent. see

<ul>
<li class="top"><a href="#">HOME</a></li>
</ul>

<ul>
<li class="top"><a href="#">SERVICES</a></li>
</ul>

<ul>
<li class="top"><a href="#">CLIENTS</a></li>
</ul> After this there is


<ul>
<li class="top"><a href="#">PORTFOLIO</a></li>
<div class="subnav">
<li class="item"><a href="#">ADVERTISING</a></li>

<li class="item"><a href="#">WEB DESIGN</a></li>
<li class="item"><a href="#">COLLATERAL</a></li>
<li class="item"><a href="#">PUBLIC RELATIONS</a></li>
</ul> which is an error as you can't nest a div directly inside an ul. Indeed there is no closing tag.

Hope this makes some sense :)

bazz
07-06-2008, 04:52 PM
Frank,

take a look at your Sources page and the list code in it.

You have ul's inside ol's which could be amended to have ul's inside ul's, where the contained ul's are for the flyout. Then use css to hide or unhide the fylout bits (using left:-999px; or something).

hth

bazz

effpeetee
07-06-2008, 05:11 PM
Thank you both, I will return to it shortly. At the moment my main PC is not available. We have builders in.

'Nuff said,

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum