Learn VBA & Macros in 1 Week!

CSS - Ie Background Duplication Bug

Full Excel VBA Course - Beginner to Expert

Ie Background Duplication Bug	View Content

Hello,
I have been struggling for several days with a very strange issue that appears ONLY in IE 8 and 9. Google searches revealed nothing. Here is what my page is SUPPOSED to look like:

And here is how IE 8 and 9 render it:

As you can see, the background in the container div duplicates.

Here is the css:
Code:


.header
{
	height: 45px;
	width: 300px;
	position: absolute;
	left: 0px;
	top: 0px;
	font-family: Trebuchet MS Bold;
	color: #000000;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: 0;
	font-size: 26px;
	font-weight: bold; 
	z-index: 5;
}

.headwrapIE
{
	z-index: -1;
}

.headerghost
{
	background: #FFFFFF;
	width: auto;
	height: 100px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index:4;
}

.headerbg
{
	background: #FFFFFF;
	width: 100%;
	height: 100px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index:0.5;
}

.searchcontainer
{
	z-index: 7;
	margin-top: 5px;
	margin-right: 5px;
	position: absolute;
	float:right;
	text-align: right;
	top: 5px;
	right: 0px;
}

.iefix
{
	z-index: 9999;
}

.container
{
	border-left: 1px solid #000000;
	padding-left: 5px;
	margin-left: 163px;
	position: relative;
	top: 155px;
	background: url(gbmountains.png) left bottom repeat-x;
	font-family: Trebuchet MS Bold;
	color: #000000;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: 0;
	font-size: 13px;
	height: 100%;
	padding-bottom: 90px;
	z-index:-1;
}

a.side:link 
{
	text-decoration: none;
	color:#777777;
}

a.side:visited 
{
	text-decoration: none;
	color:#555555;
}

a.side:hover 
{
	text-decoration: none;
	color: #66CCFF;
}

a.side:active 
{
	text-decoration: none;
	color:#777777;
}

.heading
{
	font-size: 14px;
	color: #3399CC;
	text-decoration: underline;
	font-weight: bold; 
}

.imagecaption
{
	font-size: 10px;
	color: #777777;
	text-align: center;
	width: 250px;
	margin-bottom: 10px;
}

.slogan
{
	font-size: 13px;
	font-style: italic;
}

.sidehead
{
	color: #000000;
	text-decoration: underline;
}

.SIDEBG
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 200px;
	float: left;
	z-index: -100;
	background:#fff url(sidebar.png) repeat-y;
}

.AllContain
{
	position: absolute;
	top: 0px;
	left: 0px;
	padding-bottom: 155px;
	width: 100%;
	z-index: 0;
}

.AllContainhome
{
	position: absolute;
	top: 0px;
	left: 0px;
	padding-bottom: 505px;
	width: 100%;
	z-index: 0;
}

.sidebar
{
	margin-right: 10px;
	border-right: 1px solid #000000;
	z-index: 3;
	padding-top: 5px;
	width: 150px;
	text-align: right;
	padding-right: 13px;
	position: absolute;
	left: 0px;
	top: 0px;
	padding-top: 150px;
	font-family: Trebuchet MS Bold;
	color: #000000;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: 0;
	font-size: 11px;
	font-weight: bold; 
}

.sidecontents
{
	margin-right: 10px;
	z-index: 3;
	padding-top: 5px;
	width: 150px;
	text-align: right;
	padding-right: 13px;
	position: absolute;
	left: 0px;
	top: 0px;
	padding-top: 150px;
	font-family: Trebuchet MS Bold;
	color: #000000;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: 0;
	font-size: 11px;
	font-weight: bold; 
	margin-top: 15px;
}

.footer
{
	border-top: 1px solid #000000;
	position: absolute;
	left: 0px;
	text-align: right;
	padding-top: 5px;
	padding-right: 5px;
	margin-left: -5px;
	font-size: 11px;
	background: #777777;
	height: 20px;

	margin-top: 155px;
	left: 0px;
	width: 100%;
}

.foothome
{
	border-top: 1px solid #000000;
	position: absolute;
	left: 0px;
	text-align: right;
	padding-top: 5px;
	padding-right: 5px;
	margin-left: -5px;
	font-size: 11px;
	background: #777777;
	height: 20px;

	margin-top: 505px;
	left: 0px;
	width: 100%;
}

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

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:30em
}

And the page:
Code:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="css/main.css" type="text/css" media=screen />
		<link rel="stylesheet" href="menu/menu_style.css" type="text/css" />
		<link rel="Stylesheet" type="text/css" href="css/blinds.css" /> 
		<script src="tools/jquery.tools.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/tabs-slideshow.css"/>
		<title>
			<?php echo $title ?> - Nortrat Consulting
		</title>
	</head>
	<body> 
		<div class="AllContain">
			<div class="SIDEBG"></div>
			<div class="headwrapIE">
				<div class='header'>
					<a href="?page=home"><img style="border:none;" src="images/norstratlogo.png" alt="NORSTRAT Consulting" height="100px" /></a>
				</div>
			</div>
			<div class="headerbg"><div class="searchcontainer"></div></div>
			<div class="headerghost">
				<div style="z-index:4000;">
					<div style="z-index:3000;">
						<ul class="menu">
							<li class="top"><a href="?page=Home" target="_self" class="top_link"><span>Home</span></a>
							</li>
							<li class="top"><a href="?page=Cnorth" target="_self" class="top_link"><span>Our Changing North</span></a>
								<ul class="sub">
								<li><a href="?page=Nstrat" target="_self">Northern Strategy</a></li>
								<li><a href="?page=Challenges" target="_self">Challenges</a></li>
								<li><a href="?page=Projects" target="_self">Projects</a></li>
								<li><a href="?page=News" target="_self">News</a></li>
								</ul>
							</li>
							<li class="top"><a href="?page=About" target="_self" class="top_link"><span>NORSTRAT Consulting</span></a>
							<ul class="sub">
								<li><a href="?page=Services" target="_self">Services</a></li>
								<li><a href="?page=FirstStep" target="_self">First Step</a></li>
								<li><a href="?page=LeeCarson" target="_self">Lee Carson</a></li>
								<li><a href="?page=Partners" target="_self">Partners</a></li>
							</ul>
							</li>
							<li class="top"><a href="?page=Contact" target="_self" class="top_link"><span>Contact</span></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="headwrapIE">
				<div class="sidebar">
					<div class="sidehead">Sections</div>
					<div class="sidecontents">
						<?php
							//Display all headings
							$posts = array_reverse($posts);
							foreach ($posts as $post)
							{
								$POST_id = $post["ID"];
								$POST_SHeading = $post["SHeading"];
								echo '<a class="side" href="#POST' . $POST_id . '">' . $POST_SHeading . '<a/><br/>';
							}
						?>
						</div>
				</div>
			</div>
			<div class="menughost"></div>
			<div class="iefix">
				<div class="container">
					<?php
						//Display all posts
						foreach ($posts as $post)
						{
							$POST_id = $post["ID"];
							$POST_pID = $post["pID"];
							$POST_Heading = $post["Heading"];
							$POST_SHeading = $post["SHeading"];
							$POST_Text = $post["Text"];
							$POST_ImageURL = $post["ImageURL"];
							$POST_ImageALT = $post["ImageALT"];
							$POST_ImageCAP = $post["ImageCAP"];
							echo '<a name="POST' . $POST_id . '"><div class="heading">' . $POST_Heading . '</div></a>';
							echo $POST_Text;
							if ($POST_ImageURL != "" && $POST_ImageURL[strlen($POST_ImageURL)-3] == '.')
							{
								echo '<div class="imagecaption">';
								echo '<img src="' . $POST_ImageURL . '" alt="' . $POST_ImageALT . '" width="250"/><br/>';
								echo $POST_ImageCAP;
								echo '</div>';
							}
						}
					?>
				</div>
			</div>
			<div class="footer">
			Copyright 2010, NORSTRAT Consulting
			</div>
	</div>	
	</body>
</html>

Thanks in advance,
Richard Carson

Full Excel VBA Course - Beginner to Expert

Translucent Background + Solid Background On Cells Inside

Similar Tutorials

View Content

I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?

The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever.

http://www.area51entertainment.co/index.php?about

Background Image Width, Two Background Images?

Similar Tutorials

View Content

The layout I have going is a bit difficult to explain. Here's a diagram..

The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

Static Background On Top Of Repeating Background Problem

Similar Tutorials

View Content

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

Div In A Table Shows Body Background Not Table Background

Similar Tutorials

View Content

I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information.

I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what).

URL

The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background.

Could someone solve this, or alternatively reccommend another way.

Background Image Tiled Under Another Background Image???

Similar Tutorials

View Content

In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work.

You can clearly see the problem here, a gap at the bottom:

http://www.groundedgroup.com/clients/NWR/

Here's the relevant css:
http://www.groundedgroup.com/client...WR-GG/style.css

I've googled and subsequently tried out some solutions, but no luck. Got any ideas?

Thanks in advance.

PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed.

Background

Similar Tutorials

View Content

Hello,

How can add a background color to each table cell in a table header
and also add a small image on the bottom right corner of each of those
cells?

Thanks,
Miguel

Background With Css???????????????

Similar Tutorials

View Content

someone know how to make a web with background like this...

http://netcodigo.webinfo.es/

I tried, but I can't do it.

pd: Sorry for my bad english.

Background

Similar Tutorials

View Content

whats wrong with this?

body
{
font-family:arial;
font-color:#000000;
background:url(background/bg.jpg);
}

its the background bit that isnt working
it works when the css is included on the page but when i put it on a seperate stylesheet it hasnt worked

Css Background

Similar Tutorials

View Content

I have a div box with a 100% width and a repeating background image on it. Everything works great except when the window is smaller then the actual site. If I resize my window so that the horizontal scrollbar appears, as if I had a 15" monitor, the background image does not go all the way to the edge. Instead it is only the width of the browser window, although the content of that box displays fine.

Anyone know how to fix that?

Background Css Help

Similar Tutorials

View Content

I want to make a webpage with ah gradient border on the left and right side of the page.

The gradients will be "fading out" towards the middle.

How should I do this?
I know how to get one side to show up, but not both.
Can I use two different backgrounds in one CSS element? (probably not)
Or should I use two different <div> tags with backgrounds set with what I want and are as big as the page?

Thanks.

Help With .li Background

Similar Tutorials

View Content

I have background image for bullet. However, in Firefox it tries to display several of them for one line, and in IE it is like it should - one background image per line.

Ive set background to no-repeat, and it still doesn't work in FF.

Help plz.

See the problem here http://www.armedassault.org/wp/

Css Background Bug In Ie?

Similar Tutorials

View Content

Hi all. I'm having a small but very annoying problem with my new design. I'm using backgrounds for my divs but somehow Internet Explorer manages to push them one pixel upwards and to the left. I can't find out why and after trying things for three hours I don't know what to try anymore. In both Firefox and Opera it works fine!

Here is a screenshot where you can clearly see what goes wrong. The one on the top is Internet Explorer, the one on the bottom is made in Firefox and is how it is supposed to be.
URL

Site: URL
CSS: URL

I also found out that the footer of my page doesn't go to the bottom correctly in Opera. If anybody knows how what the problem is there and how to fix it I will be the happiest person on earth

Thx in advance.

Greetings,

Sjoerd

Help With Background

Similar Tutorials

View Content

Am design a site just now this is the image of the site here

The problem is the blue background what is the best way to do this just now i have it like this

by use a repeat of part of the image but want the cloud part at the top left too.

Background:url(some Gif)

Similar Tutorials

View Content

Is it just IE that using a gif as a background url not work...
or is that one of the standards.. I know jpgs work.. but why
not gifs?

Background Help

Similar Tutorials

View Content

Hi, I'm building a website for my work and got in a little trouble. I do not know if it is just the browser or the code. I'm new to this CSS and HTML so i'm not 100% sure.

I needed my background fixed which i had done, and on my home computer the main stuff on my page just floats above the background. On my work computer the main information is when you scroll down, after the background image.

I'm confsued and wondering if anyone could help, thanks.

Here is also a link to the page so you can see what the problem is, http://www24.brinkster.com/mattphat/ymca2.html

Code:

<html>
<head>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
<style type="text/css">
html {height:100%;}body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>

<body>
<! --- --- BACKGROUND IMAGE --- --->
<div id="bg">
<img src="YMCA/graudal1.jpg" width="100%" height="100%">
</div>
<! --- --- DONE BACKGROUND IMAGE --- --->



<! --- --- MAIN PAGE BORDER--- --->
<div id="content">
<div align="center">
<table width="727" border="1" color="#736F6E" cellspacing="0" cellpadding="0">
<! --- --- DONE MAIN PAGE BORDER--- --->



<!--- --- MAIN PAGE POSITION STAY --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
</td>
<td rowspan="2" align="left" valign="middle" background="" bgcolor="#000000">
<form id="search" name="search" method="get" action="search_results.asp">
<table width="383"  border="0" cellspacing="0" cellpadding="0">  
<!--- --- DONE MAIN PAGE POSITION STAY --- --->



<!--- --- NWCTYMCA LOGO --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
<img src="YMCA/NWLOGO2.JPG" width="727" height="289" border="none" usemap="#Map">
</td>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
</td>
</tr>
<!--- --- DONE NWCTYMCA LOGO --- --->



<!--- --- BARS ABOVE LINKS --- --->    
     <!--- BLACK BAR --->
     <tr>
     <td colspan="2">
     <img src="images/clear_spacer.gif" width="727" height="0">
     </td>
     </tr>
     <!--- RED BAR --->
     <tr align="left" bgcolor="#A93333">
     <td colspan="2">
     <img src="images/clear_spacer.gif" width="727" height="0">
     </td>
     </tr>
     <!--- STRONG KIDS BAR --->
     <tr align="center" bgcolor="#FFFFFF">
     <td colspan="2">
     <img src="http://www.ymcadc.org/PublishingImages/webuild_tagline.gif" width="360" height="15">
     </tr>
     </td>
<!--- --- DONE BARS ABOVE LINKS --- --->



<!--- --- LINKS --- --->
<tr bgcolor="#FFFFFF" border="0"  cellspacing="0" cellpadding="0"> 
<td colspan="2">
<div align="left">

&nbsp;&nbsp;<img src="ymca/miniY.jpg"></img>

<!-HOME->
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg"  ONMOUSEOUT=rollover.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover" width="89" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">

<!-TORRINGTON->         
<a href="http://www24.brinkster.com/mattphat/ymcatorrington.html" ONMOUSEOVER=rollover2.src="YMCA/Torringtonlink2.jpg"  ONMOUSEOUT=rollover2.src="YMCA/Torringtonlink.jpg">
<img src="YMCA/torringtonlink.jpg" name="rollover2" width="140" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">

<!-WINSTED->         
<a href="http://www24.brinkster.com/mattphat/ymcawinsted.html" ONMOUSEOVER=rollover3.src="YMCA/winstedlink2.jpg"  ONMOUSEOUT=rollover3.src="YMCA/winstedlink.jpg">
<img src="ymca/winstedlink.jpg" name="rollover3" width="109" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">

<!-CANNAN->
<a href="http://www24.brinkster.com/mattphat/ymcacannan.html" ONMOUSEOVER=rollover4.src="YMCA/cannanlink2.jpg"  ONMOUSEOUT=rollover4.src="YMCA/cannanlink.jpg">
<img src="ymca/cannanlink.jpg" name="rollover4" width="93" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">

<!-GIVING->        
<a href="http://www24.brinkster.com/mattphat/ymcagiving.html" ONMOUSEOVER=rollover5.src="YMCA/givinglink2.jpg"  ONMOUSEOUT=rollover5.src="YMCA/givinglink.jpg">
<img src="ymca/givinglink.jpg" name="rollover5" width="86" height="28" border="0"></a>
<img src="images/nav_line.gif" width="1" height="25">

<!-ABOUT US->        
<a href="http://www24.brinkster.com/mattphat/ymcaaboutus.html" ONMOUSEOVER=rollover6.src="YMCA/aboutuslinks2.jpg"  ONMOUSEOUT=rollover6.src="YMCA/aboutuslinks.jpg">
<img src="ymca/aboutuslinks.jpg" name="rollover6" width="104" height="28" border="0"></a>

<img src="ymca/miniY.jpg"></img>
</div>
</td>
</tr>
<!--- --- DONE LINKS --- --->



<!--- --- BOTTOM RED BAR --- --->
<tr align="left" valign="top" bgcolor="#A93333">
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="3">
</td>
</tr>
<!--- --- DONE BOTTOM RED BAR --- --->



<!--- --- BODY TEXT SECTION --- --->
<td align="left" valign="top" bgcolor="#FFFFFF">
<center>
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P><s>FIX BACKGROUND *DONE*</s>
<P>NEW STRONG KDIS .GIF
<P><s>TOP BAR LINK IMAGES  *DONE*</s>
<P><s>NEW LOGO / HEADER BAR  *DONE*</s>
<P>SEE ABOUT NEW COLORS FOR LINK ROLLOVERS
<P>LEFT SIDE LINKS FOR EACH PAGE
<P>COPYRIGHT INFO AND REGULAR LINKS AT BOTTOM OF PAGE
<P>YMCA YMCA YMCA YMCA YMCA YMCA
<P>YMCA YMCA YMCA YMCA YMCA YMCA
</center>
<br>
<br>
<center>
<a href="">Home</a>  |  
<a href="">Torrington</a>  |  
<a href="">Winsted</a>  |  
<a href="">Cannan</a>   |  
<a href="">Giving</a>   |  
<a href="">About Us</a>
<br>
2009 Northwest Connecticut YMCA. 
<br>
The YMCA is a 501(c)(3) not-for-profit social services organization dedicated to
<br>
 building strong kids, strong families and strong communities. 
</center>
<!--- --- DONE BODY TEXT SECTION --- --->
</div>
</body>
</html>

Background Image Help

Similar Tutorials

View Content

HI,
I have a main div for my page which I'm going to put background image for the whole page but the problem is when I write background-image in a style ,The image display below other divs and most of the part of the image does not show.how can I bring the image on the front?
I hope it's clear.

Thanks

100% Height Div W/ Background!

Similar Tutorials

View Content

Since I began doing CSS layouts instead of tables last year, it seems like every single site I do I run into the same problem -- getting a div to stretch to 100% height. I find the solution to it, it works; then when I try the exact same solution for the next site I do, it refuses to work properly. It's very frustrating how such a simple concept can be so hard to do...

http:// www. pinstripepresentations.com/stephanie/residential.php

There are two divs -- left column and right column -- within a page_wrapper div. I need the right column div and it's background to always be 100% height and touch the top and bottom of the window. But right now it only stretches to the window viewable area and doesn't continue when you scroll.

I've included all the parent height commands. I've been fighting with this dang thing for a whole day and I'm not sure what else to try. Please help!

Background Color Help!

Similar Tutorials

View Content

Hey Guys!

I'm going absolutely bonkers trying to find out how to change the color of the background of a certain element on my site. I installed Vanilla forums on my site and am trying to customize the css script.

If you look at the page, you will see an annoying white in the body. I am trying to make the background of that #F6F6F2. Could you guys possibly put me in the right direction?

Thanks!

Here is a link to my page:
shipswatchdotcom/forum/vanilla/aaa.html

Here is the css script:
Code:

#Body {
	margin: 0;
	width: 99.9%;
	position: relative;
	background: #F6F6F2;

}
#Head {
	background: #B8D4B8;
	padding:0;
	margin: 20px 20px 0;
	text-align: left;
	position: relative;
}
div.Popup h1,
div.Popup h2,
div.Connect h1,
div.Connect h2 {
	background: #F6F6F2;
	border-bottom: 1px solid #3b5998;
}
.Banner {
	padding: 10px;
	text-align: left;
	position: relative;
	background: #F6F6F2;
}
.Banner ul {
	background: #B8D4B8;
	padding: 0;
	margin: 0;
}
.Banner ul li {
	display: inline;
	padding: 0;
	margin: 0;
}
.Banner ul li a {
	font-weight: bold;
	padding: 3px 6px;
	font-size: 11px;
	color: #336633;
	display: inline-block;
}
.Banner ul li a:hover {
	background: #E5F0E5;
}
.Banner ul li a.SignOut {
	font-weight: normal;
	position: absolute;
	top: 10px;
	right: 10px;
}
.Banner ul li a span {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 1px 2px 0 1px;
	background: #F6F6F2;
	border-right: 1px solid #F6F6F2;
	border-bottom: 1px solid #F6F6F2;
	color: #F6F6F2;
	font-size: 9px;
	position: relative;
	top: -3px;
}
#Content {
	float: none;
	width: auto;
	margin: 0 280px 0 10px;
	background: #F6F6F2;
}
#Panel {
	float: right;
	margin-right: 10px;
	background: #F6F6F2;
}
#Panel div.SearchBox input.InputBox {
	width: 200px;
	margin-right: 4px;
	background: #F6F6F2;
}
div.SearchBox {
	margin-bottom: 6px;
}
body.Profile div.SearchBox {
	display: none;
}
body.Profile #Content {
	float:none;
	width: auto;
	margin: 0 10px 0 280px;
	background: #F6F6F2;
}
body.Profile #Panel {
	margin: 0 0 0 10px;
	background: #F6F6F2;
}
form.Activity textarea {
	width:99%;
	background: #F6F6F2;
}
#Foot div {
	width: auto;
	background: #F6F6F2;
}
body.Post #Content {
	width: auto;
	margin:0 20px;
	background: #F6F6F2;
}
#ConversationForm textarea.MultiComplete,
#ConversationForm .TextBox,
#MessageForm textarea,
div.Comment div.CommentForm,
div.Comment div.CommentForm textarea,
div.CommentForm textarea,
#DiscussionForm input.InputBox,
#DiscussionForm textarea {
	width:99%;
	background: #F6F6F2;
}
#ConversationForm form {
	border: none;
}
div.Preview div.Message,
ul.MessageList div.Message {
	clear: none;
}
#DiscussionForm form {
	background: #F6F6F2;
	border: 1px solid #ccc;
}
div.MessageForm,
div.Tabs {
	background: #F6F6F2;
	border-bottom:1px solid #ccc;
}

/* Tabs */
div.Tabs {
	background: #F6F6F2;
	padding: 0;
	border-bottom: 1px solid #aaa;
}
div.Tabs ul {
	padding: 0 8px;
	white-space: nowrap;
}
div.MessageForm {
	padding: 8px 8px 5px;
}
div.MessageForm div.Tabs {
	padding: 0 8px;
}
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
	font-size: 11px;
   margin: 0;
   border: none;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   background: #F6F6F2;
   color: #336633;
   text-decoration: none;
   padding: 8px 10px;
	line-height: 11px;
}
div.Tabs li a:hover {
   text-decoration: underline;
}
a.Active,
div.Tabs li.Active a {
   background: #F6F6F2;
   color: #336633;
   margin: 0;
   border: 1px solid #aaa;
	border-bottom: none;
   border-radius: 3px 3px 0 0;
   -moz-border-radius: 3px 3px 0 0;
   -webkit-border-radius: 3px 3px 0 0;
   display: inline-block;
	font-size: 12px;
	line-height: 12px;
   font-weight: bold;
   text-decoration: none;
   padding: 6px 10px;
	position: relative;
	top: 1px;
}
div.Tabs li a span {
   line-height: 1;
   font-size: 80%;
   padding: 0 3px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   font-weight: normal;
	background: #F6F6F2;
   color: #4A7023;
   margin: 0 0 0 4px;
}
div.DiscussionsTabs div.SubTab {
	font-size: 11px;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-top: 1px solid #aaa;
	background: #F6F6F2;
	margin:0;
	padding:4px 8px;
}
div.HeadingTabs ul {
	margin: 8px 0 0;
}
body.Discussion a.Bookmark {
	margin: 6px 2px;
}
div.Preview {
	border: 1px solid #aaa;
	background: #F6F6F2;
	margin:0 0 8px;
	padding: 8px;
}
.Foot {
	background: #F6F6F2;
	border: none;
}
div.MorePager a,
div.MorePager a:link,
div.MorePager a:visited,
div.MorePager a:active,
div.MorePager a:hover {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	background: #F6F6F2;
	border: none;
	color: #4A7023;
	line-height: 1;
	padding: 0;
	text-decoration: none;	
}
div.MorePager a:hover {
	color: #4A7023;
	text-decoration: underline;
}
body.add #Content {
	margin: 0 10px;
	background: #F6F6F2;
}

/* Panel Boxes */
#Panel div.Box {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background: #F6F6F2;
	padding: 0;
}
div.Box h4 {
	color: #4A7023;
}
ul.PanelActivity,
ul.PanelInfo {
	border-top:1px solid #ccc;
}
ul.PanelActivity li,
ul.PanelInfo li,
ul.PanelInfo li.Active {
	background: #F6F6F2;
	border-bottom: 1px solid #ccc;
}
ul.PanelInfo li.Active {
	background: #F6F6F2;
}
#Status {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	background: #eee;
	color: #000;
	line-height: 1.6;
	padding: 3px 6px;
	margin: 0 0 8px;
}
body.Profile ul.PanelInfo {
	border: #F6F6F2;
}
body.Profile ul.PanelInfo li {
	margin: 0;
	padding: 0;
}
body.Profile ul.PanelInfo li a {
	font-size: 12px;
	display: block;
	padding: 0 6px;
	background: #F6F6F2;
}
body.Profile ul.PanelInfo li a:hover {
	background: #F6F6F2;
}

/* Sign In Page */
body.Entry #Content {
	text-align: center;
	margin: 0 auto !important;
}
body.Entry #Content div.Box {
	background: #F6F6F2;
	border: 0;
}
div.Methods {
	border-left: 1px solid #ccc;
}

/* Messages */
div.DismissMessage {
	background: #F6F6F2;
	border: 1px solid #ccc;
	padding:6px 8px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
div.DismissMessage a.Dismiss:hover {
	color: #000;
}
div.Warning {
	background: #d00;
	border: 1px solid #b00;
	color: #F6F6F2;
	text-shadow: 1px 1px 1px #444;
}
div.Warning a.Dismiss {
	color: #F6F6F2;
}
#Content div.Box {
	color: #000;
	background: #F6F6F2;
	border: 1px solid #F6F6F2;
}
body#dashboard_entrycontroller_signin div.Box {
	border: none;
}
/* Autocomplete */
.ac_results {
   border: 1px solid #d7d8da;
	color: #000;
   border-top: 0;
   background-color: #F6F6F2;
}
.ac_results li {
   border-bottom: 1px solid #d7d8da;
}
.ac_lastitem {
   border-bottom: 0 !important;
}
.ac_results strong {
   background: #F6F6F2;
}
.ac_over strong {
   background: #F6F6F2;
}
.ac_over {
   background: #3b5998;
   color: #fff;

}

Background Error

Similar Tutorials

View Content

I'm working on a project right now using multiple panels on a site. The idea I am moving forward with has a panel of a solid color with a small 15x15 image in 3 of the corners.

I have the basic concept down of staticly moving an image to the three corners, but when I then assign a background color to the container it does not fill the space between the images, only the center. Any ideas/direction would be great!

Code:

<div id ="filterDIV" style = "background-color: #666666;">
	<div style="position:absolute; top:0;right:0; width:15px; height:15px; background-image:url(tr.gif);  float:left"></div>
	<div style="position:absolute; bottom:0;left:0; width:15px; height:15px; background-image:url(bl.gif);  float:left"></div>
	<div style="position:absolute; bottom:0;right:0; width:15px; height:15px; background-image:url(br.gif);  float:left"></div>
	test
</div>

Background Ff Issue

Similar Tutorials

View Content

Hi,

Usual story, ive got the site working great in IE but FF has a little problem with the white background. Its like the content isnt actually inside the inside div:

(school section example)
<div id="new_outside_school"> - the colour box
<div id="new_inside_school"> - the white centre

LINK TO SITE HERE

ive been messing and got the 'our school' section slightly better but its still not right, any ideas?

Thanks. Mike