1 reply [Last post]
gavmc
Offline
Regular
Last seen: 15 years 40 weeks ago
Joined: 2005-07-14
Posts: 17
Points: 0

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;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 14 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me