Forum Moderators: not2easy
I works great, but there is a slight difference in the display of the content between IE and Firefox. Please check the following page in both IE and Firefox to see what I mean:
As you can see the textlines are displayed just a bit lower in Firefox. It looks like a padding- or marginproblem, but I can't figure out how to fix this (making them even in both IE and Firefox).
Below is the code of the page given:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body {padding: 0; margin: 0; height: 100%;}
body {
background: black;
}
#container {
min-height: 100%;
width: 780px;
margin: 0 auto;
position: relative; /* so header and footer can be positioned */
background: #fff;
}
/* this is for IE/Win only either a conditional or hack required supposed IE7 will support min-height */
* html #container {height: 100%;}
hr.footpad, hr.headpad {
margin: 0;
padding: 0;
border: 0;
height: 1px;
visibility: hidden;
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: red;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: blue;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><p>headertext goes here</p></div>
<hr class="headpad" />
<p>textline 1</p>
<p>textline 2</p>
<p>textline 3</p>
<p>textline 4</p>
<p>textline 5</p>
<p>textline 6</p>
<p>textline 7</p>
<p>textline 8</p>
<p>textline 9</p>
<p>textline 10</p>
<p>textline 11</p>
<p>textline 12</p>
<p>textline 13</p>
<p>textline 14</p>
<p>textline 15</p>
<p>textline 16</p>
<p>textline 17</p>
<p>textline 18</p>
<p>textline 19</p>
<p>textline 20</p>
<hr class="footpad" />
<div id="footer">
<p>footertext goes here</p>
</div>
</div>
</body>
</html>
Any ideas? Thanks in forward
<No URL's thanks. See TOS #13 [WebmasterWorld.com] - the code is fine thanks.. :)>
[edited by: SuzyUK at 5:14 pm (utc) on Jan. 27, 2006]
the "footpad and headpad" hr's should be given heights equal to the heights of your header and footer divs in order to create the right amount of space at the top/bottom. I used 100px for both in my original sample, but still declared them seperate classes as I presume yours might be different? It's like I said in that last post.. the header and footer divs are actually sitting on top of the <hr's>..
it is a cheat but there is no way to reliably mix percentage and pixel heights without scripting for IE otherwise.
Suzy
it's neither margin nor padding that I can fathom, I can't get rid of it nor work around it without feeding different heights to IE and that would be guesswork anyway as I think the gaps are related to default font-size :o , so taking the easy way out it's just IE's handling of <hr>'s.
whilst playing around with the code a bit I also discovered that IE will not size an <hr> bigger than 100px anyway so in the interest of giving up on IE due to anticipating further problems ;) and not wanting to get into the realm of hacks, I would unfortunately advise you to add extra divs instead of the <hr's> and size them instead if pixel perfection is important to the design.
e.g. HTML for the "padding" divs..
<div class="headpad"></div>
<div class="footpad"></div>
CSS:
.headpad {
height: 100px;
visibility: hidden;
}
.footpad {
height: 50px;
visibility: hidden;
}
Downside non-semantic, extra divs..
Upside less CSS ;)
Suzy
