alt234 Posted June 28, 2007 Share Posted June 28, 2007 This is such a small issue but it is annoying me to no end.First of all you can see what will be described in the following description at...http//www.hbperspective.com/alt/index.htmUsing Firefox, when you go to the homepage you won't notice it at first, but click on "contact" for example and you can see that the bottom border on the empty box to the right of my links is 1 pixel higher than the border on the bottom of the links boxes. They should line up perfectly. It works just about perfectly in IE7 except there is one little glitch with the border when you click on portfolio. See if you can notice that one too, its just to the left of the button where there is a single pixel break in the left border.I kinda see whats happening, somehow the measurements on something is being calculated differently for IE and FF. I have no idea how to fix this though.Here is my CSS... html, body { font-family: arial; background: #000000; text-align: center; height: 90%; margin: 6px auto;}#header { background-image: url('images/main_header3.jpg'); background-repeat: no-repeat; margin: 0px auto; width: 800px; height: 125px; border-top: 1px #646464 solid; border-left: 1px #646464 solid; border-right: 1px #646464 solid;}#links { background: #000000; margin: 0px auto; height: 30px; width: 802px;}#content { font-size: 80%; color: #999999; background: #333333; margin: 0px auto; padding-top: 30px; padding-bottom: 30px; padding-left: 20px; padding-right: 20px; height: 62%; width: 760px; text-align: left; border-bottom: 1px #646464 solid; border-left: 1px #646464 solid; border-right: 1px #646464 solid;}a.links:link { width: 50px; float: left; color: #646464; padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px; border-top: 1px #646464 solid; border-bottom: 1px #646464 solid; border-left: 1px #646464 solid; text-decoration: none;}a.links:visited { width: 50px; float: left; color: #646464; padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px; border-top: 1px #646464 solid; border-bottom: 1px #646464 solid; border-left: 1px #646464 solid; text-decoration: none;}a.links:active { background: #333333; float: left; color: #FFFFFF; padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px; border-top: 1px #646464 solid; border-left: 1px #646464 solid; text-decoration: none;}a.links:hover { background: #333333; float: left; color: #FFFFFF; padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px; border-top: 1px #646464 solid; border-bottom: 1px #646464 solid; border-left: 1px #646464 solid; text-decoration: none;}p.EmptyLinksBox { float: left; margin: 0px; width: 436px; height: 28px; border: 1px #646464 solid;}p.footer { font-size: 70%; color: #646464; float: top;}p.activeLink { background: #333333; float: left; margin: 0px; color: #FFFFFF; width: 50px; padding-left: 20px; padding-right: 20px; padding-top: 5px; padding-bottom: 5px; border-top: 1px #646464 solid; border-left: 1px #646464 solid; border-bottom: 1px #333333 solid; } Here is some code for the contact page... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Alt Omega Designs</title> <link rel=StyleSheet href="style.css" type="text/css" media=screen> </head> <body> <div id="header"></div> <div id="links"> <a class="links" href="portfolio.htm">portfolio</a> <a class="links" href="about.htm">about</a> <p class="activeLink">contact</p> <a class="links" href="index.htm">home</a> <p class="EmptyLinksBox"></p> </div> <div id="content"> Under Construction. </div> <p class="footer">© 2007 Alt Omega Designs<p> </body></html> I hope I can get around this somehow without having you use some hack like using javascript to determine the browser and load the page accordingly...EDIT: Great, it looks totally screwed up in IE 6 apparently... How do I get this design to look right in IE6, 7, and FF? Link to comment Share on other sites More sharing options...
sircharlo Posted July 5, 2007 Share Posted July 5, 2007 I don't see a problem. I'm using FF. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.