CSS - Column Background Problem

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh

I posted this query over at webdeveloper.com but nobody has offered any working suggestions for a solution, apologies to those who read it there as well.

Basically I have a 2 column layout with a header div containing a floated tabbed navigation bar.

The page.

The css.

As you can see the big red background on my right hand column goes all the way to the top of the page rather than staying below the tab bar.

How can I get it to stay beneath the header and not start after the content ie. not clear it to the bottom?

I'm working on site with some main containers and a 3-column content area inside the containers. The middle column on IE win is getting bumped down below the left column when it should be aligned to top. I'm kind of a novice so I have no idea what's going on. Can anybody help?

Here are my files:

http://www.artesiandesigngroup.com/westcoastpipe/grid.html
http://www.artesiandesigngroup.com/westcoastpipe/includes/main.css

Code:

body {
  font-family: Arial, Helvetica, sans-serif;
      background-color: #fff;
 text-align: center;
     margin: 0; padding: 0; }
/*** outside wrapper including fading background ***/
#container {
       position: relative;
     margin: auto;
   text-align: center;
     width: 840px;
   background: url(../images/layout/bg_page.gif) repeat-y center top; }

/*** actual container ***/
#pagesize {
       margin: auto;
   text-align: center;
     width: 800px;
   background-color: #9B9EA0;
      border: 1px solid #fff;
 border-bottom: none; }

/***  row 1 - top  ***/
#header {
  background-image: url(../images/layout/header.jpg);
     background-repeat: no-repeat;
   background-position: center top;
        margin: 0;
      padding: 0;
     width: 800px;
   height: 252px;
  border-bottom: 1px solid #fff; }
        
/***  Nav inside header  ***/
#topnav {
  position: relative;
     top: 150px;
     width: 800px;
   height: 102px;
  margin: 0;      padding: 0;
     background-color: #005195;
      color: #fff;
    font-size: .7em;
         }
#topnav ul {
  margin: 0; padding: 0; }
#topnav li {
    text-transform: uppercase;
      display: inline;
        list-style-type: none;
  margin: 0;      padding: 2px 4px;
       vertical-align: middle;
 border-right: 1px solid #fff; }

/***  row 2 - middle  ***/
#content {
     background: url(../images/layout/bg_content.gif) repeat-y center top;
   background:color: #fff;
 border: 1px solid #fff;
 border-bottom: none;
    margin: 30px 30px 0 30px;
       padding: 0;
     text-align: left; }

/***  column 1 - left  ***/
#sidebarphotos {
  float: left;
    margin: 0; padding: 0;
  width: 161px;
   font-size: .8em; }

/***  column 3 - right  ***/
#sidenav {
        margin: 0; padding: 0;
  float: right;
   width: 170px;
   background-color: #555;
 font-size: .8em;
        color: #ddd; }

/***  column 2 - center  ***/
#textarea {
  width: 395px;
   margin: 0; padding: 0;
  margin-right: 170px;
    margin-left: 169px;
     background-color: #fff;
 font-size: .9em;
        vertical-align: top; }

/***  header for textarea  ***/
#contentheader {
   margin: 0;
      padding: 4px 8px;
       vertical-align: middle;
 background: #dff url(../images/layout/bg_contentheader.jpg) repeat-y left top;
  font-size: 1em;
 font-style: normal;
     font-weight: normal;
    text-transform: uppercase;
      color: #005195;
 line-height: 1em;
       border-bottom: 1px solid #555;
}

/***  row 3 - bottom  ***/
#footer {
      width: 800px;
   margin: 0;
      padding: 2px 0;
 background-color: #005195;
      font-size: .6em;
        color: #fff;
    border-top: 1px solid #fff;
     border-bottom: none;
    letter-spacing: .1em;
}

Thanks in advance!

i want 2 columns side by side:css is as below. it seems the 2nd column is displayed below the first column.wat can be done to avoid this.
div#column1 {
margin-left: 150px;
width: 70px;
height: 500px;
background: #CCCCFF;
color: blue;}

div#column2 {
margin-left: 250px;
color: black;
background: blue;

}

Yep, there's another multiple column problem!

I'v created this website
to give an example of my problem.

As you can see, the #left and #content seem to ignore the border of the #navigator and slip right over it. This problem appears only in IE, in Mozilla there's no problem at all! What is happening?
Here's the CSS stylesheet I'm using:

body
{
text-align: center;
}

a
{
font-size:12px;
text-decoration:none;
font-weight:600;
font-family:verdana;
}

a:link {color:#FF0741;}
a:visited {color:BDD131;}
a:hover {color:white;}

#container
{
margin-left: auto;
margin-right: auto;
text-align: left;
width: 90%;
margin: 10px auto;
font-family:verdana;
font-size:12px;
background-color: #EEF3C9;
color: #FF0741;
line-height: 130%;
}

#Header
{
padding: 0;
background-color: #EEF3C9;
border-style:solid;
border-color:#BDD131;
border-width:1px 0px;
}

#navigation
{
border-style:solid;
border-color:#FFFFFF;
border-width:3px 0px;
text-align:right;
font-size:20px;
background-color:#BDD131;
margin:0;
padding:0;
}

#navigation li
{
display:inline;
padding:20px;
margin:0;
}

#navigation li a:hover
{
color:white;
}

#Left
{
float: left;
width: 200px;
height: 400px;
margin:0px;
background-color:#BDD131;
}

#Content
{
width: 550px;
background-color:#EEF3C9;
margin-left: 210px;
margin-top:10px;
padding: 40px 0px 0px 40px;
}

#End
{
clear: left;
margin: 0;
padding: .5em;
color: #FF0741;
border-style:solid;
border-color:#FFFFFF;
border-width:3px 0px;
background-color: #BDD131;
}

Hi, I have a 4 column layout, all the columns have percentage widths at the moment but I want the 3rd column to be fixed width. I can't seem to figure out how I can have columns 1,2 and 4 fluid and fit the page, whilst having column 3 fixed width.
Code:

 ________________________________________________
|    expand     | expand  |   fixed  |   expand  |
|               |         |   width  |           |
|               |         |          |           |
|               |         |          |           |
|               |         |          |           |
|               |         |          |           |

atm i've created this by just using position:absolute; and then a % width and % from left side. For example the 2nd column atm is width:20%; left:40%; (because 1st column is 40% width)

I'm sure you can help, thx! (if I didn't explain too well, ask all questions )

I have a css site which is structured as following:

<head>
<body>

<div id="container">
<div id="header"></div>
<div id="navigation"></div>

<div id="leftmenu"></div>
<div id="rightmenu"></div>

<div id="content"></div>

<div id="footer"></div>

</div>

</body>
</html>


#container{width:100%;height:100%;}

#header{height:105px;width:100%;}

#navigation {width:100%;}

#LeftMenu {
position: absolute;
width: 150px;
top: 145px;
left: 2px;
height: 553px;}

#RightMenu{
position: absolute;
width: 220px;
top: 145px;
right: 2px;
height: 553px;
}

#content{
margin: 20px 225px 5px 155px;
height: 550px;
}

My main problem is that when the left menu or right menu content increases it overflows the container and goes above footer. how can i make leftmenu, content and right menu when one is increasing all to increase together?

Cheers

ok this is taking to long i go think of something else

I have a two column, three row layout for my website. I'm having
problems where my left column is longer than the middle "main" content,
and when that happends it overlaps my footer instead of pushing it
down.

Would someone mind looking at my html/css and tell me how I can fix
this issue?

Link: http://mividdesigns.com/csshelp.html

By the way, it works/looks fine in FF, but I have problems in IE.

Thank You!

I would like a column to span the entire page vertically. When I browse my website on firefox, the page spans twice as long as the page. (www.skysupplyusa.com/a.php) Any advice?


Code:

#sidebar {
	float: left;
	background-color:#000;
	width: 20%;
	height: 100%;
}

#content{
	background-color:#FFF;
	width: 80%;
	min-height: 100%;
	height:auto;
	float: right;
	text-align:left;
}

/* Hack for IE */
* html #Content {
    height: 100%;
}
/* End IE Hack */

body {
	top:0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding:0;
	text-align:left; 
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:1.5em;
	background-color: #DDD6CC;
}

I'm having problems with my CSS.

I have three columns.

1) Left for navigation
2) Middle for content
3) Right for sidebar

I am using this format for a template. The right sidebar column sometimes will be longer in height than the middle column depending on content of the page.

The Middle column has a 1px solid line on the left and right (using it as a visual divider). So I really want the Middle column to extend and follow the height of the Right sidebar. I can't add the border to the Right sidebar column because it has it's own border already.

What code should I use for the middle column?

I currently have this:

Code:

#middle {
       float: left;
       width: 375px;
       background: #fff;
       margin: 0 auto;
       padding-top: 0px;
       padding-left: 15px;
       padding-right: 15px;
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
       }

Thanks in advance.

I am working on a simple css design for my site. It has a header, footer, and I am trying to divide the content into two columns.

the attempt is he

http://www.jimpix.co.uk/rejig/008.htm

I have the two content columns defined as:

#leftcol {
width:70%;
float:left;
border:1px solid black;
}

#rightcol {
width:25%;
float:right;
border:1px solid black;
}

The above divs sit within a main 'content' div:

#content {
padding:10px;
border-top:2px solid #999999;
border-bottom:10px solid black;
}

But when I view the site in either IE6 or Firefox, the rightcol and leftcol divs do not sit within the content div, or at least, they don't appear to on the screen. Instead of the 'content' div expanding to contain the leftcol and rightcol divs, it just sits at the top, hence why there is a big black line at the top, instead of at the bottom, underneath the columns.

Can anyone see what I am doing wrong please?

Thanks

Jim

[/CODE]I have a 2 column css layout. I am having a problem with getting the vertical line that separates the left and right column to go the length of the page. It grows with the content in the right column.

Here is an example:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xyzTrader.com</title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
</head>
<body id="type-b"><!---->

<div id="wrap">

	<div id="header">

		<div id="site-name">xyzTrader.com</div>
		<div id="search">
			<form action="">
			<label for="searchsite">Site Search:</label>
			<input id="searchsite" name="searchsite" type="text" />
			<input type="submit" value="Go" class="f-submit" />
			</form>
		</div>
	</div>

	<div id="content-wrap">
		<div id="login">
					<form method="post" action="/test/header.php">
		  Username <br />
		  <input name="uname" type="text" id="uname">
		  <br />
		  Password<br />
		  <input name="pword" type="password" id="pword">
		  <br />
		  <input name="Login" type="submit" id="Login" value="Login">
		</form>
				</div>

		<div id="utility">

		<ul id="nav-secondary">
		<li class="first"><b>Catagories</b></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>
		<li><a href="#">Books</a></li>


		</div>

		<div id="content">
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		test<br>
		<p>hello<br>sfafssf</P>

and here is the css file:
Code:

/* THE BIG GUYS */
* {margin:0;padding:0}
html {min-height: 100%; min-width: 100%;}
body {padding: 0 0 20px;background: #fff url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}

/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer} 
a:link {color:#c00} 
a:visited {color:#999} 
a:hover,a:active {color:#069} 

/* FORMS */
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
/* FORMS - general classes */
input.f-submit {padding: 1px 3px;background:#666;color:#fff;font-weight:bold;font-size:96%}
	

/* TYPOGRAPHY */
p, ul, ol {margin: 0 0 1.5em}
h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em}
h1 {font-size: 196%;margin-top:.6em}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
small {font-size:11px}

/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
	ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}

dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}

/* GENERAL */
img {border:none} 
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px} 

/* LAYOUT - HEADER */
#header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}

	#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}
	
	/* SEARCH */
	#search {color:#fff;font-weight:bold;position:absolute;top:10px;right:50px;left:auto;width:18em}
	#search form {margin:0}
	#search input {width:8em;margin: 0 0 -1px;height:1.2em}
	#search label {padding:5px 0 0;display:inline}
	#search input.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em}

/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:100%;margin:0 auto;position:relative; }
#content-wrap {position:relative;width:100%;}
	#login   {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
	#utility {position:absolute; top:125px;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
	#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px}

#content {margin: 0 50px}
	#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
	#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
	#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}

/* LAYOUT TYPE B */
	#type-b #content-wrap {background: url("images/content_wrap_bg.gif") repeat-y 30px 0;min-height:98%;}
	#type-b #content {margin: 0 23px 0 235px}

/* SECONDARY NAVIGATION - vertical navigation */
	#nav-secondary, #nav-secondary ul {position:static}
	#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
	#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
	#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
	#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer} 
	#nav-secondary a:link {color:#000} 
	#nav-secondary a:visited {color:#000} 
	#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px} 
	#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00} 
	#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}

/* SECONDARY NAVIGATION - 2nd TIER */
	#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
	#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
	#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
	#nav-secondary li.active li {border: none;margin:0}
	
	#nav-secondary li.active li.active a:link, 
	#nav-secondary li.active li.active a:visited, 
	#nav-secondary li.active li.active a:hover, 
	#nav-secondary li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - 3rd TIER */
	#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
	#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
	#nav-secondary li.active li.active li a:link, 
	#nav-secondary li.active li.active li a:visited, 
	#nav-secondary li.active li.active li a:hover, 
	#nav-secondary li.active li.active li a:active {font-weight:normal}
	#nav-secondary li.active li.active li.active a:link, 
	#nav-secondary li.active li.active li.active a:visited, 
	#nav-secondary li.active li.active li.active a:hover, 
	#nav-secondary li.active li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - 4th TIER */
	#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
	#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
	#nav-secondary li.active li.active li.active li a:link, 
	#nav-secondary li.active li.active li.active li a:visited, 
	#nav-secondary li.active li.active li.active li a:hover, 
	#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
	#nav-secondary li.active li.active li.active li.active a:link, 
	#nav-secondary li.active li.active li.active li.active a:visited, 
	#nav-secondary li.active li.active li.active li.active a:hover, 
	#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}

/* LAYOUT - FOOTER */
#footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999}
	#footer p {margin:0}
	#footer a:link {color:#999}

Can anyone give me some advice or what to do to make this line go the length of the page??

Thanks in advance,
Mike

Hello

I would be really grateful if anyone can help me - I'm struggling with a 3 column layout using css.

It seems to work well in all except IE6 (I'm looking at it on a Mac using Safari and Firefox, I've got different browser screen shots from a website and all seem OK except IE6, which puts the center column under the other two, instead of at the same height.

If anyone has any ideas, they'd be much appreciated - I don't really know what I'm doing with css, and I have tried several different 3 col layouts that I've found on the web: this is the only one that has worked in almost all browsers for me.

This is the style sheet:

body {background: #003366; }
a { font-family: Verdana, Arial, sans-serif; text-decoration:none; font-size: medium; color: #de8600;}
h1 { font-family: Verdana, Arial, sans-serif; font-size: x-large; font-weight: bold; background: #FFFFFF; color: #DE8600}
h2 { font-family: Verdana, Arial, sans-serif; font-size: large; font-weight: bold; color: #003366}
h3 { font-family: Verdana, Arial, sans-serif; font-size: medium; font-weight: bold; color: #003366}
h4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: bold; background: #003366; color: #DE8600}
h5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background: #FFFFCC; color: #000033}
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #003366;}
a:visited {font-family: Verdana, Arial, sans-serif; font-size: medium; color: #de8600;}
a:hover { font-family: Verdana, Arial, sans-serif; text-decoration:underline; font-size: medium; color: #DE8600;}

body {
padding: 0px;
border:0;
background: #003366;

}

div#wrapper {
width: 780px;
margin: 0 auto;

}

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px

}

#header .slogan {
text-align: left;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

div#navcontainer
{
background: #003366;
margin: 0px 0px 0px 0px;
padding: 1em 0 0 0;
font-size: 0.8em;
text-align: center
text-transform: lowercase;
border-top: 2px solid #de8600;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
display: inline;
width: 100%;
font-size: 0.8em;
}

ul#navlist li
{
display: block;
float: left;
width: 20%;
text-align: center
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #666666;
text-decoration: none;
background: #cccccc url(nav.gif);
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #cccccc url(nav.gif);
color: #996600;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #996600;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

#container
{
position: relative;
display:block;
background:#0ac;
border-left:200px solid #003366;
border-right:200px solid #003366;
}

#inner
{
display:block;
margin-left:-200px;
margin-right:-200px;
padding:5px;

}

#left
{
float:left;
position: relative;
width:200px;
left:0px;
}

#right
{
float:right;
position: relative;
width:200px;
right:0px;
}

#center
{
margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
.clear {clear:both;}

/* Just to extend each column */
#inner a:visited, a {text-decoration:none; cursor:default;}
#inner a span {display:none;}
#inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
#inner a:active span, #inner a:focus span {display:block;}

.menu {
width:150px;
height:150px;
position:relative;
margin:0;
font-size:11px;
margin:0px 0;
z-index:100;

}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#003366; width:150px;
height:25px;
text-align:center;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#003366 url(nav.gif);
line-height:19px;
font-size:11px;
}

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

.menu ul li {
float:left;
margin-right:1px;
position:relative;
}

.menu ul li ul {
display:none;
}

/* specific to non IE browsers */
.menu ul li:hover a {
color:#996600;
background:#cccccc;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:0;
left:150px;
width:150px;
}

.menu ul li:hover ul li a.hide {
background:#ffffff;
color:#003366;
}

.menu ul li:hover ul li:hover a.hide {
width:150px;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background:#cccccc;
color:#996600;
width:200px;
}

.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#666666;
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:151px;
top:0;
color:#003366;
}

.menu ul li:hover ul li:hover ul li a {
display:block;
width:200px;
background:#dfc184;
color:#003366;
}

.menu ul li:hover ul li:hover ul li a:hover {
background:#bd8d5e;
color:#fff;
}

div#fla {
position:relative;
text-align: center;
font-size: 10px;
margin: 20px 0 20px 0;
}

p.fla {
text-align: center;
font-size: 10px;
color: #ffffff;
margin: 0;
}

p.date {
text-align: right;
font-size: 0.8em;
color: #ffffff;
margin: 0;
}

div#guardian {
height:60px;
margin: 10px 0 10px 0;
align: right;
}

div#banner {
width:200px;
margin:20px 0 20px 0;
background:#ffffff;
padding:10;
color:#003366;
font-size:10px;
text-align: center;
border:1px solid #de8600;
}

#banner a:hover {
color:#996600;
font-size:10px;
text-align: center;
background:#cccccc;

}

p.banner {
color:#003366;
font-size:10px;
text-align: center;

}

div#google {
width:180px;
height:120px;
margin:10px 0 0 0;
background:#003366;
padding:5px;
color:#ffffff;
}

div#search {
width:180px;
margin:20px 0 20px 0;
background:#ffffff url("search.gif");
background-repeat: no-repeat;
padding:10px;
color:#003366;
border:1px solid #de8600;
}

p.search {
color:#003366;
font-size:11px;
text-align: center;

}

a.search {
color:#003366;
font-size:11px;
text-align: center;

}

#search a:hover {
color:#996600;
font-size:11px;
text-align: center;

}

div#edit {
width:250px;
margin:20px 0 0 0;
background:#ffffff url("edit-box.jpg");
background-repeat: no-repeat;
padding:20px;
color:#003366;
border:1px solid #de8600;
}

p.edit {
color:#003366;
font-size:11px;
text-align: center;

}

a.edit {
color:#003366;
font-size:11px;
text-align: left;

}

#edit a:hover {
color:#996600;
font-size:11px;
text-align: left;

}

.gallerycontent{
width: 250px;
border: 1px solid #de8600
background-color: #fffFFF;
text-align: center;
display: block;
}


div#footer {
clear:both;
position:relative;
align:center;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
width:780px;
height: 160px

}

p.footer {
color:#ffffff;
font-size:10px;
text-align: left;

}

I am apparently not allowed to post the URL of the page, but I hope that someone may be able to make some suggestions anyway.

Thanks for your time!

Frances

I took the faux column idea, and from it created a left and right border image for my site. The following CSS from Dan Cederholm's faux column article on ALA is what I used, which is below..

Code:

/* image width is 760px, with one px on each end leaving 758px for the content area */

body {
background-image: url(images/bgborder.gif); 
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}

To test to make sure it worked well, I placed a content div on the site, which is centered and has a background color, to test to make sure the border image worked as it should. This is below...

Code:

#allcontent {
width: 758px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
background-color: #ccc;
}

In FF this works great, but I found a bug in IE (as usual ) that I can't figure out. In IE 6.0, when the window is resized, the background from the content that should be inbetween the border image actually overlaps the image on the left hand side.

I can't think of anything that would trigger this, has anyone ever run into it? If not, does anyone have any idea why it happens?

-B