CSS - Ul Ui Horizontal Menu, Space Underneath

EDIT: Realized this is not an HTML issue. If a mod could move this to the CSS forum I would appreciate it. Thanks

Please take a look at this page:

http://www.4xp.net/template2/

I cannot get the space under the horizontal nav bar to go away. It has to do with the image links, because if I remove then and put plain text in there, that space goes away. It only happens in IE, the space isnt there in FF.

Here is my css

PHP Code:
 body {
    margin-top: 5px;
    margin-bottom: 5px;
    background-image: url('images/bg.jpg');
}

#header {
    width: 900px;
    height: 90px;
    padding: 0;
    margin: 0;
    text-align: left;
    background-image: url('images/header_bg.jpg');
}

img {
    padding: 0;
    margin: 0;
}

#menu {
    border-top: 1px solid #003366;
    border-bottom: 1px solid #003366;
    width: 100%;
    height: 25px;
    background: url('images/menu_bg.jpg');
    background-repeat: repeat-x;
    text-align: left;
}

.menulink {
    margin-left: 20px;
    height: 25px;
}

#page {
    width: 900px;
    border: 1px solid #000000;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#status {
    width: 900px;
    height: 25px;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #003333;
    margin: 0;
    padding: 0;
    border: 0;
} 





Any help would be very much appreciated. Thanks everyone!

Hi Folks,

I'm having problems with some of the divs on my site. Here is the site with the problem areas colorized to highlight the issue...

example

I have 3 columns, but the problem arises in the area marked "panel2". I want the div containing this text to stretch to fill the remaining available space so that the border-left attribute reaches the footer, encapsulating the text in the middle column.

I can't use the border-right attribute of the middle column because of the small indent between panels 1 and 2. I've scoured forums and googled till my fingers hurt, but can't seem to come up with a satisfactory explanation as to why I can't do this.

the CSS is he
styles.css

Any help/suggestions or comments would be appreciated more than I can describe!!

Thanks in advance!!

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've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css.

Here they are below.

drop_down.js:
Code:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
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; 

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body> 
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul> 
</body>
</html> 

Style2.CSS:
Code:

body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */ 

I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages.

When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below.

Ideas anyone?

Code:

Code:
Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div>

  
<div id="nav">
<img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" />
    </div>

Jake

I've tried the tutorials on CSS menus but can't seem to get it to work right for my project.

I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help?


The code is below:

Code:

  <tr>
          
    <td width="766">
       <div id="navcontainer">        
          <ul>
          <li><a href="">Home</a></li>
          <li><a href=""> Project Status</a></li>
          <li><a href=""> Tasks</a></li>
          <li><a href="">General Information</a></li>
          <li><a href="">Completed Tasks</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
        </ul>
    </div>

CSS

Code:

   body,html {
   margin: 0;

}

#navcontainer ul {
	list-style-type: none;
	text-align: center;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;


}

#navcontainer ul li {
	display: inline;


}

#navcontainer ul li a {
	text-decoration: none;
	padding: 0.2em 1em;
	color: #fff;
	background-image: url(images/back.gif);
	height: 24px;
	line-height: 23px;

}

#navcontainer ul li a:hover {
	color: #fff;
	background-color: #960033;
	background-attachment: fixed;
	background-repeat: repeat;
	background-position: center;
	background-image: url(images/backover.gif);


}

---

what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu

i looked at these and could find one

http://www.cssdrive.com/index.php/menudesigns/category/C20/

Hi,

I have the following menu that is currently laid out with a table:

http://www.ianarmstrong.com/menutest/

I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image.

I need a way to handle the 5 different images, and have a mouseover effect as well.

Could someone offer some direction on this problem?

I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item?

Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item?