Forum Moderators: not2easy
Ill try this again...
I have a site ive been playing with...it displays just fine in ever browser except IE7...in IE7 the footer moves up the page and dosent sit at the bottom like in the other browsers i tested ...IE5.5 / 6 Firefox / Opera.
Can anyone point me in the right direction to solve this please...i made a screen shot but cant seem to put in post...
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Footer css
#footer{
clear:both;
width:auto;
background:url(images/foot_logo.png) no-repeat left bottom #5A6F6C;
background-position:0px 40px;
color:#CCCCCC;
height:80px;
padding-top:10px;
text-align:center;
}HTML footer code
<div id="footer"> Green Solution.© All Rights Reserved 2007 <br />
<a href="http://www.example.com"><img src="images/example.jpg" width="200" height="35" border="0" alt="example" /></a><br />
<a target="_blank" href="http://validator.w3.org/check?uri=referer" style="text-decoration:none; color:#333333;">Xhtml</a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" style="text-decoration:none; color:#333333;">css</a> </div>Really appreciate any help :)
tones
[edited by: tedster at 4:15 pm (utc) on Sep. 22, 2008]
[edit reason] use example.com in code [/edit]
There's little point in plugging the code in a page to see how it works in IE7 as there's no reason for it to go anywhere down the page as is.
What is it clearing with the "clear:both" ?
k..after playing around with it for ages..i found this...
#main_container{
width:800px;
[b]height:800px;[/b]
margin:auto;
background: none;
font-size:12px;
color:#042254;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
Changed it to the following..
#main_container{
width:800px;
[b]height:auto;[/b]
margin:auto;
background: none;
font-size:12px;
color:#042254;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
"Seems" to have fixed it....but what i don't understand is why did the other browsers ignore the height:800px; ? Or did they ? or am i way off as to the fix ?
Heres the full css page...
body
{
background: #F2F2F2 url('images/bg.gif') repeat-x;
margin: 0px;
padding: 0px;
}
.input{
width:140px;
height:15px;
font-size:12px;
color: #666666;
}
p{
clear:both;
width:auto;
color:#042254;
padding:0px;
text-align:justify;
}
img.pic{
float:left;
padding:10px;
margin:10px 0 10px 0;
border:1px #CCCCCC solid;
}
.title{
color: #042254;
font-size:18px;
padding:15px 10px 5px 40px;
border-bottom:1px #CCCCCC dashed;
margin-top:10px;
text-decoration:none;
line-height:15px;
}
.more{
clear:both;
padding:2px;
}
#main_container{
width:800px;
height:auto;
margin:auto;
background: none;
font-size:12px;
color:#042254;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#top_banner{
width:800px;
height:120px;
margin:auto;
}
#logo{
width:auto;
float:left;
padding-left:20px;
}
/*-------------menu--------------*/
.navigation{
padding-left:140px;
margin:auto;
}
.navigation ul
{
font-family: "trebuchet ms";
font-size: 11px;
text-decoration: none;
margin: 0px;
padding:0px;
list-style: none;
}
.navigation li
{
text-align:center;
display: inline;
text-align: center;
padding: 0px;
float: left;
}
.navigation li a
{
width:85px;
height:30px;
color: #333333;
float: left;
margin:0px;
padding:5px 0 0 0;
text-decoration: none;
background:url(images/bt.gif) no-repeat center;
background-position:0px 0px;
}
.navigation li a:hover
{
color: #153700;
background:url(images/bt_a.gif) no-repeat center;
background-position:0px 0px;
}
.navigation li.current a
{
color: #153700;
float: left;
margin:0px;
padding:5px 0 0 0;
text-decoration: none;
background:url(images/bt_a.gif) no-repeat center;
background-position:0px 0px;
}
#center_content{
clear:both;
width:800px;
height:auto;
background-color:#f2f2f2;
}
#left_content{
width:380px;
float:left;
height:auto;
padding:15px;
font-size:11px;
color:#333333;
padding-bottom:50px;
border-right:1px #CCCCCC dashed;
}
#right_content{
width:350px;
float:left;
height:auto;
padding:15px;
font-size:11px;
color:#333333;
padding-bottom:50px;
}
.right_box{
width:330px;
height:auto;
border:1px #9db52b solid;
background:url(images/badget.gif) no-repeat top left #FDFDFD;
background-position:8px 8px;
padding:70px 0 0 10px;
}
/*-------------list------------*/
.list {
color:#042254;
font-weight:bold;
}
.list li span{
color:#9c1e2a;
}
.list ul{
padding:0px;
margin:0px;
}
.list li ul li{
font-weight:normal;
padding:5px;
list-style:none;
margin:5px;
}
.list ul li.description{
color: #000;
font-size:10px;
}
.date{
width:50px;
height:50px;
background:url(images/date.gif) no-repeat center;
background-position:0px 0px;
text-align:center;
color:#fff;
font-size:14px;
font-weight:bold;
padding-top:15px;
float:left;
margin-top:10px;
}
.news_content{
width:290px;
padding:5px;
float:left;
text-align:justify;
border-bottom:1px #CCCCCC dashed;
margin:10px 0 10px 0;
}
/*---------services---------*/
ul.services {
list-style-type:none; display:block; width:auto; height: auto;
margin:0px; padding:10px 0 20px 15px;}
ul.services li {
display:inline;}
a.nav_services:link, a.nav_services:visited {
display:block; padding:1px 0 0 14px; margin:2px;width: auto; height: auto; text-align:left; line-height:17px;
text-decoration:none; background:url(images/bullet.png) no-repeat left; color: #9c1e2a;}
a.nav_services:hover {
display:block; padding:1px 0 0 14px; margin:2px;width:auto; height:auto; text-align:left; line-height:17px;
text-decoration:none; background:url(images/bullet_a.png) no-repeat left; color:#000000;}
/*-------------foooter*/
#footer{
clear:both;
width:auto;
background:url(images/bg_footer.jpg) no-repeat left bottom #5A6F6C;
background-position:0px 40px;
color:#CCCCCC;
height:80px;
padding-top:10px;
text-align:center;
}
