471,605 Members | 1,352 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

Firefox and IE Issue

Hi All,

Please check the code below as am having trouble viewing the same design in Firefox and IE7. It works fine in IE6 but gets all quirky in IE7 and FF.

The footer stays at the bottom of the viewport but then the text scrolls behind it in IE7 and FF. I need it to be at the bottom of the content at all times. Please help. Currently the styles are in the same htm file but will later be and external CSS. The design is center aligned on the browser and hence some divs have relative positioning. Here is the code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>test</title>
  6. <style type="text/css"/>
  7. html, body{
  8. height:100%; min-height:100%;margin:0;padding:0; background-color:#000;}
  9.  
  10. a:link
  11. {
  12. font:Arial; color:#666666; size:75%; text-decoration:none;
  13. }
  14.  
  15. a:hover
  16. {
  17. font:Arial; color:#000000; size:75%;
  18. text-decoration:underline;
  19. }
  20. #maincontainer
  21. {
  22.     background:url(bg.gif) repeat-y;
  23.     height:100%;
  24.     min-height:100%;
  25.     width:975px;
  26.     margin-left:auto;
  27.     margin-right:auto;
  28.     position:relative;
  29.     z-index:4;
  30. }
  31.  
  32. #topcontainer
  33. {
  34.     background:url(navbg.gif) no-repeat;
  35.     position:relative;
  36.     width:968px;
  37.     height:116px;
  38.     padding:0;
  39.     left:3px;
  40.     top:-8px;
  41.     z-index:3;
  42. }
  43.  
  44. #videocontainer
  45. {
  46. background:#ffffff;
  47. position:relative;
  48. width:968px;
  49. height:238px;
  50. padding:0;
  51. left:3px;
  52. top:-5px;
  53. z-index:0;
  54. }
  55. .container
  56. {
  57.     background:url(bgstretch.png) repeat-y;
  58.     width:975px;
  59.     height:100%;
  60.     min-height:100%;
  61.     margin-left:auto;
  62.     margin-right:auto;
  63. }
  64.  
  65. #leftcontainer
  66. {
  67. background:#FFFFFF;
  68. width:250px;
  69. float:left;
  70. position:absolute;
  71. left:3px;
  72. font-family:Arial; font-size:75%; color:#666666;
  73. }
  74.  
  75. #contentbox
  76. {background:#FFFFFF;
  77. width:713px;
  78. position:absolute;
  79. left:258px;
  80. font-family:Arial; font-size:75%; color:#666666;
  81. }
  82. #footer
  83. {
  84.     background:#000000;
  85.     position:fixed;
  86.     bottom:0;
  87.     left:0;
  88.     width:100%;
  89.     height:35px;   /* Height of the footer */
  90.     z-index:6;
  91. }
  92.  
  93. .menubottom
  94. {
  95.     position:relative;
  96.     width:975px;
  97.     height:25px;
  98.     font-family: Arial;    color:#666666;    font-size:70%;    font-weight:bold;
  99.     margin-left:auto;
  100.     margin-right:auto;
  101.     margin-top:10px;
  102.     line-height:2em;
  103.     border-bottom:thin #333333 solid;
  104.     border-top:thin #333333 solid;
  105. }
  106. </style>
  107. </head>
  108. <body>
  109. <div id="maincontainer">
  110. <div id="topcontainer">
  111. </div>
  112.   <div id="videocontainer"></div>
  113.   <div class="container">
  114.   <div id="leftcontainer">
  115.   testtesttesttesttesttesttesttesttesttesttest<br />
  116.   testtesttesttesttestesttesttesttesttesttest<br />
  117.   </div>
  118.   <div id="contentbox">Lorem ipsum dolor sit amet, purus aliquip in fusce erat non, conubia nunc, luctus orci enim libero integer dictum, nibh morbi pharetra magna, curabitur convallis ornare mauris luctus. Et nulla. Volutpat ipsum rutrum pulvinar vehicula, enim justo lacus nec dapibus ut eleifend, sociis amet viverra vel, vitae curabitur cras turpis ligula. Urna enim aliquam felis at pede ante, a dolor sed primis orci, eget maecenas habitasse vivamus, nam ipsum lobortis. Ipsum conubia faucibus aliquam suspendisse, natoque libero ante aenean, et hac dolor arcu, pellentesque feugiat, congue vivamus tempor vivamus etiam taciti. Ac vivamus lacus arcu wisi, rhoncus convallis. Volutpat nam sed amet, consectetuer morbi magna justo ante, auctor nascetur nec, nulla mauris laoreet blandit mauris rutrum. Eget in nam et, ipsum felis ligula, porttitor libero fermentum at, odio curabitur ultrices aenean. Eu pellentesque nec facilisi vehicula at, sollicitudin praesent pellentesque.
  119.  
  120. Hendrerit lacus sit morbi, scelerisque assumenda ipsum pellentesque, ante mattis ornare sollicitudin ut, elementum vitae semper libero sodales. Ipsa sem quis cras orci ipsum, cras pulvinar risus non cumque risus, pede cursus leo. Ut consequat, et potenti purus ultrices vitae tempor, eleifend elit quam vulputate magna, massa elementum quisque ut non elementum. Pede ut cursus, sed elit sapien felis congue tristique, sociis sapien, at id odio cursus sed ac. Fringilla vehicula, sit nisl ante id est etiam ipsum, nullam duis ac, ac porta ipsum convallis, iaculis ante ullamcorper amet sed massa sint. Dui amet faucibus ut elit pede hac, suscipit suscipit in elit, sollicitudin quis, velit adipisci sodales interdum dui, tempore eleifend et urna dolor maecenas. Dictum aliquam tortor a, eros neque scelerisque, at tristique tellus, dictum autem nunc mauris. Odio ultrices, eget vitae sed. A sed per occaecati dolore semper eu, imperdiet et tempor, id commodo suspendisse in, praesent a, magna vulputate velit purus sapien. Tempor eleifend sagittis neque sodales, urna sem maecenas consequat, amet fames ligula nihil wisi.
  121.  
  122. Est posuere ligula velit ut sem, ultrices vel ac urna lorem dolor ultricies, nisl nulla in augue, suspendisse in urna pulvinar posuere phasellus sint, amet aliquam non ut. Eros fermentum, pharetra cursus at sed ligula erat scelerisque. Placerat et ornare rutrum ultricies dignissim, semper consectetuer hendrerit montes, ut litora nulla urna. Aliquam pellentesque, varius vel et ante aliquam pede arcu, rhoncus dolor pulvinar cras leo, nibh sed quisque accumsan nibh neque eget, quis ut pellentesque sapien est sollicitudin. Condimentum ac aliquam leo rhoncus, lectus nonummy. Curabitur adipiscing taciti duis velit. Aliquet id pretium metus, nunc aptent iaculis purus, non egestas.
  123. </div>
  124.   </div>
  125. </div>
  126. <div id="footer">
  127. <div class="menubottom">lorem ipsum</div>
  128. </div>
  129. </body>
  130. </html>
  131.  
Nov 17 '07 #1
1 1316
phvfl
173 Expert 100+
Hi,

From how I understand your question you are wanting to have the footer at the end of the content at all times, not at the bottom of the window.

If that is the case then the issue is the fixed position of the footer div. IE7 and Firefox have the correct implementation of position fixed which is that the element is positioned in a fixed position relative to the viewport, not the document and that the element remains fixed in that position and does not move when the document is scrolled.

Also you have the style tag is self closing so the code is not valid, the opening style code should be:
Expand|Select|Wrap|Line Numbers
  1.  <style type="text/css">
  2.  
Nov 24 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by David Hayes | last post: by
6 posts views Thread by michaelzap | last post: by
87 posts views Thread by expertware | last post: by
12 posts views Thread by Brad | last post: by
9 posts views Thread by =?Utf-8?B?Sm9obiBCYWlsZXk=?= | last post: by
7 posts views Thread by Carlos Mendonça | last post: by
3 posts views Thread by SAL | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.