Jump to content

alt234

Members
  • Posts

    5
  • Joined

  • Last visited

alt234's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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?
  2. Wow, thanks. I didn't need faux columns at all then. Awesome!
  3. That seems to do the trick. Thank you very much!
  4. I'm trying to create a 100% width 100% height liquid 3 column design. I do not want a header or a footer. I want borders. I've been trying to figure it out and thought I had it all fixed when I learned of DocTypes which made my columns completely disappear. So I did some research and learned of faux columns. I've been reading up on this topic a lot. It seems really hackish to me but I guess it's about the best option... Anyway, I am getting so confused with the examples. Most have too much extra stuff in the source that isn't necessary for creating the columns to wade through. At this highest point of frustration, I now just want to show exactly what I'm trying to do in the simplest form and see if I can get some clearer insight or get pointed in the direction of a better example. Here is my code without the DocType so it looks exactly how I want it to. I want this same exact look (different colors probably though) with a doctype. <html> <head> <title>Test</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #leftcol { background: #99FFCC; float: left; width: 20%; height: 100%; border-right: 1px #000000 solid; } #rightcol { background: #99FFCC; float: right; width: 20%; height: 100%; border-left: 1px #000000 solid; } #content { background: #FFFFFF; float: left; width: 59%; height: 100%; } --> </style> </head> <body> <div id="leftcol"></div> <div id="rightcol"></div> <div id="content"> </div> </body></html> Any insight?
  5. I was asking around on another forum about an issue I was having regarding having a border of an image change color when I hover over the image. The hover was working fine until you clicked it once and the initial gray border just disappeared. That issue is fixed, however when I click the link now the hover stops working. Here is my code... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Costumes and Props</title> <META name="description" content="Flammend Schadel Studios"> <META name="keywords" content=""> <style type="text/css"> <!-- body { background-image: url('images/CostumesAndProps.gif'); background-repeat: no-repeat; background-attachment: fixed } td { padding-bottom: .28cm; } a:link { float:left; border:solid 1px rgb(130,130,130); padding:2px; margin-right:10px; } a:hover { float:left; border:solid 1px white; padding:2px; margin-right:10px; } a:visited { float:left; border:solid 1px rgb(130,130,130); padding:2px; margin-right:10px; } --> </style> </head> <body bgcolor="black"> <p align="right"> <table border="0"> <tr> <td><a href="#"><img src="images/CobraCommander/CCLink.gif" border="0"></a></td> <td><a href="#"><img src="images/GothicArmor/HarnessLink.gif" border="0"></a></td> <td><a href="#"><img src="images/LensGothic/LensHarnessLink.gif" border="0"></a></td> <td><a href="#"><img src="images/MuchAdo/506PIRLink.gif" border="0"></a></td> <td><a href="#"><img src="images/FoolsMotley/FoolLink.gif" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="images/Shields/GreenProtoLink.gif" border="0"></a></td> <td><a href="#"><img src="images/SkullBoss/SkullBossLink.gif" border="0"></a></td> </tr> </table> </p> </body></html> The page is located at this site. Then click on the "Costumes and Props" link on the left.
×
×
  • Create New...