CSS - Background Image Repeating Strangely

I'm trying to get a background image/color to repeat down the left hand column of a site, he http:// www. lisaannschleipfer .com, but can't seem to get it working in either FF or IE. You'll notice that in the left hand column, the tannish color does not repeat all the way down the column.

I'm fairly certain I've narrowed it down to the bit of CSS code he

Code:

div#wrapper {
        margin: auto;
	width:800px;
	background: #d1c8ab url(../images/wrapper_bg.jpg);
        background-repeat: repeat-y;
}

I've tried looking around the forum for some solutions, and have found a few possibilities (height: auto, overflow: auto, etc), but nothing that I have tried to insert into the stylesheet has seemed to work.

Does anyone have any suggestions or solutions? I'd appreciate it!

Here's the entire stylesheet, for reference:

Code:

html {
  height: 100%;
  margin-bottom: 0px;
}

form {
  margin: 0;
  padding: 0;
}

img,table {
	border:none;
}

table td {
	vertical-align:top;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #666666;
	background: #0d789c url(../images/bg.jpg) top center repeat-x;
}

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #0d789c;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
	color: #0d789c;
}

input.button {
 cursor: pointer;
 vertical-align: bottom;
 border: 0px;
 background:none;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
  text-align:justify;
}

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/

#header {
	margin:0 auto;
	width:940px;
}

.left_bg {
	background: transparent url(../images/left_bg.jpg) top right no-repeat;
	width:70px;
}

.middle_bg {
	background: transparent url(../images/.jpg) top right no-repeat;
	width:800px;
}

.right_bg {
	background: transparent url(../images/right_bg.jpg) top left no-repeat;
	width:70px;
}

.top_bg {
	background: transparent url(../images/top_bg.jpg) top center no-repeat;
	width:800px;
	height:45px;
}

.rightside {
	background: transparent url(../images/rightside_bg.jpg) top center no-repeat;
	width:185px;
	height:173px;
}

.header_bg {
	background: transparent url(../images/header_bg.jpg) top center no-repeat;
	width:615px;
	height:173px;
}



#page_bg {
	padding: 0;
	margin:0px auto;
}

#top {
	width:800px;
	margin:0 auto;
	padding:0;
}

div.center {
  padding:0;
}

div#wrapper {
        margin: auto;
	width:800px;
	background: #d1c8ab url(../images/wrapper_bg.jpg);
        background-repeat: repeat-y;
}

#logo {
	padding:47px 50px 0 50px;
	height:100px;
	text-align:left;
	margin:0 auto;
} 

#logo a, #logo a:link, #logo a:hover {
	font-weight: normal;
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 36px;
	padding:0px;
	margin:0;
	line-height:1.4em;
	letter-spacing:2px;
	color:#fefefe;
	text-decoration:none;
}

div.newsflash {
	height:150px;
	padding:10px;
	overflow: hidden;
	color:#fff;
	text-align:left;
}

div#tabarea {
	margin: 0;
	width:615px;
	height:26px;
	text-align:left;
}

#footer {
	width:800px;
	margin:0 auto;
}

.validation {
	float:right;
	padding:8px 20px 0 0;
}

#footer .footer {
	background: transparent url(../images/footer.jpg) top center no-repeat;
	height:28px;
	width:800px;
}

#pathway {
	padding: 0px 10px 8px;
	width: auto;
	margin-right: 250px;
	text-align: left;
}

#search {
	float: right;
	width:320px;
	margin-top: -20px;
	margin-right: 20px;
	height: 40px;
	overflow: hidden;
	text-align:right;
}

#area {
	padding: 0;
	width:100%;
/* color:#d1c8ab; */
}

#whitebox {
	margin: 0;
	width: auto;
}

#whitebox div {
	text-align: left;
}



#whitebox_br {
	height: 13px;
	background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
.pill {
  margin:0px 0 0 1px;
  text-align:left;
}

td.pill_m {
  padding: 0;
  margin: 0 10px;
  width: auto;
  text-align:center;
}

#pillmenu {
  white-space: nowrap;
  height: 26px;
  float: left;
}

#pillmenu ul {
  margin: 0;
  padding: 0;

  list-style:none;
}

#pillmenu li {
	float: left;
	margin: 0px 1px 0 0;
	padding: 0;
	background: transparent;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
	float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 2px 10px 0 10px;
  color: #fff;
  text-decoration: none;
  background: transparent;
}


#pillmenu a:hover {
  text-decoration: underline;
}

#pillmenu a#active_menu-nav {
	color: #fff;
	background: url(../images/active_arrow.gif) top center no-repeat;
}

#pillmenu a#active_menu-nav:hover {
	color: #fff;
}

#leftcolumn {
	margin: 0;
	text-align:left;
	width: 221px;
	float:left;
	background: #d1c8ab url(../images/leftcol_bg.jpg) top left no-repeat;

}


div#maincolumnfull {
	padding:2px 10px;




	float:left;
	width: 760px;

}









div#maincolumn {
padding:20px 10px;
float:left;
width: 559px;
background: #ffffff url(../images/maincol_bg.jpg) top left no-repeat;
}

div.nopad {
	padding: 0;
	text-align:left;
}

td.middle_pad {
	width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}

span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}

/* headers */
div.componentheading {
  padding-left: 0px;
}

h1 {
	padding: 0;
	font-family:Helvetica ,Arial,sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	vertical-align: bottom;
	color: #666;
	text-align: left;
	width: 100%;
}

h2, .contentheading {
	padding: 0;
	font-family: Tahoma, Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	vertical-align: bottom;
	color: #8cb6cf;
	text-align: left;
	width: 100%;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Tahoma,Helvetica,Arial,sans-serif;
  color:#71a7c8;
  font-size: 1.4em;
  padding-left: 0px;
	margin-bottom: 10px;
	text-align: left;
}


/* small text */
.small {
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.modifydate {
  height: 20px;
  vertical-align: bottom;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.createdate {
	height: 20px;
	vertical-align: top;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 0px;

}

a.readon {
	margin-top: 10px;
	display: block;
	float: left;
	background: url(../images/mw_readon.png) top right no-repeat;
	padding-right: 20px;
	line-height: 14px;
	height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
	background-color: #f6f6f6;
}

.ol-background {
	background-color: #666;
}

.ol-textfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.ol-captionfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #f6f6f6;
	font-weight: bold;
}
.ol-captionfont a {
	color: #0B55C4;
	text-decoration: none;
	font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
	padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
	display: block;
	height: 20px;
}

.article_column {
	padding-right: 5px;
}

.column_separator {
	border-left: 1px dashed #e0e0e0;
	padding-left: 10px;
}

td.buttonheading {

}

.clr {
	clear: both;
}


div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}

table.blog span.article_separator {
	display: block;
	height: 20px;
}

/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

table.contenttoc td {
  padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
  background:transparent url(../images/sectiontableheader_bg.gif) top left repeat-x;
  color: #fff;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 6px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
}


tr.sectiontableentry1 {
	background:#f3f3f3;
}
tr.sectiontableentry2 {
	background:#fefefe;
}

/* content styles */
table.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
}

table.contentpaneopen li {
	margin-bottom: 5px;
}

table.contentpaneopen fieldset {
	border: 0;
	border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
	margin-top: 25px;
}

table.contentpaneopen h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

.highlight {
	background-color: #fffebb;
}


/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}

div.moduletable {
  margin-bottom: 25px;
}

div.module_menu, div.module {
	margin: 0 0 0 2px;
	padding: 0;
	margin-bottom: 15px;
}


div.module_menu div div div div ,div.module div div div div {
	background: none;
	padding: 0;
}

div.module_menu div, div.module div {
	
}

div.module_menu div div, div.module div div {
	padding:0 0 10px 0;
	
}

div.module_menu div div div, div.module div div div {
	padding: 0px;
	width: auto;	
}

div.module_menu ul li a:link, div.module_menu ul li a:visited,
div.module ul li a:link, div.module ul li a:visited {
	font-weight: normal;
	background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
	line-height:24px;
	
}

#leftcolumn div.module table ,#rightcolumn div.module table {
	width: auto;
}

#leftcolumn h3, #rightcolumn h3 {
	height:36px;
	color:#fff;
	font-weight: bold;
	font-family: Tahoma, Helvetica,Arial,sans-serif;
	font-size: 12px;
	line-height:26px;
	margin: -2px 0 0 ;
	position:absolude;
	padding:0px 0 2px 22px;
	text-align: left;
	width:198px;
	background:transparent url(../images/h3_bg.gif) top left no-repeat;
}


#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c {
	margin:0 0 20px 0;
	padding: 0px;
	text-align:left;
}

#leftcolumn ul.menu, #rightcolumn ul.menu {
	margin:0;
	padding:0px 0 0 10px;
	list-style:none;
	margin: 0px 0;
	width:194px;	
}


#leftcolumn ul.menu li, #rightcolumn ul.menu li {
	margin:0;
	padding:0;
}

#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
	display:block;
	line-height:20px;
	border-bottom:1px dotted #c3b586;
	padding:2px 0px 0 12px;
	height:20px;
	text-decoration:none;
	text-align:left;
	color:#666666;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
	color:#0d789c;
}

/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
	display:block;
	line-height:20px;
	border-bottom:1px dotted #0d789c;
	padding:2px 0px 0 12px;
	text-decoration:none;
	color:#0d789c;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
	color:#666666;
}

/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
	margin:0;
	padding:0 0 0 0px;
	list-style:none;
	
}

#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link {
	background: transparent url(../images/menu_sub_link_bg.gif) left no-repeat;
	text-decoration:none;
	color:#666666;
	padding:2px 25px;
}

#leftcolumn ul.menu li.active ul li#current a, #leftcolumn ul.menu li.active ul li#current a a:link {
	background: transparent url(../images/current_link.jpg) left no-repeat;
	text-decoration:none;
	color:#666666;
	padding:2px 25px;
}

#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
	s/menu_sub_link_bg.gif) left no-repeat;
	color:#666666;
}

/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
	margin:6px 0;
	padding:0;
	list-style:none;
}


#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
	margin:0;
	padding:0 2px;
}

table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}

div.search input {
	width: 69px;
        vertical-align:bottom;
        background-color: #ffffff;
	margin: 15px 0 10px 0;
}

form#form-login fieldset {
	margin:0px 20px 0 20px;
	padding:20px 0 0 0;
	border:none;
	text-align:left;
}
form#form-login ul { 
	text-align:left;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;	
}
form#form-login ul li{ 
	text-align:left;
	margin:0;
	padding:0 0 0 20px;
}

#leftcolumn div.module h3 {
	top:-500px;
	left:-500px;
	padding-left:0;
	position:absolute;
}



/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }






div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }












/* Parameter Table */

table.paramlist {
	margin-top: 5px;
}

table.paramlist td.paramlist_key {
	width: 128px;
	text-align: left;
	height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size : 14px;
	color : #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f9;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem {
}

/* Text advert style */

.banneritem_text {
	padding: 4px;
	font-size: 11px;
}

.bannerfooter_text {
	padding: 4px;
	font-size: 11px;
	background-color: #F7F7F7;
	text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
	text-align: left;
}

/* Frontend Editing*/
fieldset {
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 0 15px;
}

legend {
	margin: 0;
	padding: 0 10px;
}

td.key {
	border-bottom:1px solid #eee;
	color: #666;
}

/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
}

.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}

/* System Standard Messages */
#system-message dd.message ul { background: #C3D2E5 url(../../images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}



/* ****************************************************************************** */
/* blue */
input,button {
	background:transparent;
        vertical-align:bottom;
}

input[type="checkbox"], input[type="radio"]{
   background: transparent;
   border: none;
}

/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
	color			: #fff;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sgfooter:hover {
	color: #fff;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
#sgf {
font-size: 11px;
text-align:left;
color: #fff;
padding:4px 0 0 10px ;
font-family: Arial,sans-serif;
width:500px;
float:left;
}
.sgf {
text-align:right;
font-size: 11px;
font-family: Arial,sans-serif;
color: #666;
text-decoration:none;
}
.sgf1 {
font-size: 11px;
font-family: Arial,sans-serif;
color: #666666;
text-align:left;
}

a.sglink:link, a.sglink:visited {
	color			: #666666;
	font-size		: 11px;
	font-family: Arial,sans-serif;
	text-decoration:none;
}
a.sglink:hover {
	color			: #666666;
	font-family: Arial,sans-serif;
	text-decoration:none;
}

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

Hi there. I'll try to explain this as clearly as I can:

I have a site that needs these requirements
- 3 column elastic layout with footer
- left and right columns are static
- center column is flexible to fill screen

problem i am having is that the left and right columns ONLY need to have a repeating background (because of a required drop shadow in the design) on the y axis. Unfortunately I can't seem to get the left and right columns to assume the height of the content area, which also has to be elastic (so there's no fixed height either).

Basically, the background images either don't show up, or only go as far down as "content" or based on a specific height (which is useless in this layout)

Any suggestions or code samples would greatly appreciated!

Thanks in advance ,
humanv3

For some reason repeating backgrounds won't repeat in Firefox unless I specify a height for the div.

They show up ok in IE.

This will display:

Code:

#contentcontainer {
  background-image: url('images/layout/content_bg.png');
  background-repeat: repeat-y;
  height: 350px;
  width: 785px;
  font-size: 0px;
  margin: 0px;
  padding: 0px;
  background-color: #fff;
}

This won't:

Code:

#contentcontainer {
  background-image: url('images/layout/content_bg.png');
  background-repeat: repeat-y;
  width: 785px;
  font-size: 0px;
  margin: 0px;
  padding: 0px;
  background-color: #fff;
}

I need to find a way around this as my pages are varying lengths.

Any ideas?

Thanks,

Beardy

Hi. I would like to repeat a small slice the entire length of a <div> column, however when I try to do so, the final results show just a white column where the image should be. Does anyone know how to fix this? The image is transparent so that you can still see the background behind it.

Please take a look at my site:

http://unoriginalblog.com

I want to fill the space below my navigation sidebar with a repeating image div that would grow with the content. How would I achieve this? At the moment the div works like this:

Code:

<div id="page">

<div id="header">
  header img...
</div>

<div id="content">
  main blog bit.
</div>

<div id="sidebar">
  navigation bar
</div>

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

and the css: (only the relevent bits...wordpress divides ids/classes by layout/font/etc etc)

Code:

#page {
	margin: 0px auto 0px;
	padding: 0;
	width: 760px;
	}

#header {
	padding: 0;
	margin: 0 auto;
	height: 200px;
	width: 100%;
	}

#content{
	float: left;
	padding: 0 0 20px 45px;
	margin: 0px 0 0;
	width: 490px;
	}

#sidebar{
	margin: 5px 10px 10px 10px;
	padding: 10px 0 10px 10px;
	margin-left: 565px;
	width: 170px;
	}

#footer {
	padding: 0px;
	margin: 0 auto 0px;
/* for some reason, it has to be 761px so that the whole page is aligned in ie.. firefox works both ways, 760 or 761 */
	width: 761px;
	height: 100px;
	clear: both;
	}

perhaps... i can set the bg of the #page as a repeating bg image and the sidebar bg white?... but then how can I make sure that the repeating image blends nicely? is there another way to make it so that I don't have to use bg images in #page?

Thanks for the help

Here is what I have as a test


my CSS page has

Code:

body {
	margin: 4px 0px;
	padding: 0px;
	background-color: #000000;
}

.header		{
		background-image: url(images/back.gif);
		background-repeat: repeat-x;
		height:197px
		width:100%;
		margin-top :0px;
		}

and my header page that I want to include in all of my pages looks like this for now

Code:

<div class="header">
      <img src="images/logos.gif" width="750" height="197">
</div>

I want the logos.gif image to sit in the upper left and the back.gif image to repeat behind it so it looks seamless. I thought this would be a super easy task but right now, with the above code all I get is the logos.gif and no back.gif image. My path to image is correct.

I even commented out the logos.gif just so I had a blank canvas and nothing.

Thanks for any help on this.

I have a QA site where I want to have a very translucent image displayed over the entire page to help our testers more visually recognize that the site they are on is not production (or worse thinking they are on QA when they are on production). My initial idea was to create a fixed position div with a repeating background images. While this visually accomplished what I want, it ends up masking the entire site, making it impossible to click on any links that are displayed underneath the QA images.

What is the best way to do this (sans javascript)? Any help is much appreciated.

I am having trouble with placing an image on my page and having that image repeat itself all the way down the page.

Code:

<div id=left> ........ content ...</div>

<div id="image">this is where i want the image</div>

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

Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code

Code:

#left {
	position: absolute;
	left: 0px;
	width: 215px;
	background-color: #efefef;
	border: 1px dotted #ccc;
	}
#image1 {
    background-image: url("http://mydomain.com/image.jpg") 
    background-repeat: repeat-y;
    width: 15px;
    margin-left: 215px;
}
#center {
	
	margin-left: 260px;
             margin-right: 0px;
	overflow: hidden;
	}

The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page

Cheers

I have a page setup like this....

<table height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td valign="top" class="lt_bar"><img src="template/blue_234/images/lt_shd.jpg" /></td>
<td valign="top"></td>
<td valign="top" class="rt_bar"><img src="template/blue_234/images/rt_shd.jpg" /></td>
</tr>
</table>

and:

.lt_bar {
width: 27px;
background-image: url("images/lt_shd.jpg");
background-repeat: repeat-y;
float: left
}
.rt_bar {
width: 27px;
background-image: url("images/rt_shd.jpg");
background-repeat: repeat-y;
float: right;
}

In IE all is fine, in FireFox the right side shows, the left side does not. any clues...

Hi

I have created a webpage using CSS image pop-outs. The three different images are hosted on imageshack. However, the three text links I have for the three different images only direct to the first image - the other two will load the incorrect image, a copy of the first. Here's the website:

westside dot org/give

Here's the code:

<img src="(url)">
<img src="(url)">


















<style type="text/css">
<!--
.fontz {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
.a {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
.a {
font-size: 14px;
}
.a strong {
font-size: 16px;
}
-->
</style>

<span class="a"><strong><font size="5"><br>
<font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Why We Give</span></a>
</font>
</font></strong><font size="5">
</font></span><font size="5">
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;">
<span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL um rules)">
<br>
</font>
</strong>
</span>
<div class="a" style="text-align: right;"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></font></strong></div>
</div>
<span class="a"><strong><br>
<br>




<font size="5">
<font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">How to Give</span></a>
</font>
</font></strong><font size="5">
</font></span><font size="5">
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;">
<span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL rules)">
<br>
</font>
</strong>
</span>
<div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div>
</div>
<span class="a"><strong><br>
<br>



<font size="5">
<font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Other Ways to Give</span></a>
</font>
</font></strong><font size="5">
</font></span><font size="5">
<div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;">
<span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(m rules)">
<br>
</font>
</strong>
</span>
<div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div>
</div>
<span class="a"><strong><br>
</strong></span><br>


















</font></font></font></font><p></p></font></font>




Thanks!

Hi,

I'm running into a bit of a problem making the entire page fit into a DIV. I can't see any reason why it won't, because as far as I know my div's are in the right place, and in the right file (because the effect is half-there.

Here's my code:

CSS

Code:

html {
scrollbar-face-color: #ADDFE7;
scrollbar-highlight-color: #ADDFE7;
scrollbar-3dlight-color: #ADDFE7;
scrollbar-darkshadow-color: #ADDFE7;
scrollbar-shadow-color: #ADDFE7;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ADDFE7;
overflow:hidden;
}

body { 
background: #FEFFED; 
font-family: 'Verdana', 'Arial', sans-serif; 
font-size: 10px; 
color: #000000; 
cursor:default; 
margin: 0; padding: 0;
overflow:hidden;
}

div.center {
  	/* Make element float in the center */
  	position: absolute;
  	left: 50%;
  	top: 50%;

  	/* Set the width and height */
  	width: 750px;
  	height: 410px;

  	/* Set margin to half the values of width/height */
  	margin-left: -375px;
  	margin-top: -205px;

  	
  }


div.rect { 
background: #ADDFE7; 
padding: 0px; 
width: 750px; 
height: 410px; 
overflow:auto;
border: 1px solid #000000; 
z-index: 1; 
}

Now what we're concerned about there (the ones I added) are the 'center' div , and 'rect' div. They're near the top.

and this is a 'View source' to show where I put the code:

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" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>form one : shop</title>
<meta name="keywords" content="form one, merchandise, t-shirts, cds Congratulations! You have successfully installed your Zen Cart&trade; E-Commerce Solution." />
<meta name="description" content="form one : shop : Congratulations! You have successfully installed your Zen Cart&trade; E-Commerce Solution. - form one, merchandise, t-shirts, cds" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="authors" content="The Zen Cart&trade; Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart&trade;, http://www.zen-cart.com" />
<base href="http://formone.net/shop/" />
<link rel="stylesheet" type="text/css" href="includes/templates/perry/css/stylesheet.css" /></head><body id="index">
<div class="center">
<div class="rect">
    <table class="centershop" border="0" cellspacing="0" cellpadding="0">

      <tr><td>
        <table border="0" cellspacing="0" cellpadding="0" class="headerNavigation" align="center">
          <tr class="headerNavigation">
            <td align="left" valign="top" width="33%" class="headerNavigation">
              <a href="http://formone.net/shop/index.php?main_page=index">Home</a>&nbsp;|&nbsp;
              <a href="http://formone.net/shop/index.php?main_page=login">Log In</a>
            </td>

            <td align="center" width="25%"></td>
            <td class="headerNavigation" align="right" valign="top" width="33%">
            </td>
          </tr>
        </table>
        <table border="0" width="100%" cellspacing="0" cellpadding="0" class="header">
          <tr><!-- All HEADER_ definitions in the columns below are defined in includes/languages/english.php //-->
            <td valign="middle" height="23px" width="200px">
<a href="http://formone.net/shop/index.php?main_page=index"><img src="includes/templates/perry/images/logo.gif" border="0" alt="Powered by Zen Cart :: The Art of E-Commerce" title=" Powered by Zen Cart :: The Art of E-Commerce " width="192" height="64" /></a>            </td>

            <td align="center" valign="top">
            </td>
          </tr>
        </table>

<table border="0" cellspacing="0" cellpadding="0" class="main_page">
  <tr>

 <td valign="top" class="column_left"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_left"><tr><td>

<!--// bof: categories //-->

<table width="150px" border="0" cellspacing="0" cellpadding="0" class="leftbox" id="categories-table">
  <tr class="leftboxheading" id="categories-heading-tr">
    <!-- Sidebox Header -->
    <td colspan="3" width="100%" class="leftboxheading" id="categories-heading-td">Categories</td>
  </tr>
  <tr>
    <!-- Sidebox Contents -->
    <td colspan="3" class="leftboxcontent" id="categories-content">
<br /><img src="includes/templates/perry/images/pixel_silver.gif" border="0" alt="" width="100%" height="1" /><br /><a class="category-links" href="http://formone.net/shop/index.php?main_page=products_all">All Products ...</a>    </td>

  </tr>
  <tr>
    <!-- Sidebox Footer -->
    <td colspan="3" height="5px" class="leftboxfooter" id="categories-footer">
    </td>
  </tr>
</table>
<!--// eof: categories //-->

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

    <td valign="top" class="center_column" width="100%">    <table border="0" width="100%" cellspacing="2" cellpadding="2">
      <tr>
        <td class="pageHeading"><h1>Congratulations! You have successfully installed your Zen Cart&trade; E-Commerce Solution.</h1></td>
      </tr>
      <tr>
        <td class="greetUser">Welcome <span class="greetUser">Guest!</span> Would you like to <a href="http://formone.net/shop/index.php?main_page=login">log yourself in</a>?</td>

      </tr>
      <tr>
        <td class="main">This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong></td>
      </tr>
      <tr>
        <td class="plainBox">Define your main Index page copy here.</td>
      </tr>

      <tr>
        <td class="plainBox"><p><strong><font face="verdana,arial,helvetica,sans-serif" color="#006600">Main Page Sample Text ...</font></strong></p><p>This section of text is from the Define Pages Editor located under Tools in the Admin.</p><p>It is different from the /includes/languages/english/xxxxxx.php definitions.</p><p>You can use one or the other seperately for this page or, you can use both together.</p><p>To remove the language file definition, do not delete the define statement, set it to be blank. Example: define('TEXT_INFORMATION', '');</p><p>To remove this section of the text, delete it from the Define Pages Editor located under Tools in the Admin.</p><br /></td>
      </tr>
    </table><br />



</td>
  <td valign="top" class="column_right"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_right"><tr><td>

    </td></tr></table></td>
  </tr>
</table>
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr class="footertop">
        <td class="footertop" align="center">&nbsp;|&nbsp;<a href="http://formone.net/shop/index.php?main_page=index">Home</a>&nbsp;|&nbsp;</td>

      </tr>
    </table>
    <table border="0" width="100%" cellspacing="0" cellpadding="0" class="footer">
      <tr>
        <td class="footerbottom">Your IP Address is:   69.159.1.195</td>
      </tr>
      <tr>
        <td class="footerbottom"></td>

      </tr>
    </table>
  </td></tr>
  <tr>
    <td align="center"><div>Parse Time: 0.150 - Number of Queries: 43 - Query Time: 0.012168360336304</div></td>
  </tr>
</table></div>
</div>
</body></html>

They're right after the <body> and right before the </body> tag, so I don't know why the whole page isn't fitting in my box.

It sort of is working, because it's centered vertically and horizontally, and positioned where it's supposed to be. But it overflows out under the box it's supposed to be in.

Does anyone know why this is happening?

If you want to see what it is doing right now, it's http://www.formone.net/shop .

So, I've got the following CSS code that I use to give a cell a background that aligns to the bottom:

Code:

td.flag {background: url(images/flag_s.gif) no-repeat center bottom;}
td.main {background: url(images/march.gif) no-repeat center bottom;}

Unfortunately, only the td.main works as it should. The first entry td.flag doesn't show the image. I have verified that the gif image of flag_s.gif exists in /images/ and I cannot figure out why td.flag won't work when td.main does....

Any ideas? The CSS is syntactically correct.

In my html I call td class="flag".... doesn't work.

Any help would be appreciated!

I just can't seem to figure this out! it is driving me nuts!

The page I am working on is he
http://www.iskippedlunch.com/z_test/index_2.php
and the style sheet is he
http://www.iskippedlunch.com/z_test/styles/shfb_basic.css

I am using php to import sections into the page. For some reason when I include the Client Story (blue) section on the homepage all the content in the green sidebar gets pushed way down the page in a couple versions of IE6. I have narrowed the problem down to this area of code, it is the only part that makes the page go wonky. I even rewrote the CSS, but I must be missing something.

The lower levels of the site are based on this home page, and have the same problem if the main (white) content is long. You can see how some have the problem and some display correctly.

Help will be greatly appreciated, my eyes are getting crossed!

PS, on some of the lower level pages, the (orange)footer background creeps up the page! This is new!

I have a very simple drop down menu that I'm playing around with and trying to make cross-browser.

The drop-down currently looks OK in Mozilla/Firefox.

Presently, it does not work in either IE 6 or IE 7.

You can see the drop down HERE

I have noticed that when you alter the URL in this line of code, inside the href attribute (for example):

Code:

<li><a href="">Computer Hardware (1)</a></li>

...sometimes the menu will work (or break) in ANY given browser (IE or Mozilla)...

Try substituting different values for the href attribute inside the link. Depending on the href value, sometimes the code works, and sometimes it doesn;t (in either IE or Mozilla).

Something screwy is going on with the href attribute, but I can;t tell what it is.

Any help is appreciated.