10 replies [Last post]
phani
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2004-04-18
Posts: 6
Points: 0

Hi all,

The following seems to work perfectly in ie but not in opera and netscape. I am not able to dig out the problem. can any one have a look at it and provide the solution.

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">

body { text-align: center; }

#container
{
width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
text-align: left;
}

#top
{
top:0;
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid none;
position:inherit;
height:auto;
}

#top h1
{
padding: 8px 8px 8px 0px;
margin: 5;
font-size:38px;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

ul{
padding: 0;
margin: 0;
list-style-type: none;
width: 100%;
color: #fff;
background-color: #ddd;
border-top:1px solid #ddd;
text-align:center;
float:left;
}

li {
float:left;
position: relative;
width: 0em;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

li > ul {
top: auto;
left: auto;
}

ul#navlist li a
{
width: 6em;
color: #fff;
background-color: #036;
padding: 0em;
text-decoration: none;
border-right: 1px solid #ddd;
}

ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}

li:hover ul, li.over ul { display: block; }

#menu{
border:1px solid none;
}

</style>
</HEAD>

<BODY>

<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("navlist");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

<div id="container">

<div id="top">
<h1>Collaba</h1>
</div>

<div id="menu">
<ul id="navlist">
<li><a href="#">Home</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Mail</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Office Notes</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Office Admin</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Sys Admin</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">AAA</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Who is Who</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">HR</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Policy</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
</ul>
</div>

<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>

</BODY>
</HTML>

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

LI tags layout problem

You don't describe the problem and what the desired effect is that you intended.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

phani
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2004-04-18
Posts: 6
Points: 0

Re: LI

Ok the problem is with the alignment of LI's which are under the div "menu". The alignment is not proper when compared to mozilla/netscape and opera.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 43 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

LI tags layout problem

To get the links in a line change the CSS as below;

li {
float:left;
display:block;
position: relative;
width:6em;
}

ul#navlist li a
{
display:block;
width: 6em;
color: #fff;
background-color: #036;
padding: 0em;
text-decoration: none;
border-right:1px solid #ddd;
}

You will then need to play around with the borders/backgrounds a little.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

phani
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2004-04-18
Posts: 6
Points: 0

Re: LI

Thanks for your prompt answer STU amazed to see the required thing on all of my three browsers. Can you just explain/brief of what changes you made and why you made. Sorry for asking this as i am a beginner in css.

And could you help me in learing css , any good material/specification.

Thanks in advance.

Phani.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 43 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

LI tags layout problem

The changes were basically to define each link as a block and then give the a width (6em). Without this Mozilla and the rest just considered the links to be as big as the wording and with your previous width of 0em for each li these words were on top of each other.

As for good css material just take a look at the CSS links on this site.
http://www.csscreator.com/links/linkspage.php

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

phani
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2004-04-18
Posts: 6
Points: 0

Re: LI

Thanks stu for your great help. i appreciate for your prompt response.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

LI tags layout problem

One further comment - you really need to be working in an XHTML DOCTYPE if you are planning on getting the best predictable cross-browser CSS. HTML 4 transitional is, like, so passe. Laughing out loud

A couple of alistapart articles that may be of help:
http://www.alistapart.com/articles/doctype/
http://www.alistapart.com/articles/betterliving/

And a link to the latest incarnation of HTML Tidy which can be configured to turn your document into XHTML.

de

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

phani
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2004-04-18
Posts: 6
Points: 0

Re:LI

Hi stu,

I got through another problem , if i place a div in the left hand side frame all the menus are going into it , and not on top of it. How to implement "top" feauture using css . The code is given below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">

body { text-align: center; }

#container
{
width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
text-align: left;
}

#top
{
top:0;
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid none;
position:inherit;
height:auto;
}

#top h1
{
padding: 8px 8px 8px 0px;
margin: 5;
font-size:38px;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 2em 0em 0em 2em;
max-width: 36em;
text-align:left;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

ul{
padding: 0;
margin: 0;
list-style-type: none;
width: 100%;
color: #fff;
background-color: #ddd;
border-top:1px solid #ddd;
text-align:center;
float:left;
}

li {
float:left;
display:block;
position: relative;
width:6em;
}

ul#navlist li a
{
display:block;
width: 6em;
color: #fff;
background-color: #036;
padding: 0em;
text-decoration: none;
border-right:1px solid #ddd;
}

li ul {
display: none;
position: absolute;
top: 1.3em;
left: 0;
}

li > ul {
top: auto;
left: auto;
}

ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}

li:hover ul, li.over ul { display: block; }

#menu{
border:1px solid none;
}

#quickoptions{
border:1px solid #ddd;
width:190px;
padding:1px;
position:absolute;
}

#quickoptions td.heading {
background:#036;
color:#fff;
font:bold;
}

#quickoptions td{
display:block;
padding:1px;
background:#eee;
color:#000;
}

#quickoptions td a:hover{
background:#fff;
color:#000;
}

#quickoptions td a{
display:block;
text-align:left;
}

a:visited{
background:#eee;
color:#000;
}

#quickoptions table{
background:#ddd;
}

#leftnav
{
float: left;
width: 160px;
margin: 14px 1px 1px 1px;
padding: 4px;
position:relative;
}

</style>
</HEAD>

<BODY>

<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("navlist");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

<div id="container">

<div id="top">
<h1>Collaba</h1>
</div>

<div id="menu">
<ul id="navlist">
<li><a href="#">Home</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Mail</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Office Notes</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Office Admin</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Sys Admin</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">AAA</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Who is Who</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">HR</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Policy</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>
</ul>
</div>

<div id="leftnav">
<div id ="quickoptions">
<table border=0 width="100%" cellspacing=1>
<tr><td class="heading">Quick Links</td></tr>
<tr><td><a href="#">New Office Notes Entry</a></td></tr>
<tr><td><a href="#">New Out of Office Entry</a></td></tr>
<tr><td><a href="#">New Office Admin Entry</a></td></tr>
<tr><td><a href="#">New SysAdmin Entry</a></td></tr>
<tr><td><a href="#">New Employee Request</a></td></tr>
<tr><td><a href="#">New Internet Request</a></td></tr>
<tr><td><a href="#">Compose Mail</a></td></tr>
</table>
</div>
</div>

<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>

</BODY>
</HTML>

Thanks for your help.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 43 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

LI tags layout problem

Just a small addition to your css should do it ~

li {
float:left;
display:block;
position: relative;
width:6em;
z-index:50;
}

The value of 50 is just arbitary (any high number will do).

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

phani
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2004-04-18
Posts: 6
Points: 0

Re:LI

Thankx , it worked fine, i have placed z-index with value 1 to show on top and 0 to put it back, (like that of in visual basic where zorder is to put it in front with value 1 ...).

Ok,at last got it thanks. If i would consider another case where all the menus on the top would be placed in upper frame and all the contents would be placed in lower frame in a frameset then using this z-index=50 or any other number would work?

If not what is the other method to get around this problem, because i cannot place all these menus for each and every page of the project assigned to me.

Again thanks for your reply.