Hello,
Im having an issue with firefox (or should that be IE), where the height of the page only fits the screen size.
Presumably this has to do with the fact i have set the height to 100% inside the wrapper. If anyone could provide any solutions that works with both IE and Firefox, id be grateful
Looking at the site through Firefox, the problem can be found at: http://www.sunbirduk.com/sunbird/web/site/news/news.asp
And the css code is:
html { height: 100%;
}
#wrapper {
z-index: 2;
margin-right:auto;
margin-left: auto;
position: relative;
width: 780px; /*width of title banner used means html page must be same size*/
height: 100%;
visibility: visible;
display: block;
background-color: #FFFFFF;
background-image: url(/sunbird/web/Templates/home_files/bottom.gif);
background-repeat: no-repeat;
background-position: bottom;
top:0;
margin-top: 0px;
overflow: visible;
border-right: 2.3px solid #E4C203; /* original was 1px */
border-left: 2.3px solid #E4C203; /* original was 1px */
}
.nav, .nav a, .nav a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #023880;
text-decoration: none;
font-weight: normal;
margin-left: 10px;
font-style: italic;
line-height: normal;
}
.nav a:hover {
text-decoration: none;
color: #FFCC00;
}
#navigation {
margin-left: 0px;
margin-top: 0px;
position: relative;
width: 154px;
display: block;
float: left;
z-index: 5;
}
#copy {
position: relative;
width: 432px;/*430*/
display: block;
float:left;
z-index: 6;
border-left-width:medium;
}
#news {
margin-top: 0px;
/* margin-right: auto; */
/*margin-left:auto; */
position: relative;
width: 188px; /*186*/
display: block;
float: left;
z-index: 6;
border-left-color: #000066;
border-left-style: solid;
border-left-width: 0.8px;
margin-right:auto;
}
#bottom {
height: 40px;
width: 100%;
display: block;
z-index: 1;
text-align: right;
vertical-align: bottom;
bottom: 0px;
position: relative;
right:35px;
}
#details {
position: relative;
width: 600px;
display: block;
float: left;
z-index: 6;
background-color: #ffffff;
}
#boat {
position: relative;
width: 715px;
height: 500px;
display: block;
float: left;
z-index: 6;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
margin-left: 4.5px;
margin-right: 4.5px;
}
p a {
color: #E4C203;
text-decoration: none;
font-weight: bold;
}
H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: bold;
color: #023880;
text-decoration: none;
margin-left: 3px;
line-height: 12px;
vertical-align: top;
margin-bottom: 0px;
margin-right: 0px;
}
.txt {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
float: bottom;
}
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #023880;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
}
.terms {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
#img1 a.visited
{
border-color:#FFFFFF;
color:#FFFFFF;
}
.ae_wisiwig {
background-color: #FFFFFF;
background-image: url(/home_files/spacer.gif);
background-repeat: no-repeat;
}
100% height does not work with Firefox
You need min-height for FF height:100% will set it the viewport height and no higher,
Try something like
html, body, #wrapper{min-height:100%; height:100%;}
body>#wrapper{height:auto;}
it's worth searching as this has been covered quite often here and there are a number of different ways of approaching it; the above may be wrong from memory.
Hugo.