[bukwus]

Hello

I'm building a page that has a background color and repeated background image.

Knowledge Institute

In IE it's looking fine. In Firefox, the background stops once the page gets to the floating DIVs. Here's the relevant HTML:

<div id="homeBody">
				<!--Using P instead of H2 because H2 causes space above img_border_long in FF, but not in IE -->
				<p id="topTitle">Welcome</p>
				
				<p class="padR2">At Knowledge Institute, we bring innovation and collaboration to the world of entrepreneurial development and small business education. By uniting government, nonprofit economic development agencies and private sector leaders in business-to-business solutions, we are providing robust access to the following comprehensive resources tailored to the interests and needs of today's entrepreneurs:</p>
				
				<div class="twoColumn">
					<h3>Education</h3>
					
					<p>
						Utilize free online, interactive curriculum to build entrepreneurial skills and knowledge:
						<div class="twoColumn">
							<ul>
								<li>Courses</li>
			  				<li>Registration</li>
							</ul>
						</div>
						
						<div class="twoColumn">
							<ul>
								<li>Textbooks</li>
			  				<li>Certification</li>
							</ul>
						</div>
					</p>
					<br clear="all" />
					<br />
					
					<h3>Professional Services</h3>
					
					<p>
						Advance outreach, inpact and value to entrepreneurs by securing KnowledgeInstitute services in areas of:
						<ul>
							<li>Strategic Marketing Campaigns</li>
						  <li>Content Development (web/print)</li>
						  <li>Educational Program Development</li>
						  <li>Speaking Engagements/Lectures</li>
						</ul>
					</p>
				</div>
				
				<div id="leftBorder" class="twoColumn">
				
				</div>
			</div>

Here are the styles:

#homeBody { width:75%; margin-left:232px; margin-top:10px; padding-left:10px; border-width:0px; border-style:solid; border-color:#C1D4EA; border-left-width:1px; }

#topTitle { font-size:140%; color:#6C3081; font-weight:bold; }

#leftBorder { padding-left:10px; border-width:0px; border-style:solid; border-color:#C1D4EA; border-left-width:1px; }

.twoColumn { float:left; width:49%; }
			
.padR2 { padding-right:20px; }

Is there a way to have the background be consistent across the browsers?

Many thanks

[SapperX]

Just by looking at the site and the code, I can tell that there are a lot of things wrong here. Try reading up on standards compliance and after applying it to your site, I bet the problem will be fixed. I didn't spend too much time on it, but I didn't see anything specifically causing the problem.

[Baez]

Where are you applying the background image? I don't see it anywhere in your code.

You need to use this in your style sheet:

background: url('../images/background.png') repeat-y top;

[CrazeD]

Originally Posted by Baez

Where are you applying the background image? I don't see it anywhere in your code.

You need to use this in your style sheet:

background: url('../images/background.png') repeat-y top;

It looks like you got it sorted, as it works fine in my FF.

However, I'll say this anyway:

In the future if you have this problem and repeat-y doesn't work, use the min-height:100%; statement...usually does the trick.