CSS - Menu Heights With Unordered Lists

I can't seem to find any issues of this on the web, or maybe I'm not doing a correct search. here's my problem.

I'm creating a horizontal menu with an unordered list <ul> with each <li> tag using a background image. My problem is, in IE (both ie6 & 7), the menu seems to display having a staggered cascading effect. Firefox works great as usual...

see screenshot at http://clubsix1.com/images/cascade_effect.png

Here's my CSS code:

Code:

#masthead ul#mystuffnav {
	padding:0;
	margin:0;
	width:334px;
}
#masthead ul#mystuffnav li {
	float:left;
	margin-bottom:1px;
	clear: both;
}

/* Fancy Buttons, My Stuff Nav */
#masthead ul#mystuffnav a.button,
#masthead ul#mystuffnav a.button:link,
#masthead ul#mystuffnav a.button:visited {
    padding:3px 7px 5px;
    text-decoration:none;
    outline:none;
	/*display:block; OQO */
    font-size:10px;
    float:left;
    text-align:center;
    margin:0 1px 0 0;
    line-height:1em;
}

Help is GREATLY appreciated! =)

Hello,

I need to make some unordered lists within a page appear with a graphic as a bullet, and some appear with a disc. My current code is:

Code:

ul {list-style-image: url(../img/redarrow.gif)} 

But this makes all unordered lists appear with the graphic, and of course if I comments out that code, all unordered lists appear with a disc.

Please let me know if it is possible to code it so that I can have both in a page.

Thanks!

Hi,

Trying to create a menu using <ul> tags and to have a nice spacing between <li> items. I have tried the line-height property but it seems like IE ignores them. Firefox formats the line-height properly. Can anyone help me? Should the line-height be applied to ul or li tags?

/Hubba Bubba

www.l33tmonkey.com/sun/index.html

completely ignoring the image issues, which are next on the list to sort out, I have a problem.

I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them

So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire.

the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS

I've got an odd bug in IE7 that's got me completely stumped.

I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it.

My main page works just fine.

Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container.

The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on.

I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated.

eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something.

Hi,

I'm trying to build a simple menu for a layout in XHTML/CSS. I was thinking about having a list and then giving it a style, such as:

Code:

<ul class="menu">
<li id="menu_home">Home</li>
<li id="menu_about">About Us</li>
<li id="menu_contact">Contact Us</li>
</ul>

But then I would like the CSS to display the "li" items horizontally rather than vertically, and without bullets. Also, having the "Home", "About Us", etc, text replaced with images (CSS). Can this be done? I would really appreciate any guidance with this or any other ideas.

Thanks,
Ralph

Hello all,

I have a site up with a menu that I need to replace. Before I do this, i need a bit more control over the different lists that make up the drop down menus.

My goal is to have a unique ID for each list, that allows me to change the width and the position relative to its parent, or trigger. I am not sure what the CSS rules would be to call out each particular list after it has been given a unique identifier.

Please see the code below which provides 2 menu lists and what i feel is the related CSS Code. If this code is not all that is needed, please let me know and I can post more of it. Thanks in advance, i know its a simple thing, but after experimenting, i have not been able to get the results I need.

Menu Code

Code:

 <ul id="p7menubar">
            
    <li id="about"><a  class="trigger" href="../about/index.html">About Us</a>
    <ul>
    
        	<li><a href="../about/distinctions.html">Distinctions</a></li>
        	<li><a href="../about/whytmg.html">Why Choose The Monitor Group</a></li>
        	<li><a href="../about/corevalues.html">Mission + Core Values</a></li>
        	<li><a href="../about/qualifications.html">Unique Qualifications</a></li>
        	<li><a href="../about/ourclients.html">Our Clients</a></li>
        	<li><a href="../about/professionals.html">Our Professionals</a></li>
        	<li><a href="../about/faq.html">FAQ's</a></li>
        	<li><a href="../about/careers.html">Careers</a></li>
       		<li><a href="../about/contact.html">Contact</a></li></ul></li>
            
    <li id="services"><a class="trigger" href="../clientservices/index.html">Client Services</a>
    <ul>
      		<li><a href="../clientservices/IWMP.html">Integrative Wealth Management</a></li>
     		<li><a href="../clientservices/invplanning.html">Investment Management</a></li>
      		<li><a href="../clientservices/blueprint.html" >Personal Financial Blueprint</a></li>
       		<li><a href="../clientservices/estateplanning.html">Wealth Transfer + Estate Planning</a></li>
      		<li><a href="../clientservices/taxplanning.html">Wealth Enhancement, Tax Planning and Reporting</a></li>
       		<li><a href="../clientservices/protection.html">Wealth Protection</a></li>
       		<li><a href="../clientservices/philanthropy.html">Philanthropic Giving</a></li>
      		<li><a href="../clientservices/fees.html">Fee Schedule</a></li></ul></li>

CSS Code:

Code:

/*Class assigned to those Root-Level links that have associated Sub-Menus. The top and bottom padding assigned this element must be the same as that assigned to the p7menubar a element. The right padding is increased
to accomodate the display of background image depicting a downward pointing arrow.*/

#p7menubar a.trigger {
	padding: 5px 16px 5px 10px;
	background-image: url(../p7_cssexpress/p7exp/images/p7PM_dark_south.gif);	background-repeat: no-repeat;
	background-position: right center;	
}


/*The Root-Level list items. Floating left allows
them to appear horizontally. Width is for IE5 Mac. The last rule in this style sheet will set the width for this element to auto for all other browsers - hiding it from IE5 Mac. The width is proportional.As you add and edit root menu items, you will need to test this width to ensure it is wide enough to accomodate all text.*/

#p7menubar li {	float: left;
	width: 8em;
}



/*Sets width for Sub-Menu box and the List Items inside - in proportional em units. This allows the sub-menu width to expand if users resize the text in their browsers.
*/

#p7menubar li ul, #p7menubar ul li  {
	width: 16em;
	text-align: left;}

/*
The sub-menu links. We set color and turn off the right border, which would otherwise be inherited from the root link rule. We set top and bottom padding less than the root items and increas the left padding to indent the sub-menu links a small amount in from the root links.*/


#p7menubar ul li a  {
	color: #006600;
	border-left: 1px solid #333;
	padding: 3px 12px 3px 15px;
	border-right: 0px;
	border-bottom: 1px solid #333333;
}


/*
Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. Positioned Absolutely to allow them to appear below their root trigger. Set to display none to hide them until trigger is moused over.Background Color must be set or problems will be encountered in MSIE. Right and bottom borders are set to simulate a raised look. A gradient background image is assigned.*/

#p7menubar li ul {
	position: 

absolute;
	display: none;
	background-color: #ffffff;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	color: #006600;
}

I'm working on a very simple layout for a site right now, where there are two repeated images on either side of the content in div's, and obviously everything else in between.

The problems I'm having a
- getting the image div's to extend to the end of the page no matter what the height (currently they only fill the browser when the page is loaded, if the page goes further the images do not repeat)
- getting the content div to take up all available space, so the footer div will always be at the bottom of the page, even if it is not vertically scrollable.

Here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Website</title>
<style type="text/css">
html {
  height: 100%;
}
body {
  background-image: url(bg.jpg);
  height: 100%;
  margin: 0;
  min-width: 1024px;
  text-align:center;
}

#wrapper {
  margin: auto;
  align: center;
  height: 100%;
  width: 1024px;
}
#left { 
  background-image: url(sidebar-left.png);
  height: 100%;
  width: 32px;
  float:left;
}
#center {
  background-color: #AAAAAA;
  height: 100%;
  width: 960px;
  float:left;
}
#right {
  background-image: url(sidebar-right.png);
  height: 100%;
  width: 32px;
  float: right;
}
#banner {
  background-image: url(banner-pattern.jpg);
  height: 100px;
}
#buttons {
  background-color: #FFFFFF;
  height: 20px;
  border: 1px solid black;
} 
#content {
  border: 1px solid black;
  height: 100%;
}
#footer {
  background-color: #FFFFFF;
  height: 80px;
  border: 1px solid black;
}
</style>
</head>
<body>

<div id="wrapper">
  <div id="left"></div>
  <div id="center">
    <div id="banner"></div>
    <div id="buttons"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
  <div id="right"></div>
</div>

</body>

</html>

I don't have it hosted anywhere right now but I think it's a relatively simple problem. I did search around for solutions for a while, but I couldn't find a fix.

Yes, I am new to CSS / website design / not using tables to do things

Hello,

I have been writing a web page as a project for a course using XHTML. I have tested it with several browsers, including IE, Netscape, and Opera and validated its source code and CSS Style sheet.

The site works at 1024 X 768 resolution. My problem is that if I minimize the window or change the screen resolution size every div element gets switched around and the display is destroyed. The page is currently located at http://student.flvs.net/html/millety/mod8/index2.htm . Please tell me how to fix this. The links on the page do not work as they should, so only look at the oage I have linked to.

I would like the color behing the navigation to run in a vertical band all the way to the bottom of the page. The footer is supposed to be all the way at the bottom and the main text's background color should not appear under it, which is part of my current problem. Thank you in advance for your help.

Hi,
I have this border on the right hand side of my table and i was wondering, how do i reduce its height as i don't want it going right from the top to the bottom?

border-top: 1px solid #6593B8;

any help is appriciated,

Thanks

Well I've run into a few more snags and after all of my atempts to learn this **** on my own I failed and need help...

keep this in mind...
My only table named capsule is defined like so:
index.php
Code:

<body>
<table class="capsule">

default.php
Code:

.capsule
{
	border-collapse:seperate;
	border-spacing:0;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%;
}

My "biggest" concern

I'm trying to make a site that is at least supported on all resolutions supported by my monitor, 800x600 to 1600x1200. I also plan to include 640x480 but my monitor doesn't go that low so I'm hoping it looks nice, as if anything could look nice at 640x480, when the other resolutions are tested.

I found a few solutions to this but unfortunatly none of them worked for strict xhtml. Most of them used the tagline height attribute and tagline margin attributes. I substituted the tagline html for CSS like this:
Code:

body
{
margin:0;
}

This didn't work, you might have guessed that...

I know with an object and static sizes, like something defined in px, can use the overflow scroll property. But that's static sizes and limited in resizing features.

Here is the code I got my ideas from:
[code]
<BODY leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0" link="#000000" alink="#CDCDCD" vlink="000000">

<TABLE border="0" cellpadding="0" cellspacing="0" height="100%">
[code]

I looked for an alternate to margin-height and margin-width with no luck.

Another "issue" spacing in cells.

I hate IE, yet another problem that is ONLY visible in IE, not opera no mozilla, firefox, galleon, konquor. Wha thappens is, gayness spacing. I have the following CSS and this worked in every browser but IE 6.0. Unfortunately, since MS is a big part of the computer world, I can't just NOT support it. See .capsule above.

According to w3schools this should work from IE5+.

One more "thing" ...a little off topic, just a lil'

I always thought that Opera used the IE engine but Opera, IMO is better than IE. It just, works.

All this for well you know...ugly sites suck...

Any responses to any of these topics or to further expand on the are more than welcome!!!

PS

When I came to this site it said 404 NOT FOUND. I tried again it worked. I then tried NEW THREAD and again the same thing. I tried again and it worked. I said "F* this ****" cleared cache etc and tried again. Still the same problem. Any new place I vist from this visit on, I think, is going to be a pain, all of my old bookmarks will have to be updated somehow...I don't know what this is. Any button I hit, preview post, ad links, save changes, submit thread, etc.. all do the same thing. Some admin might be interested in this... Once I do it once it doesn't happen for that action anymore.

Hi.. another question for the CSS mastas out there.

I have a table taht I have applied a class to:

PHP Code:
<table class="middle"
                       cellspacing="0"
                       cellpadding="0"
                       border="0">
                    <tr>
                        <td>&nbsp;<img border="0"
                             src="images/spacer.gif"
                             width="1"
                             height="1">
                         </td>

                        <td align="left">
                            <p class="customHeading">aaaa</p>
                        </td>

                        <td>
                            <p align="right">
                            <a class="importantLink" href="">aaa</a>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; 
                            <a class="importantLink" href="">aaa</a> &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
                            <a class="importantLink" href="">aaa</a>
                            </p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td colspan="3" valign="top">

<table class="content"
                                           cellspacing="0"
                                           cellpadding="0"
                                           border="0">
                                        <tr>
                                            <td align="left">aaa:</td>

                                            <td><input type="text"
                                                   name="aaa"
                                                   size="22"
                                                   class="formField">
                                            </td>

                                            <td><a href="#">
                                                   <input type="submit"
                                                   value="SEARCH"
                                                   class="formButton">
                                                 </a>  
                                            </td>
                                        </tr>
                                    </table>

</td></tr></table>

.middle {
    width: 760px;
    height: 360px;
    background-color: #FFFFFF;
}

.content {
  background-color: #FFFFFF;
  font: 13px Arial, sans-serif;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  
} 





The issue I'm having is that I can't seem to control the height of the outside tables first row. It seems to just take on a size depending on how I set the height in the element. Can I not place a height tag in the <td>'s for that row to set it at a fixed height?

HI,

I have the following tables:

PHP Code:
<table class="middle"
                       cellspacing="0"
                       cellpadding="0"
                       border="1">
                    <tr>
                        <td style="height: 1px;">&nbsp;<img border="0"
                             src="images/spacer.gif"
                             width="1"
                             height="1">
                         </td>

                        <td align="left" valign="top">
                            <p class="customHeading">aaaa</p>
                        </td>

                        <td valign="top">
                            <p align="right">
                            <a class="importantLink" href="">aaa</a>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; 
                            <a class="importantLink" href="">aaa</a> &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
                            <a class="importantLink" href="">aaa</a>
                            </p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td colspan="3" valign="top">
                                                           
                                    <form action="aaa.php"
                                      method="post"
                                      onsubmit="return validate(this);">
                                    <table class="content"
                                           cellspacing="0"
                                           cellpadding="0"
                                           border="0">
                                        <tr>
                                            <td align="left">aaa:</td>

                                            <td><input type="text"
                                                   name="issueNumber"
                                                   size="22"
                                                   class="formField">
                                            </td>

                                            <td><a href="#">
                                                   <input type="submit"
                                                   value="SEARCH"
                                                   class="formButton"
                                                   onmouseover="this.className='formButtonHover';" 
                                                      onmouseout="this.className='formButton';" >
                                                 </a>  
                                            </td>
                                        </tr>
                                    </table>
                                    </form>
                            
                        </td>
                    </tr>
                </table> 





They use the following CSS classes:

PHP Code:
.middle {
    width: 760px;
    height: 360px;
    background-color: #FFFFFF;
}

.content {
  background-color: #FFFFFF;
  font: 13px Arial, sans-serif;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  
} 





My issues is this. In IE the row of the first table (where the hrefs are) expands to a seemingly arbitrary height, beyond the size of the text contained within it. In Netscape the row is only as high as the text contained within it.

I want it to act the same in IE as it does in Netscape. Never thought I'd say that.. =)

Any ideas?

Hi,

I'm new to the forum and very new to CSS, so please excuse my ignorance or any stupid fundamental mistakes I have made.

I have almost got what I need to work, but my wrapper and the leftshade and rightshade div heights will not work with the height of the page. If I set them to a preset pixel height, they're fine, but when I set them to auto they disappear. I need them to be able to scroll to whatever the length of my content is going to be.

I could really use some advice on how to sort this. Many thanks in advance.

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" />
<title>Heading</title>
<style type="text/css">
<!--

body {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: #C2FFC1;
}
#wrapper {
	width:960px;
	height:auto;
	margin-right: auto;
	margin-left: auto;
}
#middle {
	position:relative;
	top:0px;
	width:940px;
	height:auto;
	float: left;
	background-color: #FFFFFF;
}
#leftshade {
	top:0px;
	width:10px;
	height:600px;
	float: left;
	background-image: url(images/shadeleft.png);
	background-repeat: repeat-y;
}
#rightshade {
	top:0px;
	width:10px;
	height:600px;
	float: left;
	position: relative;
	background-image: url(images/shaderight.png);
	background-repeat: repeat-y;
}
#banner {
	width:940px;
	height:150px;
	background-color: #FFFFFF;
}
#navbar {
	width:940px;
	height:50px;
	background-color: #6DC072;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #666666;
	border-bottom-color: #666666;
	text-align: left;
	vertical-align: middle;
}
}
#centre {
	position:relative;
	width:580px;
	height:257px;
	padding: 10px;
	float: left;
}
#content {
	width:940px;
	height:auto;
	background-color: #FFFFFF;
}
#contentleft {
	position:relative;
	width:150px;
	height:auto;
	float: left;
	padding: 10px;
}
#contentmiddle {
	position:relative;
	width:580px;
	height:auto;
	padding: 10px;
	float: left;
}
#contentright {
	position:relative;
	width:150px;
	height:auto;
	float: right;
	padding: 10px;
}
-->
</style>
</head>

<body>



<div id="wrapper">
  <div id="leftshade"></div>
  <div id="middle">
    <div id="banner"></div>
    <div id="navbar"></div>
    <div id="content">
      <div id="contentleft">
        <p>f</p>
      </div>
      <div id="contentmiddle">
        <p>&nbsp;</p>
      </div>
      <div id="contentright">
        <p>&nbsp;</p>
      </div>

    </div>

  </div>
  <div id="rightshade"></div>
</div>
</div>
</body>
</html>

See:
http://www.mandgweb.net/css_help/

I am trying to get the 'divs' of the 3 columns of content (A, B, C) to expand to the height of the tallest column (in this case 'A') while the height of the main container (blue border) expands/contracts as necessary to accommodate the tallest column. The main effect I am trying to achieve it to get the vertical rules between the columns to be the same height (i.e. the height of the tallest column).

Easier said then done..?

Thanks in advance.