CSS - Horizontal Subnav Problem

See the last post for the solution.

Before I get to the CSS and the markup, some background info: I am rebuilding a web-based database to be all-CSS (except for the tabular data, of course). I want to make it accessible in Safari, Firefox/Mac and Firefox/Win. Anything else would be a plus but is not necessary. The markup relies heavily on PHP.

The problem lies with a horizontal nav bar I have at the top of every page. I'm using a modified version of the Suckerfish Dropdown that you can find on either HTML Dog or A List Apart.

In Safari, this works to perfection. In Firefox/Mac, the alignment is a little off (which I'll fix later), but other than that works pretty well. In Firefox/Win, this absolutely blows up all over the place. There are a lot of symptoms to describe, so for now I'll provide the CSS and the markup, and if more description is necessary, I'll provide it as best I can.

Without further ado, here's the CSS for the menu:

Code:

#main_menu {
top: 0;
left: 0;
position: fixed;
width: 100%;
background: #D8DCEF;
margin: 0; padding: 1px 0;
text-align: left;
border: 1px dotted #446CB4;
border-width: 0 0 1px 1px;
}

#nav, #nav ul {
float: left;
list-style: none;
padding: 0;
margin: 0 2px;
font-weight: bold;
}

#nav a { color: #111; }

#nav li, #nav li.search {
float: left;
padding: 1px 4px;
margin: 0 2px;
border: 1px solid transparent;
background: transparent;
text-align: center;
}

#nav li.search { padding: 0 4px; border: 0; }
#nav li:hover { border-color: #3466B1; background: #fff; }
#nav li.search:hover { background: transparent; }

#nav li span { font-size: 9px; line-height: 11px; }

#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
border: 1px solid #3466B1;
margin: 1px 0 0 0;
}

#nav li li {
width: 142px;
margin: 0;
padding: 0 4px;
line-height: 1.5em;
border: 0;
background: #fff;
text-align: left;
}

#nav li li a {
display: block;
width: 142px;
text-decoration: none;
padding: 0;
}

#nav li li a:hover { color: blue; }
#nav li ul ul { margin: -1.6em 0 0 150px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li li:hover, #nav li.sfhover { background: #D8DCEF; }
#nav ul.end { width: 300px; }
#nav ul.end li, #nav ul.end li a { width: 292px; }
#nav ul.long { width: 165px; height: 300px; overflow: auto; }
#nav ul.long li, #nav ul.long li a { width: 142px; }
#nav li.flyout { background: url(../images/icons/arrow.gif) center right no-repeat #fff; }
#nav li.flyout:hover { background: url(../images/icons/arrow.gif) center right no-repeat #D8DCEF; }
#nav li.separate { border-top: 1px solid #3466B1; background: #EFF1F9; font-style: italic; }

And here's an anonymized version of the markup:

Code:

<div id="main_menu">
	
<ul id="nav">

<li>Menu 1<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li>Menu 2<ul>
	<li><a href="#">Choice 1</a></li>
	<li class="flyout">Submenu 2a<ul class="end">
		<li><a href="#">Subchoice 1</a></li>
		<li><a href="#">Subchoice 2</a></li>
		<li><a href="#">Subchoice 3</a></li>
	</ul>
	</li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li>Menu 3<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
	<li><a href="#">Choice 3</a></li>
</ul>
</li>

<li>Menu 4<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li class="search"><form name="search" action=""><input name="name_search" type="text" onFocus="if(this.value=='Search')value=''" onBlur="if(this.value=='')value='Search';" value="Search" size="25"> <input type="submit" name="Submit" value="Go"></form></li>

</ul>
							
</div>

When I comment out the main menu, the pages load just fine, so it has to be somewhere in the code for the main menu (or that means it's somewhere else entirely). Thanks in advance for taking the time to look at my code, and any help at all is extremely appreciated.

Hi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com
Im a little new to css so dont be to hard on me

Hi,

I am wanting a site that is vertically and horizontally centered. I have achieved to vertically center in both FF and IE but now I am having horizontal centering problems which is usually the easy part. I have tried many different methods and I am not able to center it in FF but I am able to center in IE.

If someone could help me that would be great.

Here my page: jacenta.com/TESTING/

Here is the code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Welcome Canada - Immigration Services Inc.</title>
<style type="text/css">
body, html
{
height:100%;
}
body
{
background-color:#dddddd;
}
#outer
{
display:table; 
height:100%; 
#position:relative; 
overflow:visible;
}
#inner
{
#position:absolute;
_top:50%;
display:table-cell;
vertical-align: middle;
text-align:center;
}
#inner2
{
#position:relative;
#top:-50%;
}
#container
{
width:100%;
}
#box
{
background-color:#FFFFFF;
width:700px;
height:500px;
text-align:left;
}
</style>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <div id="inner2">
        <div id="container">
          <div id="box">
           Text
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

This might be a dumb question ... but here it is. I have a red background on my page and a simple table with one cell. I applied, via CSS, a 5 px border in white (border: 5px #fff solid and I want the bottom border to be black (border-bottom: 5px #000 solid but I didn't expected that result : the bottom border gets angular delimitation on both sides (see the link below).


Sample of the table

Here is the code used;

CSS
Code:

<style>

body
{
margin: 0;
padding: 0;
}

div.main
{
background-color: red;
height: 100%;
width: 100%;
}

.maintable
{
border: 5px #fff solid;
border-bottom: 5px #000 solid;
}

</style>

HTML
Code:

<body>
<div class='main'>

<br /><br />
<center>
<table border='0' cellspacing='0' cellpadding='0' class='maintable'>
	<tr>
		<td>Cell #1</td>
	</tr>
</table>
</center>

</div>
</body>

What I want, is a clean table that, if the border-bottom is declared AFTER the border statement, it will color ALL the bottom white to black, and if border-bottom is declared BEFORE the border statement, it will color the bottom border black except both sides (left and right) that will remain white.

I don't want angular sides like the one in the link, I want horizontal or vertical sides only, is that possible?

Thanks a lot.

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.

Hi,
I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site.

If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome.

Thanks in advance.

Working on converting the layout in the attached image and I'm having a problem with the main menu. Here are my problems:

*trying to push down the menu items. Setting padding-top only seems to extend the borders up above the horizontal line and doesn't push the text down.

*getting the highlight color above the text. Some ideas I had were trying to set a background image for each list item (but how can I do this without the borders extending above the horizontal line) or setting a background image of the whole unordered list (but with this will "break" when users have different font sizes).

Any thoughts? Layout is attached as well as what little code I have since I'm just starting on this project.

Thanks in advance,
-b

Hi,

I have been developing my own website for some time now, and have asked a lot of questions, and checked other CSS resources to do a horizontal list.

I have managed to create a horizontal list and it looks very good in my website. However I wish to improve this.

At the moment I have to give a width for each element in my list. This means that if I have 5 elements in my list then I set the following CSS property in the ul li as follows: Code:

div#header ul li {

	width: 20%;
	padding: 0px;
}

If the elements become four then I would set the width equals to 25% and so on.

I would like to change this so that the list will still appear the same without me having to set the width. This would mean I do not need to change the CSS file each time I add a new element in my list.

My list is inside a div tag. I would like to have the elements inside that list extend through the whole space of the div. I have checked other websites to see the examples they give, however they all seem to only provide an example with a width.

Is this possible? Or I have to always set the width of the li element?

I am sorry if I am not clear enough. Thanks for any suggestions.

Regards,
Sim085

I am having a problem with a CSS Menu in which the sub menu items are disappearing before I am able to get my mouse over them. I have tried adjusting the padding for the nav items but it did not have any effect but to shift all of the menu elements.

Here is the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<!--<script src="javascript/javascript.js" type="text/javascript" language="javascript"></script>-->
<title>ACS Web Group - Administration Interface</title>
</head>

<body>
<div id="pageContainer">
	<div id="header">
        <div id="headerLeft">
       	  <img src="images/acs_header.jpg" width="332" height="55" hspace="0" vspace="0" />
        </div>
        <div id="headerRight">
   	    	<a href="#"><img src="images/header_logout.jpg" width="60" height="55" hspace="0" vspace="0" border="0" /></a>
        </div>
    </div>
    <div id="menu">
        <ul id="navbar">
            <li><a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Menu 1 - Sub 1</a></li>
                    <li><a href="#">Menu 1 - Sub 2</a></li>
                </ul>
            </li>
        
            <li><a href="#">Menu 2</a>
                <ul>
                    <li><a href="#">Menu 2 - Sub 1</a></li>
                    <li><a href="#">Menu 2 - Sub 2</a></li>
                </ul>
            </li>
       
            <li><a href="#">Menu 3</a>
                <ul>
                    <li><a href="#">Menu 3 - Sub 1</a></li>
                    <li><a href="#">Menu 3 - Sub 2</a></li>
                </ul>
            </li>
	  	</ul>
    </div>
    <div id="body">
    	<div id="menuShade">
        	
      	</div>
        
    </div>
    <div id="footer" align="center">
   		<a href="http://www.ACSWebGroup.com">www.ACSWebGroup.com</a>&nbsp; 905-827-7882 
    </div>
</div>
</body>
</html>

Here is the menu.css:
Code:

/* CSS Document */

#navbar {
    margin: 0px;
    padding: 0px;
    height: 1em; }
#navbar li {
    list-style: none;
    float: left; }
#navbar li a {
    display: block;
    padding: 3px 8px;
    color: #fff;
    text-decoration: none; }

#navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
    background-color: #fff;}
#navbar li:hover ul {
    display: block;
    position: absolute;
    margin: 0px;
    padding: 0px; }
#navbar li:hover li {
    float: none; }
#navbar li:hover li a {
    /*background-color: #fff;*/
    border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
    color: #000; }
#navbar li li a:hover {
    background-color: #fff; }
#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0px;
    padding: 0px; }
#navbar li:hover li, #navbar li.hover li {
    float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    /*background-color: #fff;*/
    border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
    color: #000; }

and here is the css.css:
Code:

/* CSS Document */
html{
	height:100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
}

body{
	margin:0px;
	padding:0px;
	height:100%;
}

#pageContainer{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

#header{
	background-image:url(../images/header_background.jpg);
	background-repeat:repeat-x;
	height:55px;
	margin:0px;
	padding:0px;
	padding-right:25px;
}

#headerLeft{
	float:left;
	margin:0px;
	padding:0px;
}

#headerRight{
	float:right;
	margin:0px;
	padding:0px;
}

#menu{
	background-image:url(../images/menu_background.jpg);
	background-repeat:repeat-x;
	height:20px;
	margin:0px;
	padding:0px;
	vertical-align:top;
	overflow:hidden;
	z-index:250;
}

#menuShade{
	background-image:url(../images/menu_shading.png);
	background-repeat:repeat-x;
	position:relative;
	top:0px;
	left:0px;
	height:9px;
	margin:0px;
	padding:0px;
}

#body{
	overflow:auto;
	margin:0px;
	padding:0px;
	height:100%;
	width:100%;
	position:absolute;
	top:75px;
	z-index:100;
}

#footer{
	background-image:url(../images/footer_background.jpg);
	background-repeat:repeat-x;
	background-color:#003;
	position:relative;
	bottom:93px;
	left:0px;
	height:18px;
	margin:0px;
	padding:0px;
	font-size:10px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#BFC0AD;
	padding-top:2px;
}

Any help would be greatly appreciated.

Thanks,
LiquidBuRn

Hi all!

I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to.
The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up

You can check out the site at:
cleopatra.gebodesign.no

The files are at:
gebodesign.no/cleopatra/menu.php
gebodesign.no/cleopatra/stylesheet.css

Thanks for any input

Hi folks,

I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE.

I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page.

Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all.

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.

Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background.
here is the vertical menu.

http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html

replace (dot)s with period

I want to make the buttons next to each other, but with about 10px space in between them.

Thanks.

How do I create a div with a horizontal overflow? I have a div box which is 150px high and 200px wide. I need it to fill up the height and then overflow to the right so I can scroll it horizontally. The div box contains thumbnail images.