CSS - Need Help With Inline Navigation

I'm having a little trouble getting my navigation to have the
effect of the nifty corner's script .

[EDIT]

I've put the relevant files on an example page, but it doesn't
seem that Angelfire is allowing the javascript?

[/EDIT]

I've attempted, so far, to float the menu to the left, and then
give each <li> display inline to get a horizontal menu. This part
works in Fx1.0.7, but in IE6.0 each <li> is a 100% width?

Any help would be greatly appreciated. I've never used the
nifty corners before.. so far it hasn't been that hard, except
for this episode...

If any of the CSS is redundant, please tell me so that I can fix it, I've been trying to get the nifty corners to work
and may have overlooked some errors.
Code:

	html,
	body{
		margin:20px auto 20px auto;
		padding:0px;
		background-color:#333;
		font-family:Arial,sans-serif;
	}
	#container{
		margin:auto;
		width:700px;
		min-width:300px;
		background-color:#333;
	}
	#header{
		color:#F60;
		width:700px;
		font-size:25px;
		text-align:center;
		background-color:#FFF;
		font-family:'Arial Bold',sans-serif;
	}
	#menu{
		margin:0px;
		padding:0px;
		text-align:center;
	}
	#menu #nav{
		float:left;
		padding:0px;
		list-style-type:none;
		margin: 0px 0px 15px 0px;
		background-color:#333;
	}
	#nav li{
		display:inline;
		margin-left:5px;
		margin-right:5px;
	}
	#nav li a{
		padding:2px;
	}
	#content{
		padding:10px;
		background-color:#FFF;
	}
	* a{
		color:#F60;
		font-size:10px;
		text-decoration:none;
		vertical-align:middle;
	}

Code:

<div id='menu'><ul id='nav'>
			<li><a href='#' title='' class='tab'>LOREM</a></li>
			<li><a href='#' title='' class='tab'>IPSUM</a></li>
			<li><a href='#' title='' class='tab'>DOLOR</a></li>
			<li><a href='#' title='' class='tab'>SIT</a></li>
			<li><a href='#' title='' class='tab'>AMET</a></li>
		</ul></div>
		<div style='clear:both;'></div>

Code:

function NiftyCheck(){
  if (!document.getElementById || !document.createElement) return 0;
  var b= navigator.userAgent.toLowerCase();
  if (b.indexOf('msie 5') > 0 && b.indexOf('opera')==-1) return 0;
  return 1;
}

function Rounded(selector,bk,color,size){
  var v= getElementsBySelector(selector);
  for (var i=0; i < v.length; i++){
    AddTop(v[i],bk,color,size);
    AddBottom(v[i],bk,color,size);
  }
}

function AddTop(el,bk,bColor,size){
  var d= document.createElement('b');
  var cn= 'r';
  var lim= 4;
  if (size && size=='small'){
    cn= 'rs';
    lim= 2;
  }
  d.className= 'rtop';
  d.style.backgroundColor= bk;
  for (var i=1; i <= lim; i++){
    var x= document.createElement('b');
    x.className= cn + i;
    x.style.backgroundColor= bColor;
    d.appendChild(x);
  }
  el.insertBefore(d,el.firstChild);
}

function AddBottom(el,bk,bColor,size){
  var d= document.createElement('b');
  var cn= 'r';
  var lim= 4;
  if(size && size=='small'){
    cn= 'rs';
    lim= 2;
  }
  d.className= 'rbottom';
  d.style.backgroundColor= bk;
  for(var i=lim; i > 0; i--){
    var x= document.createElement('b');
    x.className= cn + i;
    x.style.backgroundColor= bColor;
    d.appendChild(x);
  }
  el.appendChild(d,el.firstChild);
}

Hi All,

I am building a site that has the following structure for the navigation;

Code:

<div id="navigation">
    <ul id="navlist">
      <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
      <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
      <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
        <ul>
          <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
          <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
          <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
          <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
          <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
        </ul>
      </li>
      <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
      <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
    </ul>
  </div>

The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;.

Edit: Just noticed that I can't link to the full site that I have uploaded for preview.

What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another?

Your help would be much appreciated!

Hello everyone,

I'm working on this page http://jordanmeeter.com/photos/sets/ and I want to get the set description inline with the <h2>. I can just baaaaarely remember how to do it, but everything I'm trying doesn't work. Can someone help me out?

Thanks,
Jordan

Hello,
I have the following css
css Code:
Original - css Code ul#menulist{ position:relative; top:0px; list-style-type:none; margin:0; padding:0; } ul#menulist li{ background-color:#717100; display:inline; margin:0; padding:0 10px; border:0; height:30px; } ul#menulist li a{ text-decoration:none; margin:0; padding:0; border:0; }

  

  


 ul#menulist{


     position:relative;


     top:0px;


     list-style-type:none;


     margin:0;


     padding:0;


 }


  


 ul#menulist li{


     background-color:#717100;


     display:inline;


     margin:0;


     padding:0 10px;


     border:0;


     height:30px;


 }


  


 ul#menulist li a{


     text-decoration:none;


     margin:0;


     padding:0;


     border:0;


 } 

A gap is appearing between <li> elements in Opera and FF but not in IE. You can check it here
Which is the correct behaviour? How do I remove the gaps between <li> elements in a valid way.
Thank you.

I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label.

I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>.
Code:

<div id=secondline>
  <span id=ed>
    <b>Event Definition</b>:<br>
    <textarea name=inject cols=45 rows=6></textarea>
  </span>
  <span id=after>
    <b>After</b><br>
    <select name=next size=8 multiple>
      <option value=0>0
      ...
      <option value=100>100
    </select>
  </span>
</div>

but, alas, it doesn't work like that.

How can I get Code:

<tr>
  <td>label<br>form_control</td>
  <td>label<br>form_control</td>
</tr>

behavior without using tables?