Trouble Centering a banner
I have tried centering this banner using <center> but it didn't work it just verbosely posted all my banners down the screen. I found out you have to actually edit the CSS code to get it to work. Well I did that and it's centered for my computer/browsers but not for others. Is there a global way for me to center it with every browser on every computer? Could somebody fix my code plz!
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Echo Calls</title> <style type="text/css"> body { margin:auto; padding:0; color: #FFFFFF; font: normal 1.2em sans-serif, Arial; background-color: #000000; width: 100%; } h1 { padding-left: 55px; font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif; text-transform:uppercase; letter-spacing:.0.0em; } a { outline: none; } </style> <style type="text/css"> /* rotator in-page placement */ div#rotator { position:relative; height:145px; margin-left:auto; margin-right:auto; } /* rotator css */ div#rotator ul li { float:left; position:absolute; list-style: none; margin-left:auto; margin-right:auto; top: 1px; background-color: #000000; } /* IMAGE BORDER IS PADDING */ div#rotator ul li img { border:0px solid #000000; padding: 0px; background: #FFF; } div#rotator ul li.show { z-index:500 } </style> <script type="text/javascript" src="http://www.echocalls.com/jquery.min.js"></script> <script type="text/javascript"> function theRotator() { $('div#rotator ul li').css({opacity: 0.0}); $('div#rotator ul li:first').css({opacity: 1.0}); setInterval('rotate()',6000); } function rotate() { var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); if ( current.length == 0 ) current = $('div#rotator ul li:first'); var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { theRotator(); }); </script> . <style type="text/css"> html, body {height:100%; margin:0; padding:0;} #page-background {position:fixed; top:0; left:0; width:100%; height:100%;} #content {position:relative; z-index:1; padding:10px;} </style> <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 --> <!--[if IE 6]> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} </style> <![endif]--> </head> <style type="text/css"> body { scrollbar-arrow-color: black; scrollbar-base-color: black; scrollbar-dark-shadow-color: black; scrollbar-track-color: white; scrollbar-face-color: #949494; scrollbar-shadow-color: white; scrollbar-highlight-color: silver; scrollbar-3d-light-color: black; } </style> <STYLE TYPE="text/css"> a:link { color: #999999; text-decoration: none } a:active { color: #FFFFFF; text-decoration: none } a:visited { color: #999999; text-decoration: none } a:hover { color: #FF0000; text-decoration: none; background: #000000} </STYLE> <style type="text/css" style="display: none;"> .duck-button { border-top: 1px solid #383b3d; background: #0e0f0f; background: -webkit-gradient(linear, left top, left bottom, from(#47494a), to(#0e0f0f)); background: -moz-linear-gradient(top, #47494a, #0e0f0f); padding: 7px 14px; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 16px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .duck-button:hover { border-top-color: #2b2b2b; background: #2b2b2b; color: #ccc; } .duck-button:active { border-top-color: #191a1a; background: #191a1a; } </style> <body> <body text="#FFFFFF" bgcolor="#000000" link="#999999" vlink="#999999" alink="#FFFFFF"> <div id="page-background"><img src="http://www.echocalls.com/bgimage.jpg" width="100%" height="100%" alt="Smile"></div> <div id="content"> <div id="rotator"> <ul> <li class="show"><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner1.jpg" width="700" height="125" alt="banner1" /></a></li> <li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner2.jpg" width="700" height="125" alt="banner2" /></a></li> <li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner3.jpg" width="700" height="125" alt="banner3" /></a></li> <li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner4.jpg" width="700" height="125" alt="banner4" /></a></li> <li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner5.jpg" width="700" height="125" alt="banner5" /></a></li> <li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner6.jpg" width="700" height="125" alt="banner6" /></a></li> <li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner7.jpg" width="700" height="125" alt="banner7" /></a></li> <li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner8.jpg" width="700" height="125" alt="banner8" /></a></li> <li><a href="javascript:void(0)"><img src="http://www.echocalls.com/banner9.jpg" width="700" height="125" alt="banner9" /></a></li> </ul> </div> <br> <center> <div> <a href="http://www.echocalls.com/index.html" class="duck-button">Home</a> <a href="http://www.echocalls.com/aboutus.html" class="duck-button">About Us</a> <a href="http://www.echocalls.com/duckcalls.html" class="duck-button">Duck Calls</a> <a href="http://www.echocalls.com/goosecalls.html" class="duck-button">Goose Calls</a> <a href="http://www.echocalls.com/CallBuilder.html" class="duck-button">Call Builder</a> <a href="http://www.echocalls.com/accessories.html" class="duck-button">Accessories</a> <a href="http://www.echocalls.com/shop.html" class="duck-button">Shop</a> <a href="http://www.echocalls.com/staffing.html" class="duck-button">Team Echo</a> <a href="http://www.echocalls.com/contactus.html" class="duck-button">Contact Us</a> </div> <center> <br /> <br /> <center><a href="http://www.echocalls.com/news.html"><font color="#FF0000"> <b><big>Echo News</big></b></font></a><br> <script type="text/javascript"> var iframesrc="external.htm" document.write('<iframe id="datamain" src="'+iframesrc+'" width="700px" height="150px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"></iframe>') </script> </center> <br> <td VALIGN=TOP WIDTH="586"> <center><img SRC="http://www.echocalls.com/themallardhunters.jpg" height=350 width=586><a href="http"></a> <p><font face="Verdana"><a href="http://www.echocalls.com/news.html">Echo News</a> <img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/soundfiles.html">Listen To Duck Calls</a> <img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/video.html">Video Clips</a> <img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/links.html">Links</a> <img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/dealers.html">Dealers</a> <img src="http://www.echocalls.com/divider.jpg" width="11" height="11"> <a href="http://www.echocalls.com/compcircuit.html">Comp Circuit</a> </font></center> </td> </tr> </table></center> <font face="Verdand"><font size=-1><font color=#FFFFFF align="bottom"><center> <p>Copyright © 2001 <script language="JavaScript"> var d=new Date(); yr=d.getFullYear(); if (yr!=2010) document.write("- "+yr); </script> Echo Championship Duck Calls. ALL content including images may not be reproduced without first obtaining written permission. </p> </center> </font> <div id="eXTReMe"><a href="http://extremetracking.com/open?login=echoca11"> </a> <script type="text/javascript"><!-- EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//--> </script> <br> <center><script language="JavaScript"> <!-- document.write("This site was last modified on " + document.lastModified); // --> </script></center> <table width="800" border="0"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </body> </html>
CSS Codes
Reply With Quote
Bookmarks