All geek questions in one place

Central footer installed below IE

I am coding a web interface for a university project and I am addressing this issue:

I want my footer to snap to the bottom so that it stays in place no matter which screen I use, or if I switch full screen

It works in all other browsers except IE7 (I do not need to support previous versions)

HTML

<div id="menu"> <a href="information.html" rel="shadowbox;height=500;width=650" title="INFORMATION" > <img src="images/info.png" alt="information icon" /> </a> <a href="images/bricks_of_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES" > <img src="images/image.png" alt="image icon" /> </a> <a href="music_player.swf" title="MUSIC" rel="shadowbox;height=400;width=600" > <img src="images/music.png" alt="music icon" /> </a> <a href="#" title="MOVIES"><img src="images/television.png" alt="movies icon" /></a> <a href="quotes.html" title="QUOTES" rel="shadowbox;height=300;width=650" > <img src="images/male_user.png" alt="male user icon" /> </a> <a href="#" title="REFERENCES"> <img src="images/search_globe.png" alt="search globe icon" /> </a> </div> <a href="images/destiny_1.jpg" rel="shadowbox[gallery]" title="IMAGES"></a> <a href="images/destiny_carma_jewell.jpg" rel="shadowbox[gallery]" title="IMAGES"></a> <a href="images/destiny-joan-marie.jpg" rel="shadowbox[gallery]" title="IMAGES"></a> <a href="images/pursuing_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES"></a> <div class="clear"></div> <div id="destiny"> Discover more about the word <span class="strong">DESTINY </span>! Click one of the icon above! (F11 Toggle Full / Standard screen) </div> <div id="footer"> <ul id="breadcrumbs"> <li>Disclaimer</li> <li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li> <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li> <li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li> </ul> </div> </div>

CSS

 #wrapper{ text-align:center; margin:0 auto; width:750px; height:430px; border:1px solid #fff; } #menu{ position:relative; margin:0 auto; top:350px; width:450px; height:60px; } #destiny{ position:relative; top:380px; color:#FFF; font-size:1.5em; font-weight:bold; border:1px solid #fff; } #breadcrumbs{ list-style:none; } #breadcrumbs li{ display:inline; color:#FFF; } #footer{ position:absolute; width:750px; height:60px; margin:0 auto; text-align:center; border:1px solid #fff; bottom:0; } .clear{ clear:both; }

White borders are available for debugging purposes only.

The application is available at http://www.eezzyweb.com/destiny/

Any suggestion appreciated

+4
source share
3 answers

margin: auto; is what broke in IE7. You can get around it with

 #footer { width: 100%; left: 0px; }

since this div is stretched to full width, and ul is automatically aligned to the middle.
But perhaps this is not what you want.

If this is not an acceptable solution, people on the Internet say that you can fix it by aligning the parent text to the center, but this can lead to the loss of the rest of the layout ... you have to play with it, but at least you know what happens badly.

+2
source

CSS

 html, body { height: 100%; margin: 0; padding: 0; } #wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -150px; /* the bottom margin is the negative value of the footer height */ } #footer, #push { height: 150px; /* #push must be the same height as #footer */ }

HTML:

 <body> <div id="wrapper"> <!-- ALL non-footer content goes in this DIV. --> <div id="push"></div> </div> <div id="footer"> <ul id="breadcrumbs"> <li>Disclaimer</li> <li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li> <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li> <li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li> </ul> </div> </body>

Code adapted from http://ryanfait.com/sticky-footer/

I used this approach on several sites that I developed, including my personal site. It works great! And even in IE6 (even if you said it wasn’t necessary).

+3
source 
  html 
 body {
     height: 100%;
 }
 #wrapper {
     position: relative;
     height: auto! important;
     height: 100%;
     min-height: 100%;
 }
 #footer {
     left: 0;
 }
+1
source

Source: https://habr.com/ru/post/1308909/

More articles:


All Articles