hyyuye3puy
New Member
I have a good problem in css design which I cannot figure out how to fix it. And it is the same problem in this forum:
I observed that the header background does not fully filled its horizontal scope when its zoomed in. Below is the zoomed out view of the site.
This is very the same with my case when designing my header and footer background.
My HTML Code is:\[code\]<div id="footerBack"> <div id="footer"> <a href="http://stackoverflow.com/questions/13853173/#"><img src="http://stackoverflow.com/questions/13853173/images/eyecolor.png" alt="Eyecolor Icon" /></a> <ul> <li><a href="http://stackoverflow.com/questions/13853173/#" id="terms">Terms & Service</a></li> <li><a href="http://stackoverflow.com/questions/13853173/#" id="privacy">Privacy Policy</a></li> <li><a href="http://stackoverflow.com/questions/13853173/#" id="news">News</a></li> <li><a href="http://stackoverflow.com/questions/13853173/#" id="footerAbout">About</a></li> <li><a href="http://stackoverflow.com/questions/13853173/#" id="footerContact">Footer</a></li> </ul> <p id="copyright">Copyright © 2012 Jed Designs</p> <a href="http://stackoverflow.com/questions/13853173/#"><p id="email">Email: [email protected]</p></a> </div> <div id\[/code\]My CSS: \[code\] /*Footer*/#footerBack {background: url(images/footerBack.jpg) repeat-x; height: 48px; position: relative; top: -4px;};#footer {padding-top: 10px;}#footer ul, #footer img {margin-top: 5px;}#footer ul {float: left; margin-left:160px; margin-top: 15px;}#footer li a {color: #d6b85e; padding: 7px; margin: 0 8px 0 8px; font: 11px Tahoma, Geneva, sans-serif;}#footer li a:hover {background:#d6b85e; color: #73401f;}#footer img {float: left;}#footer #copyright, #footer #email {float: right; color: #e5dca9; font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif; margin-right: 12px;}#footer #email {margin-top: 2px;}#footer #copyright {margin-right: 20px; margin-top: 12px;}\[/code\]What will I do to fix this design problem? 