PDA

View Full Version : background image acting funny in IE 7



finstah1
Nov 27th, 2006, 01:54 PM
hey all,

I have a background image that is positioned bottom right with no-repeat on my page but IE 7 (works fine in other browsers) is showing it overlapped on the same image. Here is a link (http://www.timothysofnewark.com/test/index2.html)

and here is my css code"



html, body{margin: 0; height:99%; background: #003366 url(images/background.gif) no-repeat right bottom; }
/* end hack */

html, body, #wrapper {
border: none;
height: 99%;
font: normal 10pt Arial, Helvetica, sans-serif;
color: black;
margin: 0
width:auto;
}

#wrapper {
/*vertical-align: middle;
width: 770px; */
border: 1px solid #FFCE31;
/* border-bottom: 3px solid #5C86B3;
border-top: 1px solid #5C86B3; */
background: transparent url(images/bgd_all.gif) repeat-y top left;
height: 99%;
}

.menutitle, menutitle a {
cursor: pointer;
font: bold 11px Arial, Helvetica, sans-serif;
letter-spacing: 2px;
margin: 0;
background-color: #003366;
color: #FFF;
width:150px;
padding: 2px;
text-align: right;
border-bottom: 1px solid #90BADE;
text-decoration: none;
}

.menutitle a:hover {
background-color: #62B4D8;
}

/* left nav top menu */
.submenu {
width: 150px;
padding: 0 0 1px 0;
margin-bottom: 1px;
background-color: #003366;
color: #FFF;
font: bold 11px Arial, Helvetica, sans-serif;
}

.submenu ul {
list-style: none;
margin: 0;
border: none;
padding: 0;
width: 154px;
text-align: right;
}

.submenu li {
border-bottom: 1px solid #90BADE;
}

.submenu li a {
display: block;
padding: 5px 5px;
/* border-left: 5px solid #1958b7;
border-right: 5px solid #508fc4; */
border-right: 3px solid #003366;
background-color: #1A6C90; /*7AAAD9;*/
font: normal 10px Arial, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
white-space: nowrap;
}

.submenu li a:hover {
border-right: 3px solid #FFCE31;
background-color: #62B4D8; /*3078BF;*/
color: #FFF;
}

#footer {
background-color: #000;
font: normal 9pt Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
text-decoration: none;
height: 75px;
}


/* added */

/* right nav items */
.rtnavHeader {
font: bold 11px Arial, Helvetica, sans-serif;
color: #FFF;
text-align: left;
}

.rtnavTableResultsHeader {
font: bold 10px Arial, Helvetica, sans-serif;
background-color: #FFFFCC;
}

.rtnavTableResultsData {
font: normal 8pt Arial, Helvetica, sans-serif;
background-color: #FFF;
white-space: nowrap;
}

.upcoming {
font: bold 12pt Arial, Helvetica, sans-serif;
white-space: nowrap;
vertical-align: center;
}

h3, h2 {
color: #1A6C90;
letter-spacing: 1px;
}

.newsTitle {
font: bold 11pt/18px Arial, Helvetica, sans-serif;
color: #000;
}

.newsTitle a {
font: bold 10pt/16px Arial, Helvetica, sans-serif;
color: #62B4D8;
text-decoration: none;
}

.newsTitle a:hover {
text-decoration: underline;
}

.newsTitle a:visited {
color: #CCC;
}

.newsText {
font: normal 10pt Arial, Helvetica, sans-serif;
}

.newsText a {
font: normal 10pt Arial, Helvetica, sans-serif;
color: #62B4D8;
text-decoration: none;
}

.newsText a:hover {
text-decoration: underline;
}

.newsText a:visited {
color: #CCC;
}


Is there a way to get this working in IE 7 correctly that I'm missing?

thanks for any help.

finstah1
Nov 27th, 2006, 04:03 PM
I got it working.

_Aerospace_Eng_
Nov 27th, 2006, 04:38 PM
What was the solution? Others may be having similar problems.

finstah1
Nov 28th, 2006, 09:21 PM
I forgot to add a fixed position for the background:


background-attachment:fixed;