CSS - Window Resize Breaks Vertical Menu

Can it be done with just CSS? I have a table of data where the text in the data cells wraps and fills the td cell with several lines of text. This is OK when the browser window is a "normal" size, but if someone is viewing with a widescreen monitor I would like the table to get wider and make the cell contents not wrap the text. Or if they are viewing with a small monitor I want it to wrap even more (table would get smaller). Can this be done with CSS, or do I need to do something with javascript?

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

When I resize the browser window on this page, the text "onclick" and the Cart and Search text stay in one place while the other text and background move. Why is this happening, I need everything to move together.

This only seems to be happening IE, FF and Chrome seem fine.



http://makethemoviehappen.com/darix.html

Can anyone give me a hint as to why the CSS drop-down menu on this page breaks in IE7: http://www.mediamogulsweb.com/

I've looked at it for while and I'm not getting anywhere. Thanks.

Hi,

This is the page i constructed using CSS.
http://81.137.250.65/champs/main.html

As you can see at the top of the page, when you hover links eg "about" , "booking" a drop down menu appears.
This drop down menu calls a Javascript file which is using a stylesheet. "Style.css" for the formatting of the drop down menu.

My colleague gave me some ASP.net code for the login form, as in the sample URL above the login form is not functional.
As soon as i enter the asp.net code, all the formatting for the Drop Down menu breaks completely. The positioning, coloring etc is all lost. The menu appears at the bottom of the page, and the hyperlinks are all displayed as tradional blue underlined links.
The page itself still appears fine, and doesnt seem to break.
So the asp.net code is not affecting the css in the page itself, but the drop down menu

I dont know if this is a asp.net problem or a CSS problem. My guess is that its the way the CSS for the drop down menu i setup?

Ive only been doing CSS for about 6 weeks, so you will notice the code is not the neatest. I am open to constructive criticism.

If anyone can help with this issue, i would appreciate it.

Thank you

eemo

I am a bit of a loss as to why the menu on this page http://www.laurieannre.com/welcome.asp looks great on IE but not in other browsers. If it is not too much trouble and someone can be of some assistance I'd appreciate it. Tom

Here is the basic structure i'm working with:

Quote:
<div id="header'> header goes here </div>
<br clear="all">
<div id="leftbar">dynamically generated content from php here</div>
<div id="map"> map here </div>





the styles:

Quote:
#header{
height:42px;
width:100%;
background-image: url(../images/header/header_spacer.jpg);
background-repeat:repeat-x;
text-align:right;
}

div.leftbar{
float:left;
width: 400px;
height:100%;
overflow: scroll;
z-index:1;
}

div.map{
float:left;
}




The Problem: In all browsers the height of the leftbar is : 100% of the entire page as opposed to 100% of the entire page minus the size of the header element. This causes a scroll bar to appear on the page.

Any ideas on how to solve this problem? If I don't define a height of 100% the leftbar div doesn't scroll at all.

A good example of what i'm trying to accomplish here is : maps.google.com . Notice how on that site, the left menu bar scrolls, but is always 100% of the remaining page length (after the search stuff on top).

thanks in advance.

I've got a bit of a problem, in that I'm trying to design a website with a fixed header and lefthand navigation. The buttons I have on the left nav div are entirely image-driven, no text at all. I know that the people who will generally access this website have differing screen resolutions, so I'm also trying to design something that will allow the content to scroll on a lower res monitor while keeping the header and navigation fixed.

The problem I run into is keeping the navigation buttons within an acceptable size so that you don't lose some of them off the bottom of the page (remember, it's on a fixed div) on low res monitors. So far that's been okay - the navigation looks fine and all buttons are visible on an 800x600 display (the lowest res I anticipate viewing).

However, when I resize the text within the browser, for some reason my navigation menu drops down... more for each resize.

To view what I'm talking about, please go he http://www.justusvizslas.com/CrossTies/index.php
and resize the text (Ctrl++ in Firefox).

With no text contained in the navigation menu, I'm having a hard time understanding why the menu drops down at all upon a text resize. Anyone have a solution, or at least be able to pinpoint within the source where my problem exists?

Thanks...

If you look at
Lakelandedc.com you notice the menu is very weird when trying to go from each link to the other links... how can i fix the menu so it is easier to navigate?

Code:

 /* CSS Document */

#menu
{
text-align:left;
width:155px;
background-color:#084D9C;
margin:0;
padding:0;
}

#menu ul
{
list-style:none;
margin:0;
padding:0;
}

#menu a, #menu h2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display:block;
border-width:1px;
border-style:solid;
border-top:solid 2px;
border-color:#ccc #888 #555 #bbb;
margin:0;
padding:2px 3px;
}

#menu h2
{
color:#fff;
background:#BA5D92;
text-transform:uppercase;
}

#menu a
{
color:#FFF;

text-decoration:none;
}

#menu ul a:hover
{
color:#fff;
background-color:#091F51;
text-decoration:none;
}


#menu ul
{
position:relative;

}


#menu ul ul 
{
position:relative;
top:0;
left:10%;
width:100%;
}

s#menu a:hover {
}

.submenu 
{
background-color:#9A1F61;
color:#fff;
}

div#menu ul ul,
div#menu ul ul li:hover ul ul
{
display:none;
}



div#menu ul:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

I have a vertical menu with a sub menu. To clarify the sub menu, there is a red vertical bar. It has a problem with IE 7 - when hovering over the links, the bar goes away and comes back. This is pretty hard to explain, so here is one of the webpages with this problem: http://030c1db.netsolvps.com/business-solutions.php (we are using a temp hosting server until it is finished - thus the odd domain name). If you look on the left, under the "In this section" you will see the vertical red bar. (the problem is only in IE7). Here is my css and code:
CSS:
Code:

.redbar {
	background-image: url(/images/NavSubBar.jpg);
	background-repeat: repeat-y;
	background-position: 26px;
}
#wrapper #container #content #content_inner #leftnav_i ul #leftnav_i_sub a {
	background:none;
	display: block;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 11px;
	margin-left:25px;
	margin-top:-6px;	
}	

Code:

<ul>
<div class="redbar">
<!--........Main Links......  --> 
<li div id="leftnav_i_sub"><a href="#">Main Menu 1</a></li>
<li div id="leftnav_i_sub"><a href="#">Main Menu 2</a></li>
</div>
</ul>
 <div class="clear"></div>
<!--........Sub links......  --> 
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<!--........Main Links Continued......  --> 
<li div id="leftnav_i_sub"><a href="#">Main Menu 3</a></li>
<li div id="leftnav_i_sub"><a href="#">Main Menu 4</a></li>
</ul>

Hi... I have a big problem with FireFox, and especially Safari...

http://www.laventanaband.com/Music%20Samples.htm

When you roll over a pop out menu item (like "music and pics") these problems occur:

In FireFox... if you roll past the edge of the frame, the menu item disappears.

In Safari... the pop up menu section disappears below the content menu (!).

I this doesn't happen on the main page because the content area does not use overflow:auto; .... it uses overflow:hidden;

Somehow the use of that cause those problems...

Here is my css doc.

Any ideas?

Thanks in advance!

Regards,
-Max Dykstra

I've followed a tutorial before in a book called Stylin' with CSS to create a CSS based horizontal drop down menu. Although not in the book, the code to create the equivalent vertical version was supplied. I've altered it to make it more like my horizontal version and it works in Firefox perfectly. In IE 7 and 6 however it does not.

On the second level, a transparent 'top padding' appears, but it's not padding, or a margin.

The code for the whole page is: (by the way this is my first post so I'm sorry if I used the wrong tool!)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {font:1em verdana, arial, sans-serif; behavior:url(csshover.htc);}

* {margin:0; padding:0;}

div#listmenu {float:left; font-size:.8em; background: #777; margin:20px;}

div#listmenu ul {margin:0; width:10em;}

div#listmenu ul li {position:relative; list-style-type:none; background: #AAA; border:1px solid #333; border-

top:none; font-weight:bold;}

div#listmenu ul li:first-child {border-top:1px solid #333;}

div#listmenu ul li:hover {background: #555;}

div#listmenu a {display:block; padding-left:6px; text-decoration:none; color:#666;}

div#listmenu a:hover {color:#EEE;}

* html div#listmenu ul {float:left; border-top:1px solid #333;}

div#listmenu ul li ul {margin:0 0 0 10em; position:absolute; width:13em; left:-2px; display:none; top:-1px;}

div#listmenu ul li ul li {width:100%; border:1px solid #333; border-top:none; background:#BBB; font-weight:normal;}

div#listmenu ul li ul li:first-child {border-top:1px solid #333;}

div#listmenu ul li ul li:hover {background:#999;}

div#listmenu ul li:hover ul, div#listmenu ul li ul:hover {display:block;}

div#listmenu ul li ul li ul {visibility:hidden; top:-1px; left:3em;}

div#listmenu ul li ul li:hover ul {visibility:visible;}
</style>
</head>
<body>
<div id="listmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">What's On</a></li>
<li><a href="#">The DYJA</a>
	<ul>
	<li><a href="#">About DYJA</a></li>
	<li><a href="#">The Jazz Centre</a></li>
	<li><a href="#">The Ensembles</a>
		<ul>
		<li><a href="#">Youth Stageband</a></li>
		<li><a href="#">Youth Swing Orchestra</a></li>
		<li><a href="#">Youth Jazz Orchestra</a></li>
		<li><a href="#">Jazz Orchestra</a></li>
		</ul>
	</li>
	</ul>
</li>
<li><a href="#">Exchanges</a>
	<ul>
	<li><a href="#">Herten (Germany)</a></li>
	<li><a href="#">Limonest (France)</a></li>
	</ul>
</li>
<li><a href="#">Recordings</a>
	<ul>
	<li><a href="#">Discography</a></li>
	<li><a href="#">Ordering Information</a></li>
	</ul>
</li>
</ul>
</div>
</body>
</html>

I can't understand why the code works in Firefox, but then the spaces appear in IE. I've uploaded it to my site as well at http://www.wattersisere.co.uk/devshed_vertical.html

Thanks in advance for any help.

html code:

Code:

<div id="sidebar">
	<h2>South Winds Park Info</h2>
		<ul>
			<li><a href="park-info/contact-info" title="Contact Info">Contact Info</a></li>
			<li><a href="park-info/homes-for-rent" title="Homes for Rent">Homes for Rent</a></li>
			<li><a href="park-info/homes-for-sale" title="Homes for Sale">Homes for Sale</a></li>
			<li><a href="park-info/office-services" title="Office & Services">Office & Services</a></li>
			<li><a href="park-info/meet-the-staff" title="Meet the Staff">Meet the Staff</a></li>
		</ul>
		
	<h2>South Winds Resources</h2>
		<ul>
			<li><a href="calendar" title="Calendar">Calendar</a></li>
			<li><a href="resources/forms-and-documents" title="Forms and Documents">Forms and Documents</a>
				<ul>
					<li><a href="resources/forms-and-documents/by-laws" title="By Laws">By Laws</a></li>
					<li><a href="resources/forms-and-documents/prospectus" title="Prospectus">Prospectus</a></li>
					<li><a href="resources/forms-and-documents/rules-regulations" title="Rules & Regulations">Rules & Regulations</a></li>
				</ul>
			</li>
			<li><a href="resources/special-events" title="Special Events">Special Events</a></li>
			<li><a href="resources/maintenance" title="Maintenance">Maintenance</a>
				<ul>
					<li><a href="resources/maintenance/fees" title="Fees">Fees</a></li>
					<li><a href="resources/maintenance/trash" title="Trash">Trash</a></li>
				</ul>
			</li>
			<li><a href="resources/faq" title="FAQ">FAQ</a></li>
		</ul>
</div>

CSS Code:

Code:

#sidebar ul{
	margin:10px 0 30px 0; padding: 0;
	text-align:right;
}
#sidebar li a, #nav li {
	display:block;
}
#sidebar li {
 list-style: none;
 position: relative;
}
#sidebar li a {
 padding: 1em 2em;
 text-decoration: none;
 color: white;
	background:url(images/design/listBottomLine.png) bottom right no-repeat;
}
#sidebar li a:hover {
 background: #2a0d65;
 background: -moz-linear-gradient(top, #11032e, #2a0d65);
 background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

/* Submenu */
.hasChildren {
	position: absolute;
	width: 5px; height: 5px;
	background: black;
	right : 0;
	bottom: 0;
}
#sidebar li ul {
 display: none;
 position: absolute;
 left: 100%;
 top: 0px;
 padding: 0; margin: 0;
 z-index:100;
}
#sidebar li:hover > ul {
 display: block;
}
#sidebar li ul li, #nav li ul li a {
 float: none;
  z-index:1000;
}
#sidebar li ul li {
 _display: inline; /* for IE6 */
}
#sidebar li ul li a {
 width: 150px;
 display: block;
	background-color:#2c9091;
	
}

This is a vertical menu (in the sidebar of a wordpress site). It works everywhere, except IE7. I have jquery that overcomes the hover issue for IE (I know it works because I got it from http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

I have searched the internet for a solution:

using csshover.htc (doesn't work)

The one issue I think it might be is because I'm using an ancher tag, but using hover on the li element. (the ancher is child of li) I have read tutorials on this, so my anchor is display block, it has the width and height fixed.

The other is I'm using z-index to pull the elements in front. I don't know if IE7 has issues with z-index.

I'm sorry I cannot show a working (broken) example, it's a wordpress site on my local machine. I even used the exact css code from the tutorial linked above (slightly modified to be vertical not horizontal) which he says it works in every browser.

What else could it be? Since the code should work. What else around this menu could be my problem?

Thank you so much for your help (ready to pull my hair out)

Long time reader, first time poster.

I have an issue with a css vertical menu I've made but first things first. My target browser is IE7, this is a corporate intranet so I have some control over this. However, we do run alot of pcs with Firefox but, of course, the problem doesn't exist with this browser.

Here's the issue:
The div#leftbox contains the menu but when the list elements extend into the center div (div#middlebox) you can see the anchors and finger them but if you try to move to the next list item the submenu disapears? It's like it recognizes the display: block on the list element but not on the anchor?

Another weird thing is that if I extend the div#leftbox width to accommodate the size of the menu and the submenu it works fine but only if i have a background-color applied to the #leftbox. If I leave it transparent it behaves as before.

Here's the markup and css...

index.asp
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)"> 
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
	<title>Intranet</title>

	<link href="/styles/<%Response.Write(Session("session_theme"))%>/screen.css" type="text/css" media="screen" rel="stylesheet" />
	<link href="/styles/print.css" type="text/css" media="print" rel="stylesheet" />
	<style type="text/css">@import url(/styles/<%Response.Write(Session("session_theme"))%>/calendar-win2k-1.css);</style>
   <script type="text/javascript" src="/calendar/calendar.js"></script>
	<script type="text/javascript" src="/calendar/lang/calendar-en.js"></script>
	<script type="text/javascript" src="/calendar/calendar-setup.js"></script>
	<link rel="SHORTCUT ICON" href="/favicon.ico" />
</head>

<body>


<div id="topbar">
	<!--#include virtual="/inc/toolbar.asp" -->
</div>

<div id="leftbox">
	<!--#include virtual="/inc/menu.asp" -->
</div>

<div id="rightbox">
	<!--#include virtual="/inc/rightbox.asp" -->	
</div>

<div id="middlebox">
<h1>&nbsp;Welcome to the IntraNET</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac pede. Cras tristique, ipsum in scelerisque lobortis, diam nisl lobortis ipsum, eu ultricies orci justo a purus. Integer pellentesque, dui ut ullamcorper pellentesque, diam sapien venenatis augue, id rutrum lorem nibh non ligula. Nullam mattis. Donec eget pede. Donec blandit rhoncus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis cursus augue. Maecenas elit. Nullam viverra justo sed mi. Cras porta tellus non justo. Fusce adipiscing molestie elit. Nullam vulputate felis sed mi. Curabitur velit sem, bibendum ut, tempus sed, sodales vitae, libero. Aliquam nisl. Pellentesque tellus dolor, elementum sed, semper suscipit, pretium vitae, mauris. Vivamus sem.
</p>
</div>


</body>
</html>

Here's the menu.asp include...
Code:

		 <ul id="nav">
	      <li><a href='/departments/reports/index.asp'>Reports</a>
	      	<ul>
	          <li><a href=''>EOD<span>End of Day Reports</span></a></li>
	          <li><a href=''>EOM<span>End of Month</span></a></li>
	          <li><a href=''>On Demand Reports<span>Reports sent to the web queue</span></a></li>
	          <li><a href=''>Office Reports<span>A collection of front office and customer service reports</span></a></li>
	          <li><a href=''>Warehouse Reports<span>A collection reports for warehouse operations</span></a></li>
	          <li><a href=''>Merchandising Reports<span>EIS and vendor reports for merchandising</span></a></li>
	          <li><a href=''>Accounting Reports<span>A collection of account reports</span></a></li>
	         </ul>
	      </li>		
		  <li>
		  	<a href='/index.asp'>Home</a>
		  </li>
		</ul>

and here's the css

Code:

body {background: #fff;	font-size: 62.5%;	color: #033; font-family: Verdana, Arial, san-serif;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
p { font-size: 1.2em; line-height: 1.5em; }

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

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #006;
	background: #ccc;
	padding: 5px;
	border: 1px solid #006;
	border-bottom: 0;
	}

ul li a:hover { color: #600; background: #fff; display: block;} /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

/* Begin Tool Tip Span */
		 
span {
display: none;
}
				
a:hover span {
z-index: 1;
position: absolute;
top: 1px;
left: 200px;
width: 220px;
display: block;
background: #fff;
border: 2px solid #006;
padding: 10px 10px 10px 5px;
		  }

/* End Tool Tip Span */

/*******************************************************************************
                       Positioning rules
*******************************************************************************/

div#leftbox {
position: absolute;
left: 10px;
width: 150px;
color: #333;
padding-top: 10px;
background-color: #fff;
z-index: 1;}

#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
padding: 10px;
background-color: #efefef;
}

div#rightbox {
position: absolute;
right: 25px;
width: 30%;
color: #666;
padding-top: 10px;
background-color: transparent;}


div#topbar	{
margin: 0;
padding: 0;
width: 100%;
background-image: url('/images/default-topbar-bg.jpg');
background-repeat: repeat-x;
}


div#search	{
color: #ffc;
font-size: 1.1em;
letter-spacing: .75em;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
left: 20px;
word-spacing: 1em;
}

Your help and advice is most welcome and appreciated.
Mark