FireFox line wrapping Opera doing nothing 1

[1DMF]

Can someone tell me why firefox is line wrapping the menu as if I had applied clear:left; to the elements?

here is a screen shot (i actually hovered over MAY!)

http://www.homeloanpartnership.co.uk/FF.jpg

Also the menu doesn't even popout in Opera, why is this?

CSS...

 /* CSS Menus - Vertical CSS with Popout Menus -  */

*{
    margin:0;
    padding:0;
    border:none;
}

body{
    font-family:arial,verdana,tahoma,sans-serif;
    font-size: 12pt;
}

/* Begin CSS Popout Menu */

ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  list-style: none;
  margin: 0 auto;
  text-align:center;
}

ul#navmenu {
  width: 100px;
}  

ul#navmenu ul  {
  width: 80px;
  left:50px;
}

ul#navmenu ul ul {
  width: 200px;
  left:40px;
}

ul#navmenu li {
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
ul#navmenu a {
font:bold 11px/16px arial,helvetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#cccccc #888888 #555555 #bbbbbb;
padding:1px 0 1px 3px;
text-align:center;
background:#eeeeee;
text-decoration:none;
height: 1%; /*For IE*/
}

#navmenu a, #navmenu a:visited{
color:#000000;
}

#navmenu a:hover{
    color:#ff0000;
    background:#dddddd;
}

#navmenu a:active{
    color:#000066;
    background:#cccccc;
}

#navmenu a.x, #navmenu a.x:visited{
    font-weight:bold;
    color:#000000;
    background:#eeeeee url('/images/expand3.gif') no-repeat;
}

#navmenu a.x:hover{
    color:#ff0000;
    background:#dddddd;
}

#navmenu a.x:active{
    color:#000066;
    background:#cccccc;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  float:left;
  position:absolute;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

HTML..

<table width="100%" class="menu">
                <tr>
                    <td valign="middle">
                        <ul  style="z-index:990;" id="navmenu">
                                <!--tmpl_loop name="month"-->
                                <li  style="z-index:990;"><a href="#" class="x" ><!--tmpl_var name='month'--></a>
                                    <ul style="z-index:995;"><!--tmpl_loop name="year"-->
                                        <li  style="z-index:995;"><a href="#" class="x"><!--tmpl_var name='year'--></a>
                                            <ul style="z-index:999;"><!--tmpl_loop name="stat"-->
                                                <li style="z-index:999;"><a href="#" onclick="pwait(); getAjax('<tmpl_var name='url_to_cgi'>/commissions.cgi','FA=VW&amp;requireduser=<tmpl_var name='user'>&amp;DOC=<tmpl_var name='docid'>','<tmpl_var name='period'>')">Period Ending <!--tmpl_var name='period'--></a></li>
                                                <!--/tmpl_loop-->
                                            </ul>
                                        </li>
                                        <!--/tmpl_loop-->
                                    </ul>
                                </li>
                                <!--/tmpl_loop-->
                        </ul>     
                    </td>
                </tr>
            </table>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

I think it is probably because your list items (li) are actually inline. Although this would be easier to test, if you gave us the link rather than an image.

 

[1DMF]

I understand about giving a link, but i cannot give a link as it is a members area.

However I have removed the inline on the <li> and it has fixed FireFox but broke IE6 also I have had to change the left to left:100% on the elements.

I feel like a dog chasing my tale :-( , If I keep the inline and apply top:0; to all ul's it fixes IE6 , but FF goes all over the shop when that is applied?

http://www.homeloanpartnership.co.uk/FF2.jpg

, you will see i'm hovering over April, but the pop out is way above aligned to nothing i can understand! what top does FF think it's aligning TOP to, it isn't even half way between anything it's just in a very weird place indeed.

Keeping the inline meant I had to change the left back left:50%; I'll knock up dummy page and post the link, i just seem to go round in circles on this one. I really need one of your expert eyes to help me resolve this.

but for now, I'm off home, have a good one





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

As a good rule of the thumb, design to make it work in FF and then fix it for IE. Because usually if it works in FF it is standards compliant and if it works only in IE it is usually some strange quirk. I also suggest you try and think what the bug you're experiencing in IE could be and try a search for it online. Maybe there are multiple solutions for it and you just took the worst...

 

[1DMF]

nothing like a good nights kip to clear the head , I fixed it for ALL browsers, well OK IE6 & IE7 , FF & Opera.
basically down to your guide - so thanks a million

I removed the inline on the li and added the left:100% to the ul's , that works fine in FF , IE7 & Opera , then added this to the head of the HTML

<!--[if lt IE 7]>
<style type="text/css">
/*For IE6*/

li {
display: inline; 
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
left:50%;
}

</style>
<![endif]-->

regards, 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

If I keep the inline and apply top:0; to all ul's it fixes IE6

Then do this:

ul#navmenu li {
  position: relative;
}

* html ul#navmenu li {
  display: inline; /*For IE6*/
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

but won't that break FF & Opera?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

ok - I'm confused (yes doesn't take much i know) I added

* html ul#navmenu li {
  display: inline; /*For IE6*/
}

* html ul#navmenu ul,
* html ul#navmenu ul ul,
* html ul#navmenu ul ul ul {
    left:50%;
}

and it has the same effect as the [if IE 7] clause.

so what does * html do to IE6 that it doesn't do to any other browser?

don't the other browsers accept the * selector?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

* html : why is this a holly hack ?

* is acceptable standards CSS according to w3c

http://www.w3.org/TR/CSS21/selector.html

it's the universal selector

but here it says that IE handles it wrongly and it's a bug in IE and ignores the * ...

http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html

here I found it is classed as a holly hack

http://www.positioniseverything.net/articles/poll/star-html.php

why does only IE see * html and other browsers ignore it, is it because * and html a basically both universal selectors ?

does * {color:red;} and html {color:red;} do the same thing? so * * would be invalid and so * html is invalid syntax?





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Why are you asking further questions? I cannot explain it any better than the explanation found on the position is everything page that you linked.

 

[1DMF]

Then I guess I just have to continue to not understand the whys or wherefors and just use it.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

it's ok I found the answer on this site..

http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0

It so happens that all IE browsers, both Win and Mac, recognize an invisible and mysterious wrapper element around <html>. The use of the universal selector preceding html, also known as the Tan Hack (or Star HTML Selector
Bug), works in IE browsers and nowhere else.

So for some reason in IE there is an even higher element to the dom tree than <html> , which has no tag name nor can you see it (not sure if you can get it with JS, it isn't clear), but you can address is with CSS, thus being able to apply the holly hack for IE browsers. [ * html ]

I was mistaking [ * html ] for [ html * ], which was what was confusing me and why i couldn't grasp the difference.

All makes perfect sense now!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.