CSS - Variable Sized Menu That Doesnt Wrap

I have created a dropdown menu for my site.
The dropdown works great in Firefox, safari and opera but it does not drop down in IE.

The menu is displaying ok in IE but when you hover over a tab nothing happens.

This is the link http://www.misi.co.uk/2_template.php There are two menus "navigation" which is the bottom category menu in grey and "navigation_blue" - which is the top bue tabs. I have the same problem with both menus.

I normally hash around to get IE to function as I wish however only having a mac infront of me its a bit of a pain as I have to ring a friend to check IE for me, if anyone knows of a browser test that allows you to check functions in IE please let me know, I use a couple but only get screen shots so its fine for layout checks but no good at testing drop down menus and the like.

Code:

/* Categories Bottom MENU */
 
#navigation {width:985px;height:50px;margin-top:-27px;}
#navigation ul {margin-left: -40px; text-align:center;}
#navigation li {height:21px;float: left; text-align:center;position: relative;background: url(/images/top-tab-lgt.png) no-repeat}
#navigation * {cursor: pointer;}
#navigation li a {text-align:center;width:87px;float:left; color:#333333; font-size:5px; display: block; padding-left:2px;padding-top:2px; text-decoration: none; }
#navigation li a span {float: left; display: block; line-height: 21px; height: 21px; padding: 0 6px 0 1px;}
 
.os_windows #navigation li a span {padding: 0 0px 0 0px}
 
#navigation li a {color: #000000; font-size: 11px; font-weight: 100; font-family: Arial, sans-serif; }
#navigation li a:hover {color: white; background-color: #e2e0e1;}
#navigation li {list-style:none;}
#navigation li:hover .navigation_hover,
#navigation li.hover .navigation_hover {visibility: visible;}
 
#navigation .navigation_hover {
  width: auto;
  position: absolute;
  top: 18px;
  left: -40px;
  margin: 0px;
  display: block;
  visibility: hidden;
  border-top: 0;
  z-index: 4;
}
 
#navigation .navigation_hover li {float: left}
 
#navigation .navigation_hover li a {
  float: none;
  padding: 0 2px;
  line-height: 21px;
  width: 110px;
  background: #e2e0e1;
  color: #000000;
  border: 0;
}
 
#navigation .navigation_hover li a:hover {
  background: #cc205c;
  color: white;
}
 
/* TOP TABS */
#blue_navigation {height:50px; text-align:right; margin-left: 265px; margin-top:-5px;}
 
#blue_navigation ul {text-align:right;  }
#blue_navigation li {height:40px; float: left; position: relative;list-style:none;background: url(/images/top-tab-blue.png) no-repeat;}
#blue_navigation * {cursor: pointer;}
#blue_navigation li a {width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
#blue_navigation li a span{width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
 
#blue_navigation li {list-style:none;}
 
 
#blue_navigation li a:hover {color: #0D7DC7; background: url(/images/top-tab-hblue.png) no-repeat}
#blue_navigation li:hover .blue_navigation_hover,
#blue_navigation li.hover .blue_navigation_hover {visibility: visible;}
 
.os_windows #blue_navigation li a span {padding: 0 0px 0 0px}
 
#blue_navigation .blue_navigation_hover {
  float: none;
  position: absolute;
text-align:left;
  width: auto;
  left: -40px;
  height:21px;
  margin-top: 20px;
  display: block;
  visibility: hidden;
   z-index: 4;
}
 
#blue_navigation .blue_navigation_hover li {float: left}
 
#blue_navigation .blue_navigation_hover li a {
  float: none;
    left: -85px;
  padding-top: 0px;
  line-height: 20px;
  color: #7c7c7c;
  border: 0;
}

I am having issues with a horizontal menu bar. The menu is supposed to be created with 4 images seamlessly aligned, but I find that there is a 3px space between each when I load the page. This causes the width of the 4 images to exceed the specified width specified for that id and a wraparound occurs.

Page: www .sjbcathedral. org/php/sample.php

CSS:
Code:

body {
   height:100%; 
   max-height:100%; 
   padding:0; 
   margin:0; 
   border:0;
   background:url(../images/redbkgnd.jpg); 
   overflow:auto; 
   text-align:center;
}

img {border:0px; margin:0px; padding:0px;}

#container {
  margin-left:auto;
  margin-right:auto;
  height:auto;
  text-align:left;
  width:995px;
  background:url(borderShadow2.png);

#menuBar {
  width:905px
  height:35px
}

menuBar PHP:
PHP Code:
<div id="menuBar">

<img src="menu1_MassTimes.jpg" ></img>
<img src="menu2_OurSchool.jpg" ></img>
<img src="menu3_OurClergy.jpg" ></img>
<img src="menu4_ContactUs.jpg" ></img>

</div> 





I'm new around here and to webdesign in general...

Thanks for the help!

Best,
Andrew

Hello,

I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works.

The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work.

http://www.tpxdesign.com/test/Valliant/alpha/index7.php

My nav menu code and nav style sheet:

Code:

<!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav"> 
  <li><a href="demoreel.php" class="port">Portfolio</a> 
    <ul>
      <li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
      <li><a href="shorts.php" class="port">Shorts</a></li>
	  <li><a href="musicvid.php" class="port">Music Video</a></li>
	  <li><a href="comvid.php" class="port">Commercial</a></li>
	  <li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
	  <li><a href="gallery.php" class="port">Photo. Gallery</a></li>
    </ul>
  </li> 
  <li><a href="services.php" class="serv">Services</a> 
  </li> 
  <li><a href="newupdate.php" class="newe">News & Events</a> 
    <ul>
      <li><a href="newupdate.php" class="newe">News/Updates</a></li>
      <li><a href="eventblog.php" class="newe">Event Calendar</a></li>
    </ul>
  </li>
  <li><a href="bio.php" class="about">About Valliant</a>
    <ul>
      <li><a href="resume.php" class="about">Resume</a></li>
      <li><a href="bio.php" class="about">Biography</a></li>
	  <li><a href="contact.php" class="about">Contact</a></li>
    </ul>
  </li> 
  <li><a href="links.php" class="link">Links</a></li>
  <li><a href="index7.php" class="home">Home</a></li>
</ul> 
</div> 
</div>
<!--[if !IE]><!-- end nav --><![endif]-->

Code:

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

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 198px; /* 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 */

#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}

if you look under the top banner on my site, the navigation bar is too tall and wide, and all of the buttons don't even fit the full width of the page.

it is partially complicated because two of the ten buttons have drop-down menus created through javascript.

it is a horizontal ul with the buttons floated left. i'll give you the cut-down html code and then the css to go along with it so you get the general idea.

navigation menu html:

html Code:
Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'><img src='[themedir]images/home_icon.gif' alt=''>Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'><img src='[themedir]images/allgames_icon.gif' alt=''>Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Games"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } $link=get_category_link("name=Unvalidated&page=1"); $unvalidated_games=get_games("active=No"); $num_unvalidated=count($unvalidated_games); echo " <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a> </div> </li> <li> <a href='".get_category_link("name=all&page=1&cattype=videos")."'"; ?> onmouseover='mopen("m2")' <?php echo " onmouseout='mclosetime()'><img src='[themedir]images/videos_icon.gif' alt=''>Videos</a> <div id='m2' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Videos"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1&cattype=videos"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("cattype=videos&thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } $link=get_category_link("name=Unvalidated&page=1&cattype=videos"); $unvalidated_games=get_games("active=No&cattype=videos"); $num_unvalidated=count($unvalidated_games); echo " <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a> </div> </li> <li> <a href='".get_users_link()."'><img src='[themedir]images/members_icon.gif' alt=''>Members</a> </li> <li> <a href='".get_news_link()."'><img src='[themedir]images/news_icon.gif' alt=''>News</a> </li> <li> <a href='".get_submit_link()."'><img src='[themedir]images/request_icon.gif' alt=''>Submit</a> </li> <li> <a href='".get_links_link()."'><img src='[themedir]images/links_icon.gif' alt=''>Links</a> </li> <li> <a href='".get_rules_link()."'><img src='[themedir]images/rules_icon.gif' alt=''>Rules</a> </li> <li> <a href='".get_faq_link()."'><img src='[themedir]images/faq_icon.gif' alt=''>FAQ</a> </li> <li> <a href='".get_contact_link()."'><img src='[themedir]images/contact_icon.gif' alt=''>Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>

  
<div id='navbar'>
        <ul id="sddm">
        <?php
        echo "
            <li>
                <a href='".get_home_link()."'><img src='[themedir]images/home_icon.gif' alt=''>Home</a>
            </li>
            <li>
                <a href='".get_category_link("name=all&page=1")."'"; 
                ?>
                    onmouseover='mopen("m1")' <?php echo "
                    onmouseout='mclosetime()'><img src='[themedir]images/allgames_icon.gif' alt=''>Games</a>
                <div id='m1' 
                    onmouseover='mcancelclosetime()'
                    onmouseout='mclosetime()'>
                    ";
                    $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Games");
                    foreach ($categories as $category) {
                        $link=get_category_link("name="._sp($category['name'])."&page=1");
                    
                        echo "<a href='".$link."'>".$category['name'];
                    
                        $category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
                        echo " (".$category['gamenum'].")";
                    
                    
                        echo "</a>";
                    }
                    $link=get_category_link("name=Unvalidated&page=1");
                    $unvalidated_games=get_games("active=No");
                    $num_unvalidated=count($unvalidated_games);
                    echo "
                    <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a>
                </div>
            </li>
            <li>
                <a href='".get_category_link("name=all&page=1&cattype=videos")."'"; 
                ?>
                    onmouseover='mopen("m2")' <?php echo "
                    onmouseout='mclosetime()'><img src='[themedir]images/videos_icon.gif' alt=''>Videos</a>
                <div id='m2' 
                    onmouseover='mcancelclosetime()'
                    onmouseout='mclosetime()'>
                    ";
                    $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Videos");
                    foreach ($categories as $category) {
                        $link=get_category_link("name="._sp($category['name'])."&page=1&cattype=videos");
                    
                        echo "<a href='".$link."'>".$category['name'];
                    
                        $category['gamenum'] = count(get_games("cattype=videos&thecat="._sp($category['name'])));
                        echo " (".$category['gamenum'].")";
                    
                    
                        echo "</a>";
                    }
                    $link=get_category_link("name=Unvalidated&page=1&cattype=videos");
                    $unvalidated_games=get_games("active=No&cattype=videos");
                    $num_unvalidated=count($unvalidated_games);
                    echo "
                    <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a>
                </div>
            </li>
            <li>
                <a href='".get_users_link()."'><img src='[themedir]images/members_icon.gif' alt=''>Members</a>
            </li>
            <li>
                <a href='".get_news_link()."'><img src='[themedir]images/news_icon.gif' alt=''>News</a>
            </li>
            <li>
                <a href='".get_submit_link()."'><img src='[themedir]images/request_icon.gif' alt=''>Submit</a>
            </li>
            <li>
                <a href='".get_links_link()."'><img src='[themedir]images/links_icon.gif' alt=''>Links</a>
            </li>
            <li>
                <a href='".get_rules_link()."'><img src='[themedir]images/rules_icon.gif' alt=''>Rules</a>
            </li>
            <li>
                <a href='".get_faq_link()."'><img src='[themedir]images/faq_icon.gif' alt=''>FAQ</a>
            </li>
            <li>
                <a href='".get_contact_link()."'><img src='[themedir]images/contact_icon.gif' alt=''>Contact</a>
            </li>";
        ?>
        </ul>
        <div style="clear:both"></div>
    </div>

navigation menu general css:

css Code:
Original - css Code #sddm { display:block; margin: 0; padding: 0; z-index: 30; position:absolute; } #sddm li { display:block; margin: 0; padding: 0; list-style: none; float: left; max-height:31px; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 4px 0.3em; margin:0; }

  

 #sddm {


     display:block;


     margin: 0;


     padding: 0;


     z-index: 30;


     position:absolute;


 }


  


     #sddm li {


         display:block;


         margin: 0;


         padding: 0;


         list-style: none;


         float: left;


         max-height:31px;


     }


     


         #sddm li a {


             display: inline-block;      


             text-decoration: none;


             color:#495B20;


             background-color:#BAD36B;


             border-left: 2px solid #fff;


             border-top: 2px solid #fff;


             border-right: 2px solid #000;


             border-bottom: 2px solid #000;


             padding: 4px 0.3em;


             margin:0;


         } 

so what i want is for the buttons (<li>s) to have the exact height of their background div, which is 31px, and i also want them to fill 100% of their background div's width. how can i make this possible?

I got a bit of a problem, I don't know if this is possible but I want a container that resizes depending on the content inside it.

BUT I want the rest of the containers to be the same size as the biggest.

I.e.


--------- --------- --------- ---------
| | | | | | | |
| | | | | | | |
| | --------- --------- ---------
---------




See the first one is bigger?
Well I want the rest to be of the same size, i.e.

--------- --------- --------- ---------
| | | | | | | |
| | | | | | | |
| | | | | | | |
--------- --------- --------- ---------