CSS - Help With Horizontal List

I've got the standard <ul><li> horizontal menu, but each menu item has a space between it. I've tried wrapping the entire menu in a div with a background color, but so far I've had no luck.

Can I change the CSS to not have padding between?

also, why does a styled <hr> not appear in Firefox?


Thanks for the help!

Here is what I have in the code.

css
Code:

#navcontainer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#navcontainer ul li { 
	display: inline;
}

#navcontainer ul li a
{
	text-decoration: none;
	padding: .2em 1em;
	color: #FFFFFF;
	background-color: #C0C0C0;
}

#navcontainer ul li a:hover
{
	color: #C0C0C0;
	background-color: #FFFFFF;
}

html
Code:

<div id="navcontainer">
<hr />
     <ul>
	  <li>
	     <a href="index.html">Home</a>
	   </li>
	   <li>
	     <a href="index.html">Products and Services</a>
	   </li>
	   <li>
	     <a href="index.html">Employment</a>
	   </li>
	   <li>
	     <a href="index.html">Blah</a>
	   </li>
	   <li>
	    <a href="index.html">Home</a>
	   </li>
             </ul>
</div>

I'm making a horizontal navigation menu using lists and CSS. It looks fine in IE, but in Mozilla, the double border on the bottom appears just beneath the top one, and the next line shows up after the unordered list. Hard to explain - you'd basically have to check it out for yourself:

http://www.michaelaparicio.com/

Any help would be greatly appreciated! Thanks.

Regards,
Mike Aparicio

Is there any way to add a horizontal scrollbar to a SELECT listbox that works in both Mozilla and IE? I have a mutiple-select enabled box with about 50 items, only displaying 10 rows, and some of the rows are really wide because the text is very lengthy. I'd like to add a horizontal scrollbar to the SELECT box in addition to the vertical scrollbar.

Here's what I've tried - I'm running Windows XP and testing with Firefox 1.0 and IE 6.0.2.

a) Adding various overflow styles, like overflow:scroll and overflow-x:scroll. None of these cause the horizontal scrollbar to show up.

b) Adding the mozilla "-moz-scrollbars-horizontal" style, which doesn't add it even in Mozilla.

c) Surrounding the SELECT inside a DIV tag, with scrollbars. This works, and IE is even smart enough to remove the vertical scrollbars on the SELECT listbox if I make it tall enough to show all choices at once. However, in Mozilla, the vertical scrollbar stays visible even when it's not needed. So in this case I end up with two vertical scrollbars - one for the SELECT and one for the DIV. I tried various things to disable the Mozilla vertical scrollbar but that didn't work either.

So basically I'm looking for a way to either:

a) Add a horizontal scrollbar to a SELECT that works in both browsers.

b) Or, a way to disable the vertical scrollbar in the SELECT object in Mozilla Firefox, so that I can use the DIV trick.

Any clues?

Heya!
I am really new to html - creating my first website for uni course now.
My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one.
The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome.

this is the html:
<div id="ourproject">
<ul>
<li>OUR<br>
PROJECT
<ul>
<li><a href="index.html">Project Overview</a></li>
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="participants.html">Participants</a></li>
</ul>
</li>
</ul>
</div>

and my css:

#ourproject ul {
position:relative;
color: #FFF;
text-decoration: none;
width: 102px;
top:0px;
left:0px;
height:86px;
list-style:none;
float:left;
padding-left:20px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFF;
}
#ourproject ul:hover {
color:#FF9900;
border-left-color: #F90;
padding-left:20px;
}
#ourproject ul ul {
position:relative;
visibility:hidden;
z-index:2000;
background-color:#0E1221;
font-size: 12px;
width: 602px;
display: inline-block;
height: 45px;
float: left;
top:25px;
left:-23px;
}
#ourproject ul li {
display: inline-block;
margin-right:30px;
height: 25px;
float: left;
margin-top:4px;
width: 125px;
}
#ourproject ul:hover ul {
visibility:visible;
}
#ourproject ul ul li{
width:80px;
padding: 0;
text-align:left;
}

In IE9 compatibility view, the menu is distorted.


I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts.

I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed.

I hope to get some answer soon!
Please ask any more question if you need to- i will be happy to answer.
Thanks in advance.

Let me start by saying I'm a PHP/MySQL guy, not a designer. I know enough CSS to get by, but my focus has been the data side, not the design side. Hell I usually just use tables so I don't have to mess with any of this crap. I guess it's come to the point where I need to update my design skills or be left in the dust (since you can outsource LAMP guys for $4 a friggin' hour now )

I'm using the pretty standard UL-LI menu set to display vertically. Now I've added a couple links and it's too big for one line if I want to maintain style at 800 x 600. I figured the easiest way was to let it wrap to 2 lines. It wraps fine, but everything is either left aligned or right. I'd like both of the rows to be centered. Is there an easy way to do this?

Here's the general layout:
PHP Code:
// .main is the style for the container
// #main is the positioning of this instance of main
// .tree_menu_list is the vertical stuffs
<div class="menu" id="main">
   <ul class="tree_menu_list">
      <li><a href="index.php">Home</a></li>
      <li><a href="index.php?p=vision">Vision</a></li>
      <li><a href="index.php?p=buying">Buying</a></li>
      <li><a href="index.php?p=renovation">Building</a></li>
      <li><a href="index.php?p=selling">Selling</a></li>
      <li><a href="index.php?p=payout">Payout</a></li>
      <li><a href="index.php?p=opportunities">Opportunities</a></li>
      <li><a href="index.php?p=services">Services</a></li>
      <li><a href="images.php">Photos</a></li>
   </ul>
</div> 

Is there any way to have horizontal list items automatically fill any given width?

for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left.

the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width?

Hello All,

I am trying to get a "horizontal menu" in CSS to properly center in my "#topbar" dev which is basically a header that is 100% width of the page. I have the website name, then the menu which is to be centered directly below it.

I have searched google for hours and found one website (I guess cause i'm new it won't let me put the url in here) and it broke down each section of the CSS and it says that to horizontally position the menu just add text-align: center; to the #tabsE ul section, but that doesn't change anything at all. I have also tried replacing the float values with margin-left: auto; and margin-right: auto; (I've used those to center images before) and that just destroys the menu (it all shifts to the right side of the screen, and spaces out vertically).

I am really kind of stuck here, I'm pretty new to CSS and most the basics are clicking, it seems to me that centering items so far has been one of the biggest pains yet.

Here is the CSS:
Code:

/*- Menu Tabs E--------------------------- */

    #tabsE {
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }

    #tabsE ul {
        margin:0;
        padding:10px 10px 0 0px;
        list-style:none;
      }

    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }

    #tabsE a {
      text-align: center;
      background:url("tableftE.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }

    #tabsE a span {
      text-align: center;
      display:block;
      background:url("tabrightE.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#000;
      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#FFFFFF;
      }
    #tabsE a:hover {
      background-position:0% -42px;
      }
    #tabsE a:hover span {
      background-position:100% -42px;
      }

        #tabsE #current a {
                background-position:0% -42px;
        }
        #tabsE #current a span {
                background-position:100% -42px;
        }

I tried to post the HTML (its just a standard <ul> with list </ul>) but it won't let me, because it contains url's so, I can e-mail you that if neccesary.

I truly appreciate any help you can offer.

Thanks,

Chris

I have the following list that I want displayed horizontally. I chose to do it with display:inline instead of float:left as that seemed to be the only way to get it to center on the page:

http://www.jimandkris.com/listtest.html

However, now I can't figure out how to get those submenus to align under their respective parent.

Hopefully this is an easy one, any suggestions?

I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty.

I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line.

For the offending code, please see:
http://www.forma3.com/stuff/css/top_menu_v1.html
http://www.forma3.com/stuff/css/css/right_menu_v1.css

Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed.

Hello,

I'm trying to create an list menu like the one in attached image and I have 2 problems.

1. In IE 6,IE 7 the list is ordered verticaly and not horizontaly (in Opera and FF it is ok)

2. I need to align the text on the bottom of the list like inattached image.

Here is what I manage to do till now : http://www.sibiul.net/test/list-align.php

Anyone knows what I must do ?

10x

Hi Everyone,

I'm new to the forum and somewhat new to CSS.

I am developing a simple webpage that has a horizontal unordered list serving as a navigation bar.

Firefox adds what looks like about 20px of extra space above and below the entire list while internet explorer shows it aligned top left.

Eventually I would like to center the unordered list top and bottom, but I can't seem to get any alignment formatting to work at all.

Here is the problem code:
Code:

<div id="navbox">
	<ul id="navbar">
    <li><a href="index.html">HOME</a></li>
    <li><a href="http://showrooms.canadatrader.com/7010/7622">INVENTORY</a></li>
    <li><a href="formapp.html">APPLY NOW</a></li>
    <li><a href="mailto:rjtria@gmail.com">EMAIL ME</a></li>
   </ul>
  </div>

And the corresponding CSS:
Code:

#navbox {
	background-color: #B1C5D0;
	height: 50px;
	width: 760px;
	overflow: visible;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
	color: #036;
	font-weight: bold;
	font-size: 130%;
	font-family: "Courier New", Courier, monospace;
	line-height: normal;
}
#navbar li {
	display: inline;
	list-style-type: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	padding-right: 10px;
	padding-left: 10px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

I know it's not much.. but it's making me crazy.
I have tried zeroing out all padding / margins to no avail...

Any help would be greatly appreciated!!
Thanks in advance!
Celeste

Hi All,

I have a new site and it has a bug that I don't know how to fix. The navigation and sub navigation is done with a list that is styled with CSS to be horizontal. I am not an expert at this, but learned it from a site, but unfortunately can't remember where

The thing is, the site works most of the time. But when pages load slow, sometimes the list gets displayed as a normal vertical list and the entire "look" of the navigation is ruined. I'm sure I've done something wrong, but I don't know what. Are there any CSS experts here who can set me straight?

The site is http://www.thehousebreakingbible.com/training/index.htm

Thanks for your time, Dana

This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE.

I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action:

http://www.forma3.com/stuff/css/index-v1.2.html
http://www.forma3.com/stuff/css/css/index-v1.2.css

I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error.

I have a list that I've created with the list-style-type being an image.

For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly?

Below is the code. The cell that these lists sit in has has an id of 'cellid'.

Code:

#cellid {
margin: 0 0;
padding: 0 0;
}

#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}

#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}

The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space?

Thanks,

Brian

Seems like most people use unordered lists for menus.
Code:

<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>

Others use definition lists. They claim it is less buggy with IE.
Code:

<dl>
<dt>menu1</dt>
<dt>menu2</dt>
<dt>menu3</dt>
</dl>

Any thoughts on whether unordered lists or definition lists are best?

Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag?
Code:

<ul>
<li><span>menu1</span></li>
<li><span>menu2</span></li>
<li><span>menu3</span></li>
</ul>

Thanks