By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,508 Members | 1,856 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,508 IT Pros & Developers. It's quick & easy.

Problems with ul based navigation on Opera 7.x

P: n/a
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;padding:0px;font-family: Arial, Helvetica,
sans-serif;font-size: 62.5%;}

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

#navleft,#navright {float:left;width:8px;height:48px;}

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

#main_navi {margin:0;padding:0;list-style:none;display:inline;}
#main_navi li {margin:0px 0px 0px
0px;padding:0px;float:left;position:relative;}

#main_navi .divider,
#main_navi .divider:active
{float:left;text-decoration:none;font-weight:bold;display:block;margin:0px;padding:5px
6px 5px 6px;}

#main_navi .no_divider,
#main_navi .no_divider:active
{float:left;text-decoration:none;font-weight:bold;display:block;margin:0px;padding:5px
6px 5px 6px;}

#main_navi li.on{
color:#2C568B;background-color:#E7F0FF;height:25px;float:left;text-decoration:none;font-weight:bold;margin:0px;padding:0px;}

#sub_navi
{position:absolute;left:0px;top:25px;margin:0;padd ing:0;list-style:none;display:inline;
white-space:nowrap;}

#sub_navi li
{float:left;height:22px;text-decoration:none;font-weight:bold;margin:0px;padding:0px;display:inline; }

#sub_navi li.list_on
{height:22px;float:left;text-decoration:none;font-weight:bold;margin:0px;padding:0px;}

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

#search {margin:0px 0px 0px 500px;padding:4px 0px 0px 3px;height:25px;}
#search_box{width:130px;height:18px;margin:0px 5px 0px 4px;border:1px
solid #A4ABB1;float:left;}
-->
</style>
</head>

<body>

<div id="navwrapper">
<div id="navleft">&nbsp;</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_divider">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="javascript:document.form1.submit();">Search</a>
</form>
</div>
</div>
</body>
</html>

Jul 21 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
I'm still having problems with this. Can anyone help me with this?

Jul 21 '05 #2

P: n/a
Els
et*******@hotmail.com wrote:
I'm still having problems with this. Can anyone help me with this?


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 -
Jul 21 '05 #3

P: n/a
<et*******@hotmail.com> wrote:
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.
[Much snipped]
#sub_navi {
position:absolute;
left:0px;
top:25px;
margin:0;
padding:0;
list-style:none;
display:inline;
white-space:nowrap;
}


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(preferred 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
Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.