No replies
antorera
Offline
newbie
Barcelona
Last seen: 14 years 49 weeks ago
Barcelona
Joined: 2007-08-13
Posts: 5
Points: 0

Hello,

I haven't been able to figure this one out: a background image in my header wrap does not extend when the right side of the browser is pulled out in IE6. It seems to work in Firefox and Safari.

I admit that my backgrounds are a little complicated on this one, and that may be causing the problem.

I just added a div to contain the whole page, but that didn't seem to help either. Is it usually a good idea to include a page wrapper, or can I do without it? I didn't use one initially since my page is aligned to the top left.

Here's a link to the live page: http://www.anthonybellov.com/test

Here's the CSS (specific image is in bold):

body { color: #515151; font-size: 12px; background-color: #ccc; background-image: url(http://www.anthonybellov.com/images/nav/maincontentbk.gif); background-repeat: repeat-y; background-position: left top; margin: 0; padding: 0; } p { color: #515151; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 180%; } h1 { color: #481180; font-size: 2em; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; font-stretch: ultra-condensed; margin-top: 0; margin-bottom: 24px; border-bottom: 1px solid white; } a:link { color: blue } a:visited { color: purple } a:hover { color: purple } a:active { color: red }

/*Layout Divs*/
#wrapper {
background-color: transparent;
background-image: url(http://www.anthonybellov.com/images/nav/rightsidebk.gif);
background-repeat: repeat-x;
background-position: left top;
width: 818px; margin-top: 0;
margin-bottom: 40px;
}

#header-wrap {
background-image: url(http://www.anthonybellov.com/images/nav/rightsidebk.gif);
background-repeat: repeat-x;
background-position: left top;
width: 100%;
height: 266px;
margin: 0;
padding: 0;
}


#header {
background-image: url(http://www.anthonybellov.com/images/nav/headerbk_half.gif);
background-repeat: no-repeat;
background-position: left top;
width: 818px;
height: 266px;
margin: 0;
}

/*Content-wrapleft contains all elements on left side, including the bottom line image, and padding for bottom.

Content-leftbk contains the white line background.

Content-left is a holder for the image and text to go within the white outlines.*/

#content-wrapleft {
position: relative;
width: 370px;
float: left;
clear: left;
margin: 0;
padding-bottom: 20px;
}
#content-leftbk {
background-image: url(http://www.anthonybellov.com/images/nav/leftsidebk.gif);
background-repeat: repeat-y;
position: relative;
width: 370px;
margin: 0;
padding: 0;
}
#content-left {
text-align: left;
width: 230px;
margin: 0 50px;
padding-top: 10px;
padding-bottom: 20px;
}
#content-wrapright {
text-align: left;
position: relative;
width: 356px;
float: left;
margin: 0;
padding-bottom: 50px;
}
#footer-wrap {
background-color: #a4a4a4;
background-image: url(http://www.anthonybellov.com/images/nav/footerbk.gif);
background-repeat: no-repeat;
background-position: left center;
text-align: left;
position: relative;
width: 100%;
height: 36px;
clear: left;
margin: 0;
padding: 0;
}
#footer-wrap img
{font-size: 0px; }
#footer {
color: #fff;
font-size: 9px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
text-align: left;
vertical-align: bottom;
width: 818px;
height: 36px;
margin: 0;
padding-left: 370px;
vertical-align: middle;
line-height: 36px;
}

/*Navigation styles*/
#navbar {
clear: right;
padding-top: 177px;
padding-left: 300px;
}
ul#navlist {
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
text-align: center;
padding: 0; }

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 70px;
color: #fff;
font-size: 11px;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
font-stretch: ultra-condensed;
line-height: 600%;
background-image: url(http://www.anthonybellov.com/images/nav/button-bk.gif);
background-repeat: no-repeat; text-decoration: none;
text-align: center;
vertical-align: bottom;
height: 56px;
padding: 0; }

ul#navlist li a:hover {
color: #fff;
line-height: 350%;
background-image: url(http://www.anthonybellov.com/images/nav/button-bk_over.gif);
background-repeat: no-repeat; }

Here's the HTML:



Anthony Bellov Video Productions











Testing


pretend quote here pretend quote herepretend quote here pretend quote here pretend quote here


pretend quote here pretend quote herepretend quote here pretend quote here pretend quote here






Welcome to our site

text here text here text here text here








Thanks in advance for any ideas.
Antonella