PDA

View Full Version : background image not appearing.

mattrd
30th January 07, 06:05 PM
the background image on the left hand side of the container is not appearing, I don't know why this is happening, it should appear like the right side of the container. I'm not sure how to explain it much better but you will understand it when you see it for yourself. The url is http://www.matthewrdaniels.com/resize.html and the code is below:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="css/resize.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="frame">
<div id="frame_top_left"></div>
<div id="frame_top_middle"></div>
<div id="frame_top_right"></div>





<div id="frame_middle">
<div id="frame_middle_left"></div>
<div id="frame_middle_middle">







<div id="navbox">
<div id="left"></div>
<div id="top_left"></div>
<div id="top_middle">

</div>
<div id="top_right"></div>
<div id="right"></div>




<div id="middle">
<div id="one"></div>
<div id="three">
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>
<p>this is a paragraph</p>

</div>
<div id="two"></div>
</div>




<div id="bottom">
<div id="bottom_left"></div>
<div id="bottom_middle"></div>
<div id="bottom_right"></div>
</div></div>






</div>
<div id="frame_middle_right"></div>
</div>








<div id="frame_bottom">
<div id="frame_bottom_left"></div>
<div id="frame_bottom_middle_one"></div>
<div id="frame_footer_image"></div>
<div id="frame_bottom_middle_two"></div>
<div id="frame_bottom_right"></div>
</div>

</div>
</div>


</body>
</html>


CSS:

#container {
position:relative;
width: 100%;
height: auto;
}

#navbox {
position:relative;
left:20%;
height:auto;
width:100%;
background-color:#ffffff;
z-index:100;


}

#top_left {
position:absolute;
left:1%;
top:15px;
background: url('../images/top_spacer.gif') repeat-x top left;
width: 50%;
height: 56px;
}

#top_middle {
position:absolute;
top:15px;
left:50%;
margin-left:-260px;
z-index:10;
background: url('../images/top_middle.gif') no-repeat top left;
width: 521px;
height: 56px;
z-index:3;
}

#top_right {
position:absolute;
right:1%;
top:15px;
background: url('../images/top_spacer.gif') repeat-x top left;
width: 50%;
height: 56px
}

#top {
width: 100%;
height: 56px
}

#left {
position:absolute;
left:0px;
background: url('../images/top_left.gif') no-repeat;
width:18px;
height: 56px;
top: 14px;
z-index:2;
}

#right {
position:absolute;
right:0px;
background: url('../images/top_right.gif') no-repeat;
width:22px;
height: 56px;
top: 14px;
}



#one {
float:left;
background:url('../images/middle_left.gif') repeat-y;
width:18px;
height:auto;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

#two {
margin-right:-1px;
float:right;
background:url('../images/middle_right.gif') repeat-y;
width:22px;
height:auto;
padding-bottom: 32767px;
margin-bottom: -32767px;

}

#three {
float:left;
left:50%;
width:50%;
height:auto;

padding-bottom: 32767px;
margin-bottom: -32767px;
}

#middle {
position:relative;
top:70px;
width: 100%;
height: auto;
overflow:hidden;
background-color:#ffffff;
}
#bottom_left {
position:absolute;
width:20px;
height:31px;
z-index:100;
background:url('../images/bottom_left.gif') no-repeat;
}

#bottom_right {
position:absolute;
width:22px;
height:31px;
right:0px;
background:url('../images/bottom_right.gif') no-repeat;
}

#bottom_middle {
position:absolute;
width:100%;
height:31px;
background:url('../images/bottom_middle.gif') repeat-x;
left:1%;
padding-right:1px;
}

#bottom {
position:relative;
width: 100%;
height:31px;
overflow:hidden;
top:70px;
}

#frame {
width:100%;
height:auto;
}

#frame_top_left {
position:absolute;
width:20px;
height:94px;
z-index:100;
background:url('../images/frame_top_left.gif') no-repeat;
}

#frame_top_right {
position:absolute;
width:24px;
height:94px;
right:0px;
background:url('../images/frame_top_right.gif') no-repeat;
}

#frame_top_middle {
position:absolute;
width:99%;
height:94px;
background:url('../images/frame_top_middle.gif') repeat-x;
left:1%;
right:1px;
}

#frame_top {
position:relative;
width: 100%;
height:94px;
overflow:hidden;

}
#frame_bottom {
margin-top:70px;
}

#frame_bottom_left {
position:absolute;
width:20px;
height:100px;
background:url('../images/frame_footer_left.gif') no-repeat;
}

#frame_bottom_middle_one {
position:absolute;
width:97%;
height:100px;
background:url('../images/frame_footer_middle.gif') repeat-x;
left:20px;
}

#frame_bottom_middle_two {
position:absolute;
width:97%;
height:100px;
background:url('../images/frame_footer_middle.gif') repeat-x;
left:20px;
}

#frame_bottom_right {
position:absolute;
width:24px;
height:100px;
background:url('../images/frame_footer_right.gif') no-repeat;
right:0px;
}

#frame_footer_image {
position:absolute;
left:50%;
margin-left:-260px;
z-index:10;
background: url('../images/frame_footer_image.gif') no-repeat top left;
width: 318px;
height: 100px;
z-index:3;
}

#frame_middle {
position:relative;
top:90px;
width:100%;
height:auto;
overflow:hidden;
background-color:#ffffff;
padding-bottom:100px;
}


#frame_middle_left {
float:left;
background:url('../images/frame_middle_left.gif') repeat-y;
width:20px;
height:auto;
padding-bottom: 32767px;
margin-bottom: -32767px;
z-index:100;
}

#frame_middle_right {
margin-right:-1px;
float:right;
background:url('../images/frame_middle_right.gif') repeat-y;
width:24px;
height:auto;
padding-bottom: 32767px;
margin-bottom: -32767px;
margin-right:0px;
}

#frame_middle_middle {
float:left;
left:50%;
width:70%;
height:auto;
background-color:#ffffff;
padding-bottom: 32767px;
margin-bottom: -32767px;
}


thanks in advance for any help you can provide
philtreble
1st February 07, 03:12 PM
I think it's because you're missing a ';'

#one {
background:transparent;
url(../images/middle_left.gif) repeat-y scroll 0%;
float:left;
height:auto;
margin-bottom:-32767px;
padding-bottom:32767px;
width:18px;
}
philtreble
1st February 07, 03:21 PM
Actually forget that... I was using Firebug and it was adding CSS elements which weren't there.

Your markup seems excessive for the result you are trying to achieve?

I would use curvy corners! http://www.curvycorners.net/
philtreble
1st February 07, 04:08 PM
Sorry about all these posts -- it might be the background image you are using -- looks to me like it's a single black pixel line?
mattrd
2nd February 07, 01:32 PM
actually i got it fixed a few days ago. thanks for your help. I will definately check out the curvy corners. thanks!!