CSS - A List Apart Hybrid Dropdown Problem

Problem solved.

Hi all-

My first post here, and I'm hoping someone here can help me out.

I'm beginning to build a client site, and I've got an elusive problem with my multiple-tier CSS dropdown menu not vertically spacing its <li> elements correctly in IE7. The problem doesn't seem to happen in IE6, or Mozilla browsers.

This menu began its life as a Project Seven "PopMenu Magic" menu, but I've modified it quite a bit with hand-coding. Other that this small problem in IE7, I'm happy with its look and it's functioning as intended.

What's further complicating my troubleshooting is that the problem only happens on second-level pages of my site, but not on the homepage. All of the pages use the same "included" CSS and navigation code (I'm building the site in ExpressionEngine and am embedding the navigation in a manner similar to a PHP include).

All CSS and xHTML validates, and I'm at wit's end.

Links

NOTE: The blocked "URL" in all of these following links is to be replaced with "falmouth academy dot org" . I guess because I'm new the forum thinks i'm a spammer.

The vertical dropdown menu listings SHOULD be spaced as seen here URL /index.php

The spacing problem reveals itself he
URL /index.php/about/introduction

The code that should be controlling the vertical spacing is found in this css file:
URL /index.php?css=home/stylesheet.v.1212113978

And the specific code segment in that file is:

#p7PMnav li ul li a { /* second tier navigation */
color : #ffffff;
height : 14px;
padding : 4px;
}

I'm not sure, but it appears that in IE7, only the first item in the list is getting the height and padding attributes applied. The color, however, is applied to all elements as it should.

Very puzzling. Hopefully this explanation is clear, but the problem is still as clear as mud. Any help is appreciated - I'm not a CSS guru, and I'm hoping there's something I'm overlooking.

I have dropdown menus completly made of UL lists within UL lists. And i control them with css to show and hide them using :hover.

Example:

div#navDiv li:hover ul {display:block; z-index:11;}


well this works completly fine in Mozilla. But i recently encountered a problem in mozilla. Below the dropdown menu's when I put a <div> and when i add the value overflow:auto; it breaks the menu. The menu still works, but when im hovering over the dropdown UL that goes over this <div> with the scrollbar it will disappear right when i get over the <div> below it.

But the UL dropdown menu will not disappear if i just remove that one css property "overflow:auto"

is there any way to fix this in mozilla? It works fine in IE.

I'm trying to create a css only drop-down menu like the ones in html. Here is my code for trying to do so.
/* setting dealing with selecting particular guest book entries */

Code:

#menuSelectGuestEntries
{
    position: relative;
    margin-top: 10px;
    padding-left: 466px;
}

#menuSelectGuestEntries form
{
   color: #000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 2.12em;
}

#menuSelectGuestEntries .guestBookPages{
   visibility:hidden;
}

#menuSelectGuestEntries .guestBookPages:hover{
   visibility:visible;
}

#selectGuestBookEntries {
   border: solid 1px grey;
   background-color: white;
   padding-right; 5px;
   width: 70px;
   font-size: 13px;
   height: 16px;
   overflow: auto;
}

#menuSelectGuestEntries ul.guestBookPages {
   position: absolute;
   color: black;
   background-color: white;
   font-size: 20px;
   top: 1px;
   left: 517px;   
   list-style-type: none;
   padding-left:0;
   padding-right: 0;
   margin-left: 0;
   width: 66px;
   border: solid 1px grey; 
   border-top: none;
}

ul.guestBookPages a {
  display: block;
  text-decoration: none;
  width: 70px;
  zoom: 1;
}

ul.guestBookPages a:hover {
  background-color: #104E8B;
  font-weight: bold;
  width: 66px;
}
html code
<div id="menuSelectGuestEntries">
		<form action="">
		Page: <a href=""><</a>
	        <span name="selectGuestBookEntries" id="selectGuestBookEntries">
		1 of 212&ensp;<img src="images/dropDownBox.jpg" width="12" height="13"/></span>
		<a href="">></a>
		<ul class="guestBookPages">
			<li><a href="">1 of 212</a></li>
			<li><a href="">2 of 212</a></li>
			<li><a href="">3 of 212</a></li>
		        <li><a href="">4 of 212</a></li>
			<li><a href="">5 of 212</a></li>
		</ul>
                </form>
</div>

What I've tried to do is make the form with id Code:

#menuSelectGuestEntries

relative positioned is it looks like the first option of a drop-down menu. Then what I was hoping for was to have the drop-down list named Code:

#menuSelectGuestEntries

absolutely positioned so when someone hovered over the span with id
Code:

selectGuestBookEntries 

which contains the first entry all the entries in list Code:

guestBookPages

would become visible. I'm trying to avoid the Javascript methods of doing this if possible, not a big fan. Any ideas of code I could use in the above scenario to make the listing in the id Code:

guestBookPages

visible using the hover tag somewhere? Any help greatly appreciated. The visibility option is not working at moment, probably incorrect.

Hello,

I am working on a website and this website got a dropdown menu and this menu works fine!
But when I want to make a submenu in the dropdown, it will not work correctly. The submenu is not placed in a new row, it is placed in the main dropdown menu.

The next picture shows the problem:
"Test" has to be a submenu from "Wie zijn we?", but it is placed just under it.

URL

I have used the next HTML-Code:

Code:

   <!-- Navigation item -->
          <ul>
             <li><a href="#">Almelo Sociaal<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="aswiezijnwe.html"target="iframe">Wie zijn we?</a>
                  <ul><li><a href="aswiezijnwe.html"target="iframe">test?</a></li></ul></li>
                  <li><a href="aswatdoenwe.html"target="iframe">Wat doen we?</a></li>
                  <li><a href="asbestuur.html"target="iframe">Organisatie</a></li>
                  <li><a href="asnieuws.html"target="iframe">Nieuws</a></li>
                  <li><a href="asactiviteiten.html"target="iframe">Activiteiten</a></li>
                  <li><a href="asafspraken.html"target="iframe">Afsprakenlijst</a></li>
                </ul>

And I have used the next CSS-Code:

Code:

/*Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:954px; background:rgb(228,22,34); color:rgb(100,100,100); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none; !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:normal; color: rgb(235,235,235);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(228,22,34); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(175,175,175); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(20,25,231); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/

Can someone help me to fix the submenu in the dropdown menu? I think myself it is a problem in the CSS. Maybe something has to be added there, but I don't know what

Hello everyone!

I would like to integrate a very simple purely css-based dropdown menu into my website. My knowledge of css is very basic, so I adapted a free sample menu, boiled it down (mostly through trial and error) to my very specific idea of what it should look like and finally ran into a problem which I could not solve myself so far. The following code represents "my" current code, with placeholder colors, text, links etc.:

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<style type="text/css">

/* background */
body {
	background-color: #252525;}

/* targeted dropdown button style */
.dd-select {font: 10.5px Verdana; text-transform: uppercase;}
.dd-select a:link {color: #ff0000; text-decoration: none;}
.dd-select a:hover {color: #ffea00;}

/* positioning */
ul.Menu ul{display:none}
ul.Menu li:hover>ul{display:block}
ul.Menu ul{position: absolute; left:-1px; top:98%;}
ul.Menu li:hover{position:relative;}

/* shrink to fit */
ul.Menu {
	float: left;}

/* dropdown button */
ul.Menu {
	margin:0px;
	list-style:none;
	padding:0px;}
	
/* menu case */
ul.Menu ul {
	margin:0px;
	list-style:none;
	padding:0px;
	background-color:#5c5c5c;
	border-color:#a3a3a3;
	border-width:1px;
	border-style:solid;}

/* menu element padding */
ul.Menu li{
	margin:5px 5px 5px 5px;}

/* menu element */
ul.Menu a {
	display:block;
	background-color:#454545;
	text-align:left;
	padding:4px 9px 5px 9px;
	font:normal 11.5px Verdana;
	color: #f7f7f7;
	text-decoration:none;}

/* menu hover */
ul.Menu li:hover>a{
	background-color:#333333;
	color: #00ff60;}
	
</style>
</head>

<body>

<ul class="Menu">
	<li><a href="#" target="_top">Select</a>
	<ul>
		<li><a href="#" target="_top">Option&nbsp;1</a></li>
		<li><a href="#" target="_top">Option&nbsp;2</a></li>
		<li><a href="#" target="_top">Option&nbsp;3</a></li>
	</ul>
	</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="dd-select"><a href="#">Select (as it should look)</a></p>

</body>
</html>

Now my problem is, I would like the dropdown menu's trigger button (labeled "Select") to look like the text link beneath (styled through .dd-select) instead of having it look like the the rest of the actual dropdown menu. So, different font size, decoration, colours, hover effect and, most importantly, no background color. The dropdown menu should of course keep its original look.

Could anyone please give me a hint on how to accomplish this (perhaps with a code example or two) in an elegant way or maybe even refine my code to make it work? That would help me out a lot and I would like to thank everyone for reading and trying to help!

Kind regards,
Jakob

Hi there,

While this menu works in IE and FF, there's still a little problem with it working perfectly in FF. Basically, it's when you want to mouse over and get the second dropdown option...it only shows part of the button. I'm almost positive this has to do with it not "escaping" the container I have set for the whole design, as the menu option stops right at the border/width of the parent container.

For instance, if you go here (with FireFox), and then select from the right side menu:

Homes for Sale > Fort Collins, CO > Homestead

You'll notice that it only says "Homest" when you want to view the second dropdown option. I need it to show the whole name. I tried setting the z-index higher for these particular classes, but no dice. Is there something I'm missing?

Here's the code:

Code:

/* Sidebar / Menu */

#sidebar {
	float: left;
	top: 16px;
	left: 2px;
	display: block;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#FFFFFF;
	letter-spacing: 1px;
	text-align:right;
	z-index: 3;
}

#sidebar ul {
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 4;
}

#sidebar li {
	display: block;
	float: left;
	min-height: 20px;
	position: relative;
	text-align: left;
	padding: 5px 20px 4px 16px;
	margin: 0px 0px 0px 0px;
}

#sidebar h2 {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
}

#sidebar li ul {
	width: 150px;
	height: auto;
	top: 100%;
	left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
}

#sidebar li.LargeMenu ul {
	width: 200px;
	height: auto;
	top: 100%;
	left: 0px;
}

#sidebar li ul li {
	text-align: left;
	width: 118px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar li.LargeMenu ul li {
	text-align: left;
	width: 198px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar a {
	text-decoration: none;
	letter-spacing: 1px;
	}

#sidebar li li ul {
	top: 0;
	left: 0;
}

#sidebar li li:hover ul {
	left: 150px;
}

/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
	position: absolute;
	display:none;
}

/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
 	 display: block;
}

#sidebar #PhpWebcontent {
	display:none;
}	

/* define the consecutive colors */

#sidebar {
	color: #FFFFFF;
}

#sidebar ul{
	-moz-opacity: 1; /* for mozilla */
	opacity: 1; /* for safari */
	khtml-opacity: 1/* for konquerer and older safari */
}

#feeds li {
  background: url(images/feed.png) top left no-repeat;
  padding-left: 18px;
}

#sidebar h2 {
	color: #FFFFFF;
}

#sidebar a {
	color: #ffffff;
	letter-spacing: 1px;
	}

#sidebar ul li:hover {
	background: #333333;
	z-index: 900;
}

#sidebar ul li ul {
}

#sidebar ul li ul li {
	background: #333333;
}

#sidebar ul li ul li:hover {
	background: #666666;
}

#sidebar ul li ul ul li{
	background: #666666;
	
}

#sidebar ul li ul ul li:hover {
	background: #999999;
}
/* End Sidebar / Menu */

Thanks in advance.

Hi

I am using suckerfish drop down menu without problem on my local server, however, on the remote server them menu won't work when jscript is turned off (when viewed on IE). Do you have any idea why this might be? has anyone had this problem before? (here is the url: (URL address blocked: See forum rules))

thanks a lot

Okay, I have played and stared at this problem/code for a few days now actually. Nothing is slapping me in the face and pointing to a problem, I seriously see nothing that could cause this. www.carbenco.com is the website, and if you look at the navigation, it sticks out the side.. the hover messes up, it almost seems as if the links are fine, then on hover its 5 pixels off or something. The reference for exactly how I want the nav to look is he www.carbenco.com/sample5.jpg I will put the index and css, incase the error is found somewhere in either.

Thanks in advance!




index
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">
<head>
<title>Carbenco - Personal Portfolio</title>

<link href="stylesheet.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>

<div id="container">
<div id="white"></div>
<div id="content">
<div id="left"><img src="top.jpg" alt="top.jpg" />
Content waaaaaa</div>
<div id="right"><img src="clients.jpg" alt="clients.jpg" />
<div id="navi">
<ul>
<li><a href="">Uniquely Yours</a></li>
<li><a href="">Uniquely Yours</a></li>
<li><a href="">Uniquely Yours</a></li>
<li><a href="">Uniquely Yours</a></li>
</ul>
</div>
</div>
</div>
<div id="bottom"><img src="logo.jpg" alt="logo.jpg" /><div id="botright">
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://carbenco.com/stylesheet.css"><img src="css.jpg" alt="css.jpg" /></a>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fcarbenco.com%2F"><img src="xhtml.jpg" alt="xhtml.jpg" /></a>&nbsp; &nbsp;
<br />
<img src="copy.jpg" alt="copy.jpg" />
</div></div>
</div>

</body>
</html>

stylesheet
Code:

body {
	margin: 0px;
	padding: 0px;
	text-align:center;
	background-image: url(bg.jpg);
 	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#container {
position: relative; top: 50px;
margin-left: auto;
margin-right: auto;
text-align:left;
width: 524px;
height: 718px;
}

#white {
position: absolute;
left: 29px;
top: 0px;
width: 234px;
height: 12px;
background-color: #ffffff;
}

#content {
position: absolute;
left: 0px;
top: 12px;
width: 718px;
height: 416px;
background-image: url(back.jpg);
}

#left {
position: absolute;
left: 0px;
top: 0px;
width: 566px;
height: 416px;
}

#right {
position: absolute;
left: 565px;
top: 6px;
width: 152px;
height: 410px;
background-color: #ffffff;
border-left: solid #bdd180 1px;
}

#bottom {
position: absolute;
left: 0px;
top: 428px;
width: 718px;
height: 96px;
background-image: url(back2.jpg);
}

#botright {
position: absolute; right: 0px; bottom: 0px;
text-align: right;
}

#navi {
letter-spacing: 3px;
position: relative;
left: 0px; top: 0px;
width: 151px;
}

#navi ul {
	width: 151px;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
	}

#navi li a {
	width: 151px;
		display: block;
		padding: 0px;
		background-color: #ffffff;
		color: #000;
		text-decoration: none;
		width: 100%;
		}

#navi li a:hover {
	width: 151px;
		display: block;
		padding: 0px;
		background-color: #bdd180;
		color: #000;
		text-decoration: none;
		width: 100%;
		}


#bottom img {
border: 0px;
}

ps: everything is validated, you can check the links on the actual site on bottom right for the validation of everything.

I am having a problem displaying this vertical list in IE6.

Here is the HTML:
Code:

    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Dashboard Quick Link</a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Artifacts</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

The list is in a div called menu which is at the top of a div called sidebar.

Here is the CSS:
Code:

#sidebar {
	margin:0px;
	padding:0px;
	width:220px;
	float:left;
	background:url(_images/team/bg_nav.jpg) repeat-y left;
	position:relative;
}
#sidebar #menu {
	margin:0px;
	padding:0px;
	border:solid 1px #000;
}
#sidebar #menu ul {
	margin:0px;
	padding:0px;
	list-style:none;
}
#sidebar #menu li a:link, #sidebar #menu li a:visited {
	display:block;
	margin:0px;
	background:#2175BC;
	border-left:#1958B7;
	border-bottom:#90BADE;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	padding:5px 0px 5px 10px;
}
#sidebar #menu li a:hover, #sidebar #menu li a:active {
	background:#205268;
	border-left:#1C64D1;
}

I cannot see the background color for the links in IE6. There are also vertical spacing issues and although I've read up on Holly's Hack, I don't really understand how to implement it.
Any help would be greatly appreciated.

Thanks a lot,
Brian

Hello,
I created a form which is built mostly with ordered lists:
http://www.27lamps.com/public/Beta.htm

I am having a few problems. All of them inside a DIV to which I am applying the class "ListBox"

1. ListBox is not being applied to the child tags of that DIV, i.e., OL and LI. They have the styles defined by parent class.
How can I solve this?

2. My second problem is how to clear floats on my ol.
I applied the overflow approach to my OL tag but this does not seem to work.
Note that I am trying to display 3 LI per row simulating a table.

Could someone, please, help me out?
And I am open to any suggestion which might improve my CSS on this form.
I have been working on this for quite a while but I know I can still improve it.

Thank You,
Miguel

I am trying to use ul list to organize my images.

Here is how it should look like.

IMAGE IMAGE IMAGE
text text text

But instead, I get

IMAGEtext IMAGEtext IMAGEtext

Code:

<style>
/**************************************************************
   Thumbnail Lists
 **************************************************************/

ul.thumbs,
ul.thumbs li {
  margin: 0;
  padding: 0;
}

ul.thumbs li {
  margin: 0 0 15px 0 !important;
  margin: 0;
  padding: 0px;
  list-style: none;
}

ul.thumbs li.pagination {
  margin: 10px;
  padding: 0px;
  list-style: none;
  display:block;
}

a.thumb img {
  border: 5px solid #ccc;
}

a:hover.thumb img {
  background: #8EB4C6;
  border: 5px solid #000;
}

a:hover.thumb {
  background: none;
}

a.thumb span {
  width: 100%;
  display: block;
  margin-top: -5px !important;
  margin-top: -2px;
}
</style>

      <ul class="thumbs">

        <li>
        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/8P5B7K8M_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=13" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li>

        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/7K4V6F7H_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=12" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li>
        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/0C7O9X0A_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=11" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li>
        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/1Q8B0L1N_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=10" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li class="pagination">1.&nbsp;</li>

	</ul>

I dont get what is my list styles for the footer content section. listed items dont appear listed and I could not vertically center the div.

Footer content section is right above the copyright notice.
http://www.aslanyurek.com/rtt/


Code:

/* content footer.css */

#fcontent{
	height:80px;
	width:790px;
	background-color:#999999;
}
#fcontent .help{
	float: left;
  	height: 60px;
  	width: 300px;
	vertical-align:middle;
	background-color:#FFFFCC;
}
#fcontent .catalog{
	float: left;
  	height: 60px;
  	width: 300px;
	vertical-align:middle;
	margin-left:10px;
	background-color:#F0FFCC;
}
#fcontent li {
	float:left;
	list-style-type:square inside;
	margin-left:25px;
}
#fcontent li a {
	display:block;
}

I have put together a page with a left floating text box that text wraps around the top, right and bottom. It was going pretty well, thanks to some help I have already received, but I am having a problem with a bulleted list alignment. Please take a look at the test page below.

TEST PAGE

The relevant style code follows:

Code:

.textboxleft 
{
	background: #3E5C92;
	font: normal 0.8em/140% arial, helvetica, sans-serif;
	margin: 10px;
	width: 160px;
	border: 1px solid #E4E7F5;
	float: left;
	overflow: hidden;
	padding: 0.5em;
}
.textboxleft p
{
	color: #000000;
}
ul li
{
	color: #E0E0F6;
	font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}

Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information.

If there is something I can alter in the CSS or HTML to prevent the list bullets from bumping into the text box, please let me know. I am very new at this and have only gotten this far with the help of people like you.

Thank you,

Grump
PS: you will also notice another thread concerning the width of the text box. It does not render at 160px in Firefox, but does in IE.