CSS - Background Image In Ie Not Displayed Properly

I have a site I am creating in Joomla - I'm not getting help from them, so maybe it's just a css problem that I can't figure out.

Here's the css because I'm not allowed to post the url

/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {art
margin: 0;
padding: 0;
background-color: #B8E700;
background-image: none;
text-align: center;

}

body {

font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
text-align: center;
}


body.contentpane {
width: auto; /* Printable Page */
margin: 1em 2em;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;

}

body.fs1 {
font-size: 10px;
}

body.fs2{
font-size: 11px;
}

body.fs3{
font-size: 12px;
}

body.fs4{
font-size: 13px;
}

body.fs5{
font-size: 14px;
}

body.fs6{
font-size: 15px;
}

/* Normal link */
a {
color: #006699;
text-decoration: underline;
}

a:hover, a:active, a:focus {
color: #333333;
text-decoration: underline;
}

/* Heading */
h1 {
font-size: 180%;
}

h2 {
font-size: 150%;
}

h3 {
font-size: 125%;
}

h4 {
font-size: 100%;
text-transform: uppercase;
}

ul {
list-style: none;
}

ul li {
padding-left: 30px;
background: url(../images/bullet.gif) no-repeat 18px 8px;
line-height: 180%;
}

ol li {
margin-left: 35px;
line-height: 180%;
}

th {
padding: 5px;
font-weight: bold;
text-align: left;
}
img {
border: none;
}



/* Note Style */
p.stickynote {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF;
}

p.download {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF;
}

.blocknumber {
clear: both;
padding: 5px 15px 10px;
position: relative;
}

/* Check list */
ul.checklist {
list-style: none;
}

ul.checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/checklist-bg.gif) no-repeat 0 3px;
}

/* Small checklist */
ul.small-checklist {
list-style: none;
}

ul.small-checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/icon_list.gif) no-repeat 0 3px;
}

/* Check list */
ul.stars {
list-style: none;
}

ul.stars li {
margin-left: 15px;
padding: 0px 0 5px 20px;
background: url(../images/star-bg.gif) no-repeat 0 3px;
}

/* Bignumber */
.bignumber {
float: left;
margin-right: 8px;
padding: 6px 7px;
display: block;
background: url(../images/ol-bg.gif) no-repeat top left;
color: #7BA566;
font: bold 20px/normal Arial, sans-serif;
}

/* Talking box. Thinking box. */
div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
margin: 15px 0;
}

div.bubble1 span.author,
div.bubble2 span.author,
div.bubble3 span.author,
div.bubble4 span.author {
padding-left: 15px;
margin-left: 15px;
background: url(../images/author.gif) no-repeat center left;
font-weight: bold;
}

div.bubble1 div {
margin: 0;
width: 100%;
background: url(../images/bub1-br.gif) no-repeat bottom right;
}

div.bubble1 div div {
background: url(../images/bub1-bl.gif) no-repeat bottom left;
}

div.bubble1 div div div {
background: url(../images/bub1-tr.gif) no-repeat top right;
}

div.bubble1 div div div div {
background: url(../images/bub1-tl.gif) no-repeat top left;
}

div.bubble1 div div div div div {
margin: 0;
padding: 15px 15px 30px 15px;
width: auto;
}

div.bubble2 div {
margin: 0;
width: 100%;
background: url(../images/bub2-br.gif) no-repeat bottom right;
}

div.bubble2 div div {
background: url(../images/bub2-bl.gif) no-repeat bottom left;
}

div.bubble2 div div div {
background: url(../images/bub2-tr.gif) no-repeat top right;
}

div.bubble2 div div div div {
background: url(../images/bub2-tl.gif) no-repeat top left;
}

div.bubble2 div div div div div {
margin: 0;
padding: 15px 15px 35px 15px;
width: auto;
}

div.bubble3 div {
margin: 0;
width: 100%;
background: url(../images/bub3-br.gif) no-repeat bottom right;
}

div.bubble3 div div {
background: url(../images/bub3-bl.gif) no-repeat bottom left;
}

div.bubble3 div div div {
background: url(../images/bub3-tr.gif) no-repeat top right;
}

div.bubble3 div div div div {
background: url(../images/bub3-tl.gif) no-repeat top left;
}

div.bubble3 div div div div div {
margin: 0;
padding: 15px 15px 50px 15px;
width: auto;
}

div.bubble4 div {
margin: 0;
width: 100%;
background: url(../images/bub4-br.gif) no-repeat bottom right;
}

div.bubble4 div div {
background: url(../images/bub4-bl.gif) no-repeat bottom left;
}

div.bubble4 div div div {
background: url(../images/bub4-tr.gif) no-repeat top right;
}

div.bubble4 div div div div {
background: url(../images/bub4-tl.gif) no-repeat top left;
}

div.bubble4 div div div div div {
margin: 0;
padding: 15px 15px 55px 15px;
width: auto;
}

/* Legend */
.legend-title {
margin: 0;
padding: 0 3px;
float: left;
display: block;
background: #B8E700;
font-weight: bold;

top: -10px;
left: 7px;
}

.legend {
margin: 20px 0;
padding: 0 10px;
border: 1px solid #CACACC;
background: #FFFFFF;
position: relative;
}

/* JOOMLA STYLE
--------------------------------------------------------- */
.article_separator {
clear: both;
display: block;
height: 20px;
}

.column_separator {
padding: 0 25px;
}

/* content tables */
td.sectiontableheader {
padding: 4px;
border-right: 1px solid #fff;
}

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

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

table.contentpane {
border: none;
width: 100%;
}

table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}

table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 35%;
float: right;
}

table.contenttoc a {
text-decoration: none;
}

table.contenttoc td {
padding: 1px 5px 1px 25px;
background: url(../images/bullet-list.gif) no-repeat 5% 50%;
}

table.contenttoc th {
padding: 0 0 3PX;
border-bottom: 1px solid #CCCCCC;
text-indent: 5px;
}

table.poll {
padding: 0;
width: 100%;
border-collapse: collapse;
}

table.pollstableborder {
padding: 0;
width: 100%;
border: none;
text-align: left;
}

table.pollstableborder img {
vertical-align: baseline;
}

table.pollstableborder td {
padding: 4px!important;
border-collapse: collapse;
border-spacing: 0;
}

table.pollstableborder tr.sectiontableentry1 td {
background: #ECECEC;
}

table.searchintro {
padding: 10px 0;
width: 100%;
}

table.searchintro td {
padding: 5px!important;
}

table.adminform {
}

.adminform .inputbox {
}

.blog_more {
padding: 10px 0;

}

.blog_more strong {
margin: 0 0 5px;
display: block;
font-size: 125%;
}

.blog_more ul {
margin: 0;
padding: 0;
}

.blog_more ul li {
margin: 0;
padding: 0 0 0 17px;
background: url(../images/bullet.gif) no-repeat 6px 8px;
}

.category {
font-weight: bold;
}

h1.componentheading, .componentheading {
padding: 5px 0 15px;
margin: 0 0 10px;

}

.componentheading {
font-size: 200%;
font-weight: bold;
}

.contentdescription {
padding-bottom: 30px;
}

h2.contentheading, .contentheading {
padding: 5px 0 8px;
margin: 0;
font-weight: normal;
}

table.blog .contentheading {
font-size: 150%;
}

.contentheading {
font-size: 200%;
}

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
text-decoration: none !important;
}

a.readon {
float: left;
margin-top: 10px;
padding: 1px 5px 1px 14px;
border: 1px solid #B8E700;
display: block;
background: url(../images/arrow.png) no-repeat 5px 48%;
color: #006699;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}

a.readon:hover, a.readon:active, a.readon:focus {
border: 1px solid #ECECEC;
background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF;
}

table.contentpaneopen td, table.contentpane td {
}

table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
}

.moduletable {
padding: 0;
}

ul.pagination {
margin: 15px auto;
padding: 10px 0;

}

ul.pagination li {
margin: 0;
padding: 0;
display: inline;
background: none;
}

ul.pagination li span{
padding: 2px 5px;
}

ul.pagination a {
padding: 2px 5px;
border: 1px solid #B8E700;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
border: 1px solid #ECECEC;
background: #FFFFFF;
}

.pagenavbar {
padding-left: 14px;
}

.pagenavcounter {
padding: 8px 14px 0 14px;
}

.sectiontableheader {
padding: 8px 5px;
background: #444444;
color: #FFFFFF;
}

.sectiontableheader a {
color: #FFFFFF;
}

tr.sectiontableentry1 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom;
}

tr.sectiontableentry2 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom #ECECEC;
}

tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC;
}

.smalldark {
text-align: left;
}

div.syndicate div {
text-align: center;
}

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
background: none;
}

/* META
--------------------------------------------------------- */
.article-tools {
border-top: 1px solid #DDDDDD;
width: 100%;
float: left;
clear: both;
margin-bottom: 15px;
display: block;
background: #ECECEC;
}

.article-meta {
padding: 5px;
width: 80%;
float: left;
}

.createby {
padding: 3px 3px 3px 20px;
background: url(../images/icon-user.gif) no-repeat 0 2px;
}

.createdate {
padding: 3px 3px 3px 20px;
background: url(../images/icon-date.gif) no-repeat 0 2px;
}

.modifydate {
width: 100%;
float: left;
}

div.buttonheading {
float: right;
width: 15%;
}

.buttonheading img {
margin: 7px 5px 0 0;
border: 0;
float: right;
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper {
width: 100%;
margin: 0;

}

#ja-container2 {
padding: 20px 0;
background: url(../images/c-bg2.gif) no-repeat 18% 0;
}

#ja-mainbody-fr #ja-col1 {
width: 20%;
}

#ja-mainbody-fr #ja-contentwrap {
width: 80%;
}

#ja-mainbody, #ja-mainbody-fl {
float: left;
width: 80%;
}

#ja-mainbody #ja-contentwrap {
float: right;
width: 75%;
}

#ja-mainbody-fl #ja-contentwrap {
float: left;
width: 100%;
}

#ja-mainbody-f, #ja-mainbody-fr {
float: none;
width: 100%;
}

#ja-mainbody-fr #ja-contentwrap {
width: 74.8%;
float: right;
}

#ja-mainbody-fr #ja-col1 {
width: 20%;
float: left;
}

#ja-mainbody-fr #ja-contentwrap {
width: 80%;
}

#ja-content {
padding: 60px 20px 0 40px;
}
#ja-contentwrap {
min-height: 300px;
height: auto;
}
* html #ja-contentwrap {
height: 300px;
}
#ja-mainbody-fl #ja-content {
padding-left: 0;
}

#ja-mainbody-f #ja-content {
padding: 0;
}

/* Full */

#ja-containerwrap-f #ja-containerwrap2 {
background: none;
}

#ja-containerwrap-f #ja-container,
#ja-containerwrap-f #ja-container2 {
background: none;
}

/* Full left */

#ja-containerwrap-fl #ja-containerwrap2,
#ja-containerwrap-fl #ja-container,
#ja-containerwrap-fl #ja-container2 {
background: none;
}


/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
color: #76C900;
line-height: normal;
height: 80px;
}

#ja-header {
position: fixed;
height: 80px;
color: #76C900;
}

.ja-headermask {
width: 602px;
display: block;
color: #76C900;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #76C900;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}

/* Search */
#ja-search {

bottom: 15px;
position: absolute;
top:40px;
left:750px;
height:25px
}

#ja-search .inputbox
{
width:120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;

font-size: 92%;

}

/* MAIN NAVIGATION
--------------------------------------------------------- */

#ja-pathway {
font-size: 92%;
}

#ja-pathway strong {
margin-right: 5px;
font-weight: normal;
}

#ja-pathway a {
text-decoration: none;
}

#ja-pathway img {
margin: 1px 5px;
}

/* MODULE
--------------------------------------------------------- */
div.moduletable,
div.moduletable_menu,
div.moduletable_text {
padding: 0 0 20px;
margin-bottom: 15px;

}

div.moduletable h3,
div.moduletable_menu h3,
div.moduletable_text h3 {
padding: 0 0 8px;
margin: 0;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

/* Module rounded */
div.module h3 {
margin: 0 -15px 10px;
padding: 8px 15px 5px;
border-bottom: 2px solid #B8E700;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

div.module_black,
div.module_green,
div.module_blue,
div.module_red,
div.module {
margin-bottom: 20px;
float: left;
clear: both;
width: 100%;
background: url(../images/b-br.gif) no-repeat bottom right #FFFFFF;
}

div.module div {
background: url(../images/b-bl.gif) no-repeat bottom left;
}

div.module div div {
background: url(../images/b-tr.gif) no-repeat top right;
}

div.module div div div {
padding: 0 15px 10px;
background: url(../images/b-tl.gif) no-repeat top left;
}

div.module_black div div div div,
div.module_green div div div div,
div.module_blue div div div div,
div.module_red div div div div,
div.module_text div div div div,
div.module div div div div {
margin: 0;
padding: 0;
float: none;
width: 99%;
background: none;
}

div.module_text h3 {
margin: 0 0 10px;
width: 100%;
clear: both;
display: block;
overflow: hidden;
}

div.module_text span {
padding: 0 3px 0 0;
float: left;
clear: both;
display: block;
background: #B8E700;
font-weight: bold;
}

div.module_text {
margin-bottom: 20px;
padding: 0;
float: left;
clear: both;
width: 100%;
background: url(../images/bt-br.gif) no-repeat bottom right #B8E700;
}

div.module_text div {
background: url(../images/bt-bl.gif) no-repeat bottom left;
}

div.module_text div div {
background: url(../images/bt-tr.gif) no-repeat top right;
}

div.module_text div div div {
padding: 0 15px 10px;
display: block;
background: url(../images/bt-tl.gif) no-repeat top left;
}

div.banneritem_text {
padding: 5px 0 !important;
}




/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}

.ja-box-left div.moduletable,
.ja-box-full div.moduletable {
padding-right: 30px;
background: none;
}

.ja-box-right div.moduletable {
padding-left: 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

.ja-box-center div.moduletable {
padding: 0 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

#ja-botsl h3 {
background: none;
}

#ja-botslwrap {
background: #B8E700;
color: #B8E700;
}

#ja-botsl {
padding: 15px 0;
}

#ja-botsl div.moduletable {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}

#ja-botsl h3 {
margin: 0 0 12px;
padding: 0;
color: #FFFFFF;
}

#ja-botsl a {
color: #B8E700;
}

#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
color: #FFFFFF;
}

#ja-botsl ul, #ja-botsl p, #ja-botsl ol {
padding: 0;
margin: 0 !important;
}

#ja-botsl ul li {
padding: 0 0 0 15px;
margin: 0;
background: url(../images/bullet2.gif) no-repeat 3px 8px;
}

#ja-botsl ol li {
margin-left: 25px;
padding: 0 !important;
}

#ja-botsl td {
padding: 0;
}

#ja-botsl .article_separator {
display: none;
}

#ja-botsl table {
border-spacing: 0;
border-collapse: collapse;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footerwrap {
padding: 5px 0 30px;
}

#ja-footer {
padding: 0;
color: #B8E700;
}

#ja-footer .copyright {

display: block;
color: #B8E700;
font-style: normal;
font-size: 92%;
}

#ja-footer ul {
margin: 0 0 5px;
padding: 0;
}

#ja-footer li {
margin: 0;
padding: 0;
display: inline;
background: none;
}

#ja-footer li a {
display: inline;
color: #666666;
padding: 0 15px 0 0;
font-weight: bold;
font-size: 92%;
line-height: normal;
text-decoration: none;
text-transform: uppercase;
}

#ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus {
color: #333333;
text-decoration: none;
}

.ja-cert {
font-size: 92%;
top: 18px;
}

.ja-cert a {
margin: 0 0 0 5px;
padding: 0;
border: none;
border: none;
text-decoration: none;
}

.ja-cert a span {
display: none;
}

.ja-cert a img {
border: none;
}

.banneritem {
display: block;
margin-top: 15px;
}

/* MISCELLANOUS
----------------------------------------------------------- */
ul.accessibility {
position: absolute;
top: -100%;
}

/*usertool*/
ul.ja-usertools-font {
font-size: 11px;
position: absolute;
top: 8px;
right: 70px;
}

ul.ja-usertools-font li {
padding: 0;
margin: 0;
display: inline;
background: none;
}

/*collapsible h3*/
h3.show {
background: url(../images/arrow2.png) no-repeat 90% 60%;
cursor: pointer;
}

h3.hide {
background: url(../images/arrow3.png) no-repeat 90% 60%;
cursor: pointer;
}

/*others*/
#ja-banner {
margin: 15px 0;
text-align: center;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active {
margin: 10px 0;
display: block;
background: none!important;
text-decoration: none!important;
}

#form-login p {
margin: 0 0 5px;
}

#form-login ul {
margin: 10px 0 0;
}

#form-login .inputbox {
width: 90%;
}

.clr {
clear: both;
}

.hasTip img {
margin: 10px 5px 0 0;
border: none;
}

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

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

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

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul {
padding: 0;
margin: 0;
}

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
background: none;
padding: 5px;
margin: 0;
color: #FFFFFF;
}

/* System Standard Messages */
#system-message dd.message ul {
background: #006699;
border: none;
}

/* System Error Messages */
#system-message dd.error ul {
background: #BF0000;
border: none;
}

/* System Notice Messages */
#system-message dd.notice ul {
background: #EE9600;
border: none;
}

/* Clearfix */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

* html > body .clearfix {
width: 100%;
display: block;
}

* html .clearfix {
height: 1%;
}

/* Firefox Scrollbar Hack - Do not remove */
html {
margin-bottom: 1px;
height: 100%!important;
height: auto;
}

#Table_01
{
left:0px;
top:0px;
width:950px;
overflow: hidden;
}


#top01 {
position:fixed;
left:0px;
top:0px;
width:248px;
height:68px;
background: url(../../../images/top01.jpg);
background-repeat:no-repeat;


}

#logo {
position:fixed;
left:248px;
top:0px;
width:89px;
height:68px;
background:url(../../../images/logo.jpg);
background-repeat:no-repeat;
}

#top02 {
position:fixed;
left:337px;
top:0px;
width:312px;
height:68px;
background:url(../../../images/top02.jpg);
background-repeat:no-repeat;
}

#index-04 {
position:fixed;
left:649px;
top:0px;
width:301px;
height:74px;
background:url(../../../images/index_04.jpg);
background-repeat:no-repeat;
}

#top03 {
position:fixed;
left:0px;
top:68px;
width:297px;
height:168px;
background:url(../../../images/top03.jpg);
background-repeat:no-repeat;
}

#index-06 {
position:fixed;
left:297px;
top:68px;
width:352px;
height:6px;
background:url(../../../images/index_06.jpg);
background-repeat:no-repeat;
}

#index-07 {
position:fixed;
left:297px;
top:74px;
width:288px;
height:172px;
background:url(../../../images/index_07.jpg);
background-repeat:no-repeat;
}

#top04 {
position:fixed;
left:585px;
top:74px;
width:317px;
height:165px;
background:url(../../../images/top04.jpg);
background-repeat:no-repeat;
}

#index-09 {
position:fixed;
left:902px;
top:74px;
width:48px;
height:172px;
background:url(../../../images/index_09.jpg);
}

#index-10 {
position:fixed;
left:0px;
top:236px;
width:297px;
height:10px;
background:url(../../../images/index_10.jpg);
}

#index-11 {
position:fixed;
left:585px;
top:239px;
width:317px;
height:7px;
background:url(../../../images/index_11.jpg);
}

#index-12 {
position:fixed;
left:0px;
top:246px;
width:1px;
height:33px;
background:url(../../../images/index_12.jpg);
}

#index-13 {
position:fixed;
left:1px;
top:246px;
width:949px;
height:28px;
background:url(../../../images/index_13.jpg);
}

#bottom01 {

left:0px;
top:653px;
width:950px;
height:32px;
background:url(../../../images/bottom01.jpg);
}


#othersunnypages-14
{
background:url(../../../images/othersunnypages_14.jpg);
position:fixed;
top:247px;
left: 1px;
width: 949px;
height: 5px;
}

#othersunnypages-15
{
background-image:url(../../../images/othersunnypages_15.jpg);
position:fixed;
top:279px;
width:152px;
height:142px;
}

#othersunnypages-16
{
background-image:url(../../../images/othersunnypages_16.jpg);
position:fixed;
top:279px;
left: 152px;
width: 798px;
height: 41px;
}

#othersunnypages-17
{
background-image:url(../../../images/othersunnypages_17.jpg);
position:fixed;
top:320px;
left: 152px;
width:510px;
height:23px;
}

#othersunnypages-18 {
background-image:url(../../../images/othersunnypages_18.jpg);
position:fixed;
top:320px;
left: 662px;
width:33px;
height:23px;

}

#othersunnypages-19 {
background-image:url(../../../images/othersunnypages_19.jpg);
position:fixed;
top:320px;
left: 695px;
width:203px;
height:23px;

}

#othersunnypages-20
{
background-image:url(../../../images/othersunnypages_20.jpg);
position:fixed;
top:320px;
left:898px;
width:52px;
height:23px;
}

#othersunnypages-21 {
background-image:url(../../../images/othersunnypages_21.jpg);
position:fixed;
top:343px;
left: 152px;
width:504px;
height:24px;
}

#othersunnypages-22 {
background-image:url(../../../images/othersunnypages_22.jpg);
position:fixed;
top:343px;
left: 656px;
width:43px;
height:24px;
}

#othersunnypages-23 {
background-image:url(../../../images/othersunnypages_23.jpg);
position:fixed;
top:343px;
left: 699px;
width:200px;
height:24px;
}

#othersunnypages-24 {
background-image:url(../../../images/othersunnypages_24.jpg);
position:fixed;
top:343px;
left: 899px;
width:51px;
height:24px;
}

#othersunnypages-25 {
background-image: url(../../../images/othersunnypages_25.jpg);
position:fixed;
top: 367px;
left: 152px;
width:504px;
height:54px;
}

#othersunnypages-26 {
background-image:url(../../../images/othersunnypages_26.jpg);
position:fixed;
top:367px;
left: 656px;
width:43px;
height:54px;
}

#othersunnypages-27 {
background-image:url(../../../images/othersunnypages_27.jpg);
position:fixed;
top:367px;
left: 699px;
width:193px;
height:54px;
}

#othersunnypages-28 {
background-image:url(../../../images/othersunnypages_28.jpg);
position:fixed;
top:367px;
left: 892px;
width:58px;
height:54px;
}

#othersunnypages-29 {
background-image:url(../../../images/othersunnypages_29.jpg);
position:fixed;
top:421px;
left: 0px;
width:69px;
height:201px;

}

#othersunnypages-30 {
background-image:url(../../../images/othersunnypages_30.jpg);
position:fixed;
top:421px;
left:69px;
width:587px;
height:201px;
}

#othersunnypages-31 {
background-image:url(../../../images/othersunnypages_31.jpg);

top:421px;
left: 656px;
width:43px;
height:201px;
}

#othersunnypages-32 {
background-image:url(../../../images/othersunnypages_32.jpg);
position:fixed;
top:421px;
left: 699px;
width:193px;
height:201px;
}

#othersunnypages-33 {
background-image: url(../../../images/othersunnypages_33.jpg);
position:fixed;
top:421px;
left: 892px;
width:58px;
height:201px;
}

#othersunnypages-34 {
background-image:url(../../../images/othersunnypages_34.jpg);
position:fixed;
top:622px;
left: 0px;
width:950px;
height:31px;
}


#othersunnypages-36 {
background-image:url(../../../images/othersunnypages_36.jpg);
position:fixed;
top:685px;
left:0px;
width:950px;
height:15px;
}

Hello there.

I tried to display the background color in my navigation, but it wan't work. Works fine in safari. Doesn't work in firefox or IE

Can anyone help?


.navbar {
width: 960px;
line-height: 30px;
background-color: silver;
z-index:100;
display: block;
clear: both;
}

.navbar ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
z-index:100;
}

.navbar ul li {
display: block;
position: relative;
float: left;
width: 120px;
font-weight: bolder;
z-index:100;
}

.navbar li ul {
display: none;
line-height: 20px;
z-index:100;
}

.navbar ul li a {
display: block;
text-decoration: none;
color: #48fc30;
padding: 4px 15px 4px 15px;
background: #silver;
margin-left: 1px;
}

.navbar ul li a signup {
background: #black;
}

.navbar ul li a:hover {
background: #grey;
}


.navbar li:hover ul {
display: block;
position: absolute;
}

.navbar li:hover li {
float: none;
font-size: 11px;
}

.navbar li:hover a {
background: #red;
}

.navbar li:hover li a:hover {
background: #blue;
}

I've got a mostly-css layout he

http://highballsociety.com/~lwco/test.php

Using the following CSS page he

http://highballsociety.com/~lwco/lwc.css

For some reason, the div on the right will not display the off-white background color in IE 6. It looks fine in Firebird and even on IE 5 for Mac. I have a feeling that this has something to do with the fact that I've not done very precise sizing of various divs and haven't really implremented the IE box-model hack for much of the site. Let me know if you can help.

Also, when I force IE to redraw, by moving the page off the screen and back on, or if I hover over the text in the div, it seems to try redrawing the off-white background, but never actually completes.

Thanks,
m__

Hey,
I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg

The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore.

Does anybody know how to fix this?

Thanks in advance.

If you go here

company.com layout

It looks correct in IE or Firefox

But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up.

Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration.

body
{
background: #e3edc2; color: #333;
font: .8em, arial, helvetica, sans-serif;
margin: auto;
padding:0px;

}

Hi,

I'm having an issue with the image not laying out properly.

Please go here http://sixtwentyfour.com/

See how "November's Issue" is overlapping my paragraph background? I want it contained within the paragraphs, not outside. Could someone please point out what I'm doing incorrectly or otherwise lead me in the right direction?

Thanks.

im trying to get the menu tabs to line up properly, if you notice they are slightly floating higher than they should and was stuck in trying to figure out how to fix this.



here is my css code i used:

Code:

a:hover#index, a:hover#search, a:hover#ucp, a:hover#members {
	background: url("./images/home-button.gif") 0 0 no-repeat;
	background: url("./images/design-and-engineering-button.gif") 0 0 no-repeat;
	background: url("./images/how-to-rebuild-button.gif") 0 0 no-repeat;
	background:url("./images/installation-button.gif") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#articles  {
	width: 77px;
	height: 28px;
	float: left;
	

}

a#index {
	background: url("./images/home-gray.gif") 0 0 no-repeat;
}
a#design {
	background: url("./images/design-and-engineering-gray.gif") 0 0 no-repeat;
}
a#howto {
	background: url("./images/how-to-rebuild-gray.gif") 0 0 no-repeat;
}
a#articles {
	background:url("./images/installation-gray.gif") 0 0 no-repeat;
}

I'm working on a website that I'm having issues with in the CSS. I'm fairly new to CSS and I don't know how to get an image banner to show up next to each other. I though with the css in place I could do that, but some how I'm missing where the nav drops down in to the next div which is suppose to be a slideshow type div.

The page is at ukindesigns.com/EBB/ebb.html

and the style sheet can be found at ukindesigns.com/EBB/CSS/style.css

Thanks,

Franky

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.

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.

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

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">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Hi,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!

Hi
I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash?