-
Background Image Issue in IE8
Hello,
I’ve created a web page with a background image behind the main content. I want the image to be positioned in the lower right corner of the box and have indicated “right bottom” in the CSS relating the background-position. It looks fine in FF, but the image gets cut off at the bottom in IE8.
https://www.celebratepartyshowcase.com/test/new_home.html
CSS is below. Thanks in advance!!
Best,
Shweta Shyamani@charset “utf-8”;
body {
background-image:url(images/pink_gray.gif);
margin: 0; /* it’s good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #444;
background-color: #666666;
background-repeat: repeat;
font-family: Futura, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
line-height: 1.9em;
}
#container {
background:#FFF;
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
margin: 25px auto;
text-align: left; /* this overrides the text-align: center on the body element. */
background-repeat: no-repeat;
}
h1, h2, h3, h4, p {
font-family: Futura, Arial, Helvetica, sans-serif;
text-align: center;
}
#header {
padding: 10px 10px 20px 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
border-bottom-style: dotted;
border-bottom-color: #000;
border-bottom-width: medium;
background-color: #ffffff;
background-repeat: no-repeat;
background-image: url(images/rounded_header.gif);
background-position: top;
}
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse – an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 128px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 3px;
background-color: #E2E2E2;
border-right: dotted;
border-right-color:#000;
border-right-width: medium;
}
#sidebar1 img {
margin: 1px 0;
}
#mainContent {
margin: 0 0 -30px 0;
padding: 0 20px 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
width: 602px;
float: right;
background-image: url(images/main_box_swirl.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#footer {
clear:both;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
border-top-width: medium;
border-top-style: dotted;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000;
background-image: url(images/rounded_footer.gif);
background-repeat: no-repeat;
background-position: center bottom;
background-color: #FFFFFF;
}
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse – a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
text-align: center;
font-size: .8em;
color:#444;
line-height: 1.4em;
}
#footer a, a:visited {
text-decoration: none;
color: #444;
}
#footer a:hover {
color: #F09;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.bannerText {
text-align: center;
color: #555;
height: 40px;
margin: 0px -20px;
padding: 5px 0px;
font-weight: bold;
font-size: 1.0em;
line-height: 1.4em;
border-bottom-width: medium;
border-bottom-style: dotted;
border-bottom-color: #F09;
}
.text {
font-family:Futura, Arial, Helvetica, sans-serif;
color: #333;
font-size: .8em;
text-align: center;
line-height: 1.3em;
} -
7 Replies
-
It looks fine in FF and IE8 on Vista 64.
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
-
Thanks you for checking! Glad to hear it renders properly somewhere 😉
I’m using Vista Home and it’s adding some additional space at the bottom of the pink background graphic behind main text and also adding additional margin above the first graphic on the left sidebar menu. Any ideas on a possible fix for IE on non Vista-64 machines? Sorry, I’ve tried everything I can possibly think of (clearing floats, positioning the background with a Y value, negative bottom margins…) 🙁
Thanks so much,
Shweta -
Look for the problem in your #sidebar1 IMG rule. I guess it’s there.
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
-
Thank you so much for taking a second look. I deleted that rule and it’s still happening in IE 🙁 Will browsers ever be standardized so we don’t have to deal with such hiccups?
-
Try aligning your image to the bottom right and, if you need to, add a white background color to your footer.
I hope this helps
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
-
Thanks – I did have all that in the code already and it’s still not working. On the plus side I found a conditional CSS style for IE that DW automatically added which was adding additional padding at the top of the sidebar. When I removed it it helped with the background issue, but the background graphic still isn’t lining up exactly at the bottom.
Thanks for all your great suggestions and assistance!
Shweta -
I met the same problem that IE8 doesn’t position the “left bottom” background image correctly.
I found a solution. Instead of “background-position:left bottom”, use “background-position:left 97%” and that works.
To see all my CSS codes about this issue, visit https://www.menubasic.com/Menu/Javascript-CSS-Menus.aspx?menu=50&skin=3&p=1 and click the CSS link on that page.
Reply to this Discussion! Login or Sign Up