CSS - Nested List Problem In Ie (as Usual) Ff Displays It Ok

I have read more tutorials on list than I care to recall and still I am having difficulties getting this to work right.

Here is the web page

The top navigation bar has a link "Other regions".

I want to have a drop down list of the other regions under it.

I nested a list under the "Other regions" li. It is working - sort of but not correctly.

The nested list is showing up under "home" and the are all on top of each other.

Here is the html:
Code:

	<div id="topbar">
  	<ul>
		
      <li><a href="index.html">Home</a></li>
		
      <li><a href="about_us/about_us.html">About Us</a></li>
		
      <li class="dropmenu"><a href="other_regions.html">Other Regions</a> 
        <ul>
          <li><a href="#">Ireland</a></li>
          <li><a href="#">Germany</a></li>
          <li><a href="#">USA (North America)</a></li>
          <li><a href="#">Latin America</a></li>
          <li><a href="#">Other</a></li>
        </ul>
      </li>
   	</ul>
  	</div>

Here is the css:
Code:

#topbar {
	height: 20px;
	background-color: #3399FF;
	border: 1px solid #000099;
	padding-left: 10px;
	margin-bottom: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	color: #FFFFFF;
	background-color: transparent;
	border: 1px solid #3399FF;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#topbar a:hover, #topbar a:active {
	color: #000099;
	background-color: #DDEEFF;
	border: 1px solid #000099;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#topbar ul {
	list-style: none;
	margin: 1px 0px 1px 0px;
	padding: 2px 0px 0px 0px;
}

#topbar li {
	display: inline;
	margin-right: 150px;
}


.dropmenu ul  {
	position: relative;
}

.dropmenu li  {
	position: absolute;
	
}

.dropmenu  a:link, .dropmenu  a:visited {
	color: #000000;
	background-color: transparent;
	border: 1px solid #FF00FF;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

.dropmenu  a:hover, .dropmenu  a:active {
	color: #000099;
	background-color: #DDEEFF;
	border: 1px solid #000099;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

.dropmenu li:hover ul { display: block; }


/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	min-height: 519px;
	background: url(../images/bgcol.gif) repeat-y;
	padding: 0px;
	margin: 0px;
}

Help please

ok i would like to have on my nested list 1.1 and 1.2 instead of 1?

ie
Code:

1. hhh
   1.1 jjj
   1.2 kkk
2. kkk
   2.1 kkkk etc

but currently if i have the list-style-type as decimal the inner list comes out as just 1,2,3 etc...


is it even possible to do this?

http://img55. imageshack .us/img55/6775/cssexamplesy8.png

^ please remove the space before and image shack to view the image

I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this:

Code:

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>
     <ul>
      <li>sub item 1</li>
      <li>sub item 2</li>
     </ul>
</li>
 <li>item 3</li>
</ul>

Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox.

Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution.

Cheers

Weird issue with FF ive noticed can anyone explain why this happens?

I have two divs, header and nav. Nav is inside header. Now when I placed a list inside nav it pushed my header div down abit maybe 15px. However when I added the following rule...

Code:

#nav ul{
	margin-top:0px;
}

The error goes away. Strange isnt it? Heres my html and css

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>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="nav,5,5,false,false,0,0";
//-->
</script>
</head>
<body>
<div id="header">
	<div id="nav">
    	<ul>
        	<li>Home</li>
            <li>Browse</li>
        </ul>
    </div>
</div>

<div id="content">
  <h1 id="mainheader">Latest Templates</h1>
    <h1 class="sideheader">List One Title</h1>
    <h1 id="latesttemplates">Heres the latest templates</h1>
    <ul class="sidebarlist">
    	<li>list one</li>
        <li>list two</li>
        <li>list three</li>
        <li>list four</li>
        <li>list five</li>
    </ul>
    <h1 class="sideheader" style="top:150px">List One Title</h1>
  <ul class="sidebarlist" style="top:175px;">
    	<li>list one</li>
        <li>list two</li>
        <li>list three</li>
        <li>list four</li>
        <li>list five</li>
    </ul>
    <div id="templateholder" class="toprow" style="left:20px;"></div>
    <div id="templatedescript" class="descriptoprow" style="left:20px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template1name</td>
            </tr>
             <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template1date</td>
             </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template1type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template1images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
    </div>
    <div id="templateholder" class="toprow" style="left:185px;"></div>
    <div id="templatedescript" class="descriptoprow" style="left:185px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template2name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template2date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template2type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template2images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
  </div>
    <div id="templateholder" class="toprow" style="left:350px;"></div>
    <div id="templatedescript" class="descriptoprow" style="left:350px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template3name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template3date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template3type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template3images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
  </div>
    <div id="templateholder" class="toprow" style="left:515px;"></div>
    <div id="templatedescript" class="descriptoprow" style="left:515px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template4name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template4date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template4type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template4images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
  </div>
    <div id="templateholder" class="bottomrow" style="left:20px;"></div>
    <div id="templatedescript" class="descripbtmrow" style="left:20px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template5name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template5date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template5type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template5images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
  </div>
    <div id="templateholder" class="bottomrow" style="left:185px;"></div>
    <div id="templatedescript" class="descripbtmrow" style="left:185px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template6name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template6date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template6type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template6images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
    </div>
    <div id="templateholder" class="bottomrow" style="left:350px;"></div>
    <div id="templatedescript" class="descripbtmrow" style="left:350px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template7name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template7date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template7type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template7images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
    </div>
    
    <div id="templateholder" class="bottomrow" style="left:515px;"></div>
    <div id="templatedescript" class="descripbtmrow" style="left:515px;"> 
    	<table> 
        	<tr>
            	<td class="descrip">Name</td>
                <td class="answer">template8name</td>
          <tr>   
                <td class="descrip">Added</td>
                <td class="answer">template8date</td>
          </tr>
             <tr>
                <td class="descrip">Type</td>
                <td class="answer">template8type</td>
             </tr>
             <tr>
                <td class="descrip">Images</td>
           		<td class="answer">template8images</td>
            </tr>
        </table>
        <table>
        	<tr>
            	
              <td><span class="P">Preview</span><span class="D">Download</span></td>
          </tr>
        </table>
    </div>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */
body{
	margin:0px;
}

#nav{
	position:relative;
	height:35px;
	background-color:#3d3d66;
	width:405px;
	left:55%;
	top:65px;
	
}	
#nav li{
	display:inline;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	margin-right:10px;
}
#nav ul{
	margin-top:0px;
	padding-top:8px;
}
#header{
	height:100px;
	background-color:#333333;
	background-image: url(../images/jpegs/header.jpg);
	background-repeat:repeat-x;
}
#content{
	position:relative;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	height:500px;
	width:974px
}
h1#mainheader{
	margin-top:0px;
	padding-bottom:2px;
	border-bottom:dotted;
	border-bottom-width:1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	width:70%;
}
.sideheader{
	position:absolute;
	margin-top:9px;
	top:0px;
	left:75%;
	padding-bottom:2px;
	border-bottom:dotted;
	border-bottom-width:1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	width:25%;
}
h1#latesttemplates{
	position:absolute;
	margin-top:0px;
	padding-top:50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	border-right:dotted;
	border-right-width:1px;
	width:72.7%;
	height:105%;
	top:0;
}
.sidebarlist{
	position:absolute;
	margin-top:9px;
	top:25px;
	left:695px;
}
.sidebarlist li{
	list-style-image:none;
	list-style-type:none;
}
#templateholder{
	position:absolute;
	height:105px;
	width:140px;
	border:solid 1px;
	
}	
.toprow{
	top:100px;
}
.bottomrow{
	top:330px;
}
.descriptoprow{
	top:215px;
}
.descripbtmrow{
	top:445px;
}
#templatedescript{
	position:absolute;
	width:140px;
	height:105px;
} 

#templatedescript table{
	width:140px;
}

.descrip{
	text-align:left;
	font-weight:bold;
	font-size:12px;	
	
}
.answer{
    text-align:right;
	font-size:12px;	
}
.P{
	color:#FF0000;
	text-decoration:underline;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	border-right:1px solid;
	border-right-color:#FF0000;
	margin-left:12%;
	padding-right:5px;
}
.D{
	color:#FF0000;
	text-decoration:underline;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-left:5%
}

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?

Hi to all of you,

I've started this new page just this morning, i have some experience with sitebuilding and css but not much.

the result can be found here

I spent most of my afternoon trying to fix this little error in IE (works fine in FF, opera and netscape). I've tried everything I could find, box model, floating boxes, lots of tricks and hacks but nothing seemed to work (or I implementer everything the wrong way).

The problem seems quite simple, it looks like it has something to do with padding or margin for as long as text appears in the left column things in the right column are shifted a little to the right.

Pleas help me out on this one, thanks in advance,

kind regards, Jef

html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(...)"> <html xmlns="(...)"> 

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="stylesheet,css" />  
<title>Test page.</title> 
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script> 
</head>  

<body>  
<div id="main"> 

<!--- <object type="application/x-shockwave-flash" data="../Graphics/Site/site-banner-top,swf" width="800" height="300"> </object> !--> 
	
<div id="maintop" ></div>  
   	
<div id="mainbody">  		
     <div id="testleft"> 			
          <div id="leftpaneltop"></div> 			
          <div id="leftpanelbody"><p> test</p>  </div> 			
          <div id="leftpanelbottom"></div> 		
     </div>  
		
     <div id="test_right"> 			
          <div id="rightpaneltop"> </div> 			
          <div id="rightpanelbody"> test</div>
           <div id="rightpanelbottom"></div> 		
      </div>          	

</div>  	

<div id="mainbottom"></div>  
</div>   

<script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); //--> </script>
 </body> 
</html>

css:

Code:

@charset "utf-8"; /* CSS Document */  

body{ 	
   background-color:#569753;  	
   padding:0px; 	
   width:800px; 	
   margin-top:0px; 	
   margin-left:10%; 
}  

#main{ 	
   background-image:url(../Graphics/Site/body-bg,png);
   background-repeat:repeat-y; 	
   width:800px; 	
   position: relative; 	
   padding:0px; 
} 

#maintop{ 	
   background-image:url(../Graphics/Site/body-top,png); 	
   width:800px; 	
   height:50px; 	
   position:relative; 	
   margin-top:0px; 
} 

#mainbody{ 	
   background-image:url(../Graphics/Site/body-bg,png); 	
   background-repeat:repeat-y; 	
   position:relative; 	
   width:800px; 	
   margin-top:50px; 
} 

#mainbottom{ 	
   background-image:url(../Graphics/Site/body-bottom,png); 	
   position:relative; 	
   width:800px; 	
   height:50px; 	
   padding:0px;  
} 

#leftpaneltop{ 	
   background-image:url(../Graphics/Site/panel_left_top,png); 
   background-repeat:repeat-x; 	
   background-color:#99cc99; 	
   position:relative; 	
   width:200px; 	
   height:25px; 
} 
#leftpanelbottom{ 	
   text-align:left; 	
   background-image:url(../Graphics/Site/panel_left_bottom,png); 	
   width:200px; 	
   height:21px; 	
   padding:0; 	
   position:relative; 
}

leftpanelbody{ 
   font:Verdana, Geneva, sans-serif; 	
   width:200px; 	
   text-align:left; 	
   text-shadow:#000; 	
   color:#FFF; 	
   margin-top:auto; 	
   position:relative; 
} 

#testleft{ 	
   background-color:#569753; 	
   position:relative; 	
   padding:0; 	
   margin-left:10px; 	
   width:200px; 	
   height:inherit; 
}  

#test_right{ 	
   position:relative; 	
   padding:0px; 	
   margin-left:30%; 	
   margin-top:-200px; 	
   background:#000; 	
   width:508px;
 }
 
#rightpaneltop{ 	
   background-image:url(../Graphics/Site/right_panel_top,png); 	
   background-color:#000; 	
   width:508px; 	
   height:37px; 	
   margin-top:0px; 	
   position:relative; 
}
 
#rightpanelbody{
   background-image:url(../Graphics/Site/right_panel_middle.png); 	
   width:508px; 	
   position:relative; 
} 

#rightpanelbottom{ 
   background-image:url(../Graphics/Site/right_panel_bottom,png); 
   position:relative; 	
   width:508px; 	
   height:25px;  
} 

p{ 	
   font:Verdana, Geneva, sans-serif; 	
   font-size:12px; 	
   font-style:normal; 	
   color:#FFF; 
} 

Hope the above scripts can be viewed easily. I just started using css, and for some reason I can't get this simple template to function in Mozilla Firefox. I don't know how nested divs behave, but it's really frustrating. The problem is that i have two main divs within one encompassing div. The encompassing div is supposed to expand in height based upon the height and/or position of the nested two divs, but it only expands based one of these nested divs. These nested divs have divs inside them too.

This only happened in mozilla firefox. In IE it works. I'm not using floats or anything.

I don't have it up on a site, but if necessary I'll post a pic of the rendering.

Thanks in advance.

I am Having a problem with IE6 and DIV's which use blocks to highlight links. The problem is I want to have different colour links. It seems to work OK in FF but not IE 6.
Code:

.mainmenu a:link { color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #a62a2a; background-position: 180px 0; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:visited { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:active { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; background-color: #f7d4d4; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; display: block; }
.submenu a:link { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-color: #a62a2a; border-bottom-width: 1px;x; }
.submenu a:visted { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom: 1px solid #e8aaaa; }
.submenu a:active { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-width: 1px; border-bottom-color: #a62a2a; }
.submenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #f7d4d4; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; }
.menutop { color: white; font-size: 12px; font-weight: 600; text-decoration: none; background-color: #cc5252; text-align: left; text-indent: 3px; display: block; width: 180px; height: 24px; vertical-align: middle; }

Code:

 <table width="180" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td valign="top" bgcolor="#f7d4d4">
         <div id="mainmenu" class="mainmenu">	
             <div id="menutop" class="menutop">Menu</div>			<a href="#">Products</a>
	<a href="support.html">Support</a>
           <div id="submenu" class="submenu"><a href="#">Customer Login</a></div>
	    <div id="submenu" class="submenu"><a href="#">Phi Login</a></div>
	<a href="#">Services</a>
	<a href="#">Shop</a>
	<a href="#">Contact Us</a>
	<a href="#">Call Comparison</a>
    </div>										
    </td>
    </tr>
 </table>

i have nested tables but table inside is inheriting properties from table outside. i have written classes for both tables in css and i dnt want inside table to inherit. what can i do?

Thanks for taking the time to read my question.

I've been searching the web on how to fix this but haven't got anything yet.

In IE, my nested div (class="BioContent") stays within the parent container (id="BioBox"), but does not in FF. Right now I am using width: 100%; I've tried defining the width in pixels, but if I get it to work in FF, then it isn't wide enough in IE.

Any ideas?

Thanks for your help,


Brad


HTML:
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">
<!-- Created on: 7/21/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<link href="Junk.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="WP.js"></script>
</head>
<body>
<div id="FaderBar">
	<div id="FaderBarWP">Warren Persowich</div>	
	<div><img id="FaderBarImg" src="images/audience.jpg" alt=""></div>
	<div id="FaderBarHC">Humor Consultant</div>
</div>	
<!--<p/>-->
<div id="MainBox">
	<div id="LeftBox">
		<div id="BioBox">
			<div id="Bio0" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[0],0)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[0],0)";>5 Star Rating on bit aired on CBC</div>
			<div id="Bio1" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[1],1)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[1],1)";>Licenced Psychologist</div>		
			<div id="Bio2" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[2],2)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[2],2)";>National Television Debut - Fall of 2006</div>		
			<div id="Bio3" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[3],3)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[3],3)";>XM Satelite Bit</div>		
			<div id="Bio4" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[4],4)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[4],4)";>Instructor of Stand-Up Comedy</div>		
			<div id="Bio5" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[5],5)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[5],5)";>Manitoba Theatre For Young People</div>		
			<div id="Bio6" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[6],6)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[6],6)";>Cancer Survivor</div>		
		</div>	 
		<div id="BioFooter">Move cursor over text to read on...</div>
		<div id="Broadcast">		
		 <!-- begin embedded WindowsMedia file...-->
      			<OBJECT id='mediaPlayer' width="320" height="285" 
      				classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' 
      				codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
      				standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
		      	<param name='fileName' value="http://servername/path/to/media.file">
      			<param name='animationatStart' value='true'>
		      	<param name='transparentatStart' value='true'>
      			<param name='autoStart' value="true">
		      	<param name='showControls' value="true">
      			<param name='loop' value="true">
		      	<EMBED type='application/x-mplayer2'
        			pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
		        	id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1' 
        			bgcolor='darkblue' showcontrols="true" showtracker='-1' 
		        	showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="320" height="285"
        			src="http://servername/path/to/media.file" autostart="true" designtimesp='5311' loop="true">
		      	</EMBED>
      			</OBJECT>
        		<!--<a href="http://servername/path/to/media.file" style='font-size: 85%;' target='_blank'>Launch in external player</a>-->
		</div>
		</div>
	<div id="CenterBox"><img class="HeadShot" src="ColourTest1.JPG" width="122" height="212" alt=""/></div>
	<div id="RightBox"><ul>
		<li class="LB1TOP"><a href="#">Seminars</a></li>
		<li class="LB2"><a href="#">Stand-Up</a></li>
		<li class="LB3"><a href="#">Intro Psych</a></li>
		<li class="LB4"><a href="#">Selected Transcripts</a></li>
		<li class="LB3"><a href="#">Broadcast Archives</a></li>
		<li class="LB2"><a href="#">Links</a></li>
		<li class="LB1"><a href="#">Pricing & Inquiries</a></li>
		<!--<li class="LB4"><a href="#">Link #8</a></li>
		<li class="LB3"><a href="#">Link #9</a></li>
		<li class="LB2"><a href="#">Link #10</a></li>
		<li class="LB1"><a href="#">Link #11</a></li>-->
	</ul></div>	
</div>	
<div id="Signature"><a class="Sig" href="#">Manic Web Designs</a></div>
</body>
</html>

CSS:
Code:

body {
/*background: #E2E2E2;*/
background: #000000;
margin-top: 5px;
}


#MainBox {
/*background-color: #ECF9FF;*/
background-color: #8C8C8C;
margin: 0 auto;
width: 780px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/	  
overflow: hidden;
}

#FaderBar {		
/*background-color: #ECF9FF;*/	 
background-color: #8C8C8C;
margin: 0 auto;
height: 80px;
width: 780px;  
border: 5px double #ffffff;
/*background-image:url('HeaderImg.png');*/
}

#FaderBarWP {
float: left;
height: 40px;
width: 300px;  
margin-left: 15px;
margin-top: 5px;   
font-size: 40px; 
/*background-color: red;*/
}

#FaderBarHC {
float: left;
height: 55px;
width: 430px;
font-size: 25px;
margin-left: 45px;
/*background-color: aqua;*/
}

#FaderBarImg {
float:right;
height: 105px;
width: 199px;

}  

#LeftBox {
width: 340px;
/*height: 500px;*/
float: left;
/*background-color: aqua;*/
}

#CenterBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: red;*/
}

#RightBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: yellow;*/
}

#BioBox {
width: 295px;
height: 250px;
background-color: #F2F2F2;
padding-top: 5px;	
border-color: #dcdcdc;
border-style: solid;
border-width: 2px;	 
float: right;	 
margin: 5px 10px 0px 0px;	
}

.BioContent {
width: 100%;
float: left;  
font-size: 11px; 
margin-bottom: 5px;
border-top: 1px dashed #dcdcdc; 
border-bottom: 1px dashed #dcdcdc;	  
padding: 5px;
}

#BioFooter {
float: right;
width: 100%;
text-align: right;
font-size: 12px;
color: gray;
margin-bottom: 15px;
}

#Broadcast {
height: 300px;
width: 330px;
float: right;
padding: 0px 0px 0px 0px;
}

ul li {
float: right;
height: 20px;
margin-bottom: 25px;
border-color: #dcdcdc;
border-width: 2px;
border-style: solid;
text-align: center;	  
width: 150px; 
background-color: #F2F2F2;
list-style-type: none;
}

.LB1TOP {
margin-right: 30px;
margin-top: 35px;
}

.LB1 {
margin-right: 30px;
}

.LB2 {
margin-right: 25px;
}

.LB3 {
margin-right: 20px;
}

.LB4 {
margin-right: 15px;
}

.LB5 {
margin-right: 10px;
}

.LB6 {
margin-right: 5px;
}

ul li a {
display: block;
}

ul li a:link {
text-decoration: none;
color: black;
}

ul li a:visited {
text-decoration: none;
color: black;
}

ul li a:hover {
background-color: #737373;
color: white;
font-weight: bold;
}

ul li a:active {
text-decoration: none;
}



img.HeadShot {
margin: 125px 0px 0px 50px;
}
  
#Signature {
background-color: #E2E2E2;
margin: 0 auto;
width: 780px;
padding-top: 10px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/	  
overflow: hidden;	 
text-align: right;
}	  

a.ReadOn:link {
text-decoration: none; 
color: black;
}

a.ReadOn:visited {
text-decoration: none;
color: black;
}

a.ReadOn:hover {
text-decoration: none;
color: black;
}

a.ReadOn:active {
text-decoration: underline;
color: black;
}

.Sig {
color: #808080;
font-size: 10px;
} 

a.Sig:link {
text-decoration: none;
}

a.Sig:visited {
text-decoration: none;
}

a.Sig:hover {
text-decoration: overline underline;
}

a.Sig:active {
text-decoration: none;
}

Okay, I have a page on which I want a banner div with a links div underneath it, a left menu bar div, and a content div. I've put them all in a container div. However, on some pages the menu bar is longer than the content and on others the content is longer than the menu bar. I want the menu bar and the content bar to always be equal heights but adjust to the length of content. Here's the gist of the code:
Code:

 #container {
		text-align: left;
		background:#000064;
		margin-left: auto;
		margin-right: auto;
		width: 650;
		height:100%;
		border: 1px solid #e0e0e0;		
		}
	
#banner {
	background: #fff;
	width: 650;
		}

#piclinks  {
	background: rgb(00,00,64);
	padding-top: 10px;
	padding-bottom: 5px;
	width: 650;
		}
#links {
	position: absolute;
	padding-left: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-right: 1px dotted #fff;
	width: 140px;
	font-family: verdana, arial, georgia, sans-serif;
	color: #fff;
	font-size: 8pt;
	background: rgb(00,00,64);
	
	}
	
#content {
		position: relative;
		float: right;
		width: 500;
		font-family: verdana, arial, georgia, sans-serif;
		font-size: 8pt;
		color: #fff;
		padding: 5px;
		}

I've looked at a few resources, including the 'PIE' site, but haven't been able to quite figure it out.
Thanks

So does anyone use div tags only and no tables at all? Not even for tabular data?

Hi,

I've a problem designing with CSS.

This is the html code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="structure-yellow.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main"> 
  
  <div id="headimage">test</div>
  
  <div id="greybar">test</div>
  
</div>
</center>
</body>
</html>

And the attached css file is:
Code:

div#main {
	border: solid #000000 1px;
	padding: 3px;
	width: 780px;
	margin: 0 auto 0 auto;
	}
	
#headimage {	
	vertical-align: middle;
	height: 100px;
	background: #FFFF00;
	}
	
#greybar {	
	position: relative;
	top: 3px;
	background: #CCCCCC;
	}

Since the headimage and the greybar are nested within the main div, the 3px padding of the "main" div should be respected, however it's not.

What I think is happenning is that the 3px padding of the main div is respected for the expected greybar position, and it is not updated after setting the "#greybar" position property on the CSS file.
How can I solve this problem?

I know that I could achieve the same effect adding a 3px white bottom border on the "#headimage" class, but I'm looking for more elegant solution based on block positioning.

Any ideas?

Thanks,

Caste