No replies
bjabloner
Offline
newbie
Last seen: 14 years 42 weeks ago
Joined: 2007-09-12
Posts: 7
Points: 0

I have a site developed in CSS that works fine in all browsers except IE7. The issue is at the bottom of the page where I have several DIVs layered on top of one another. In IE7 the background image is moved to the top of the DIV and the three smaller DIVs inside(which are text with an image) are also moved up but not as much as the background. Is there anyone that can help me with a IE7 hack or anything else that will resolve this problem?

Below is code for page:



We also know seizures aren’t your only concern.


Fortunately, this Web site can help.


Read on for valuable information about about-epilepsy.html">epilepsy and about-topamax.html">TOPAMAX— to help you get the most out of
your treatment.







  • Safety Tips
    & Resources


    Learn about an education
    effort to provide patients and healthcare professionals with safety tips and resources.
    Learn More »





  • The Free Everyday

    Essentials™ Program


    Get expert answers, help finding resources in
    your area, and more. COMING SOON!





  • Expressions of Courage


    This collection of artwork by people with epilepsy illustrates both the profound effect that epilepsy can have on a human life and the courage so many show in facing it. View the Gallery »






Here is the CSS I think is the problem:

#callouts { width: 960px; background: url(../images/home_callout_bg.gif) 0 bottom; position: absolute; left: -68px; top: 460px; z-index: 50; }
#callouts #wrap { padding: 0 0 0 100px; background: url(../images/home_VTD.gif) top left no-repeat; }
#callouts ul { padding: 70px 0 10px 0; margin: 0 0 20px 0; color: #D8D3BF; float: left; }
* html #callouts ul { float: none; width: 100%; }
#callouts ul li { float: left;/* padding-top:4px;*/}
#callouts ul li.one { width: 150px; background: url(../images/RxForSafety.gif) no-repeat; }
#callouts ul li.two { width: 250px; margin-left: 50px; background: url(../images/essentials_icon.gif) no-repeat; }
#callouts ul li.three {
width: 250px;
margin-left: 0;
background-image: url(../images/expressions_icon.gif);
background-repeat: no-repeat;
background-position: left top;
}
#callouts ul li.three strong { padding-left: 42px; }
#callouts ul li.one strong {padding-left:65px;}
#callouts ul li.two strong {padding-left:45px;}
#callouts ul li a { color: #FFF; }
#callouts strong { color: #FFF; font-size: 1.2em; display: block; }

#home #callouts ul {
margin-top:35px;
_margin-top:70px;
/* border:solid 1px blue;*/
background:url(../images/callout_bottom_bg.jpg) bottom left no-repeat;
_height:1px;
}
#home #callouts ul li {
float:left;
display:block;
padding:0px 20px;
color:white;
}
#home #callouts ul li h3 {
margin-left:40px;
margin-bottom:10px;
}
#home #callouts li#callout1 {
width:160px;
height: 216;
padding-bottom:30px;
background: url(../images/RxForSafety.gif) 20px 0 no-repeat;
_height:2px;
/* border:solid 1px red;*/
}
#home #callouts li#callout1 h3 {
margin-left:60px;
}
#home #callouts li#callout2 {
width:258px;
background: url(../images/essentials_icon.gif) 20px 0 no-repeat;
/* border:solid 1px red;*/
}
#home #callouts li#callout3 {
width:261px;
/* border:solid 1px red;*/
background-image: url(../images/expressions_icon.gif);
background-repeat: no-repeat;
background-position: 20px 0;}
#home #main div#left_side {
width:201px;
/* background:url(../images/leftside_bg.jpg) bottom left no-repeat;*/
/* border:solid 1px green;*/
}
#home #main div#right_side {
width:301px;
/* background:url(../images/rightside_bg.jpg) bottom right no-repeat;*/

/* border:solid 1px black;*/
}