Sun, 2004-04-18 19:57
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>
Sun, 2004-04-18 21:39
#1
LI tags layout problem
You don't describe the problem and what the desired effect is that you intended.
DE
Mon, 2004-04-19 04:22
#2
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.
Mon, 2004-04-19 10:05
#3
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.
Mon, 2004-04-19 16:58
#4
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.
Mon, 2004-04-19 17:09
#5
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
Mon, 2004-04-19 18:14
#6
Re: LI
Thanks stu for your great help. i appreciate for your prompt response.
Mon, 2004-04-19 18:20
#7
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. 
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
Mon, 2004-04-19 19:06
#8
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.
Mon, 2004-04-19 19:53
#9
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).
Tue, 2004-04-20 07:13
#10
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.