Problems with ul based navigation on Opera 7.x

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • eternalD3@hotmail.com
    #1

    Problems with ul based navigation on Opera 7.x

    Hi,

    I have a problem to get this working on Opera 7.x+. This does not need
    to work on older Opera browsers

    There are problems on rendering the sub-level navigation. It aligns
    right on Firefox and IE 6.
    Sometimes there are also some problems on IE 5 or IE 5.5.

    I would like the navigation to work like this:

    * The menu item width should not be defined because it differs on every
    language.

    * The sub navigation item should be aligned to the mainmenu containing
    the menu item. The problem with Opera
    comes if we have more than one subnavigation items. The items aren't
    aligned next to each other. Instead they are
    aligned one item per line.

    Thanks in advance.

    ----------------------------------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Test navigation</title>

    <style type="text/css">
    <!--
    html {margin:0px;}
    body {margin:0px;pad ding:0px;font-family: Arial, Helvetica,
    sans-serif;font-size: 62.5%;}

    #navwrapper{fon t-family: Arial, Helvetica,
    sans-serif;font-size:1.2em;widt h:712px;height: 48px;margin:0px 0px 10px
    0px;}

    #navleft,#navri ght {float:left;wid th:8px;height:4 8px;}

    #navitems {position:relat ive;left:0;top: 0;margin:0px 0px 0px 0px;}

    #main_navi {margin:0;paddi ng:0;list-style:none;disp lay:inline;}
    #main_navi li {margin:0px 0px 0px
    0px;padding:0px ;float:left;pos ition:relative; }

    #main_navi .divider,
    #main_navi .divider:active
    {float:left;tex t-decoration:none ;font-weight:bold;dis play:block;marg in:0px;padding: 5px
    6px 5px 6px;}

    #main_navi .no_divider,
    #main_navi .no_divider:act ive
    {float:left;tex t-decoration:none ;font-weight:bold;dis play:block;marg in:0px;padding: 5px
    6px 5px 6px;}

    #main_navi li.on{
    color:#2C568B;b ackground-color:#E7F0FF;h eight:25px;floa t:left;text-decoration:none ;font-weight:bold;mar gin:0px;padding :0px;}

    #sub_navi
    {position:absol ute;left:0px;to p:25px;margin:0 ;padding:0;list-style:none;disp lay:inline;
    white-space:nowrap;}

    #sub_navi li
    {float:left;hei ght:22px;text-decoration:none ;font-weight:bold;mar gin:0px;padding :0px;display:in line;}

    #sub_navi li.list_on
    {height:22px;fl oat:left;text-decoration:none ;font-weight:bold;mar gin:0px;padding :0px;}

    #sub_navi span.link_on
    {color:#2C568B; float:left;text-decoration:none ;font-weight:bold;
    margin:0px;padd ing:4px 6px 4px 6px;}

    #search {margin:0px 0px 0px 500px;padding:4 px 0px 0px 3px;height:25px ;}
    #search_box{wid th:130px;height :18px;margin:0p x 5px 0px 4px;border:1px
    solid #A4ABB1;float:l eft;}
    -->
    </style>
    </head>

    <body>

    <div id="navwrapper" >
    <div id="navleft">&n bsp;</div>
    <div id="navitems">
    <ul id="main_navi" >
    <li><a href="#" class="divider" >Menu 1</a></li>
    <li class="list_on" ><span class="divider" >Menu 2</span>
    <ul id="sub_navi">
    <li><a href="#">Sub Menu 1</a></li>
    <li class="list_on" ><span class="link_on" >Sub Menu 2</span></li>
    </ul>
    </li>
    <li><a href="#" class="divider" >Menu 3</a></li>
    <li><a href="#" class="divider" >Menu 4</a></li>
    <li><a href="#" class="divider" >Menu 5</a></li>
    <li><a href="#" class="no_divid er">Menu 6</a></li>
    </ul>
    <div id="navright">& nbsp;</div>
    </div>
    <div id="search">
    <form name="form1" id="form1" method="post" action="#">
    <input type="Text" name="qt" id="search_box " />
    <a href="javascrip t:document.form 1.submit();">Se arch</a>
    </form>
    </div>
    </div>
    </body>
    </html>

    Tags: None
    • eternalD3@hotmail.com
      #2
      Re: Problems with ul based navigation on Opera 7.x

      I'm still having problems with this. Can anyone help me with this?

        Comment

        • Els
          #3
          Re: Problems with ul based navigation on Opera 7.x

          eternalD3@hotma il.com wrote:
          [color=blue]
          > I'm still having problems with this. Can anyone help me with this?[/color]

          You are lucky that I also see the message you are replying to - it's 3
          days old though, so I'm sure most people will ignore this message of
          yours, as they have no idea what you're talking about.

          As to why your previous post got ignored:

          a) you're not supplying a URL, and most people don't have the time to
          waste to copy your code from your message, save it in a file, upload
          it to their own server, and then look at the problem. Please remember
          that it's *your* problem, and you should make it as easy as possible
          for others to see, to get more people willing to help you.

          b) you're using google groups, and more and more people are ignoring
          posts from google groups, as they almost invariably don't quote what
          they're replying to (bingo! that's you!).

          Please download a proper newsreader (even Outlook Express will do if
          you're desperate) and read the posts in their best form.
          A proper newsreader will automatically quote the post you are replying
          to, thus making it easier to understand what you are saying.

          Then, to use the newsreader properly, quote only the bits you are
          replying to, and reply below those bits.

          This all may seem a lot of work to ask just one question, but it's
          just the ways of Usenet groups, and you'll find much more information
          if you follow those ways, than if you don't.

          --
          Els http://locusmeus.com/
          Sonhos vem. Sonhos vão. O resto é imperfeito.
          - Renato Russo -

            Comment

            • Nisse Engström
              #4
              Re: Problems with ul based navigation on Opera 7.x

              <eternalD3@hotm ail.com> wrote:[color=blue]
              > Hi,
              >
              > I have a problem to get this working on Opera 7.x+. This does not need
              > to work on older Opera browsers
              >
              > There are problems on rendering the sub-level navigation. It aligns
              > right on Firefox and IE 6.
              > Sometimes there are also some problems on IE 5 or IE 5.5.
              >
              > I would like the navigation to work like this:
              >
              > * The menu item width should not be defined because it differs on every
              > language.
              >
              > * The sub navigation item should be aligned to the mainmenu containing
              > the menu item. The problem with Opera
              > comes if we have more than one subnavigation items. The items aren't
              > aligned next to each other. Instead they are
              > aligned one item per line.[/color]

              [Much snipped]
              [color=blue]
              > #sub_navi {
              > position:absolu te;
              > left:0px;
              > top:25px;
              > margin:0;
              > padding:0;
              > list-style:none;
              > display:inline;
              > white-space:nowrap;
              > }[/color]

              Put a border or outline on #sub_navi. How wide is it?
              How should the <li> elements float inside it?


              CSS2.1, chapter 10 (Visual formatting model details):

              <quote>
              10.3.7 Absolutely positioned, non-replaced elements

              ...

              3. 'width' and 'right' are 'auto' and 'left' is not 'auto',
              then the width is shrink-to-fit . Then solve for 'right'

              ...

              Roughly: calculate the preferred width by formatting the content
              without breaking lines other than where explicit line breaks occur,
              and also calculate the preferred minimum width, e.g., by trying all
              possible line breaks. CSS 2.1 does not define the exact algorithm.
              Thirdly, calculate the available width: this is found by solving for
              'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.

              Then the shrink-to-fit width is: min(max(preferr ed minimum width,
              available width), preferred width).
              </>


              When calculating the available width, 'right' is set to 0.
              Since the parent element (or actually the nearest positioned
              ancestor) is a rather narrow <li>, the available width for
              #sub_navi becomes rather narrow. So you need to set an explicit
              'width' (or a negative 'right') to fix this.

              Maybe.

              Your CSS has an ungodly amount (21%) of 'position', 'display'
              and 'float' properties, and these parts of the CSS isn't exactly
              light reading. Or not to me, anyway. :-)


              --n

                Comment

                Previous template Next
                Working...