New Topic/Question
Reply
I have 2 Folders where I am using the same files with slightly different CSS, Files/Files2. Files is my original design. In Files2, I have been changing the CSS around and trying out a few new CSS tricks I've learned. The below are from Files2, and I can't seem to understand why my HyperLinks for the NavigationBar are not working. It is the same across the other 2 pages, index.html and history.html. I am just using the contact page here as an example as it is the most simplistic page so far. The hyperlinks are not working, the td:hover style is not changing the background-color when mousing over, nothing. The items in my NavigationBar are acting like plain text.
Can anyone spot the source of my issue? I thought after failing to find the issue at 12:30 this morning, perhaps some sleep would enable me to have a better viewpoint, sadly though, the issue stills eludes me
Any and all help appreciated!
-AnalyticLunatic
***EDIT: Everything is working in Internet Explorer, but my friendly and preferred FireFox is where it is failing as mentioned above.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title>Contact Charger</title> </head> <body> <div id="Container"> <div id="bg"> <img src="../images/BlackBoardStyle.jpg" alt="Background" /> </div> <div id="Header"> <img src="../images/imgHeader.jpg" alt="Header" /> <table style="border-collapse: collapse"> <tr style="border-bottom: black 3px solid; border-top: black 3px solid"> <td class="tdStyle"><a href="index.html">Home</a></td> <td class="tdStyle"><a href="history.html">Our History</a></td> <td class="tdStyle">Boats</td> <td class="tdStyle">296 PRO TEAM</td> <td class="tdStyle">Brochure</td> <td class="tdStyle">Dealers</td> <td class="tdStyle">Downloads</td> <td class="tdStyle" style="background-color: silver"><a href="contact.html">Contact Us</a></td> </tr> </table> </div> <div id="Main"> <form> <div class="box"> <h1>Contact Form :</h1> <label><span>Full Name</span><input type="text" class="input_text" name="name" id="name"/></label> <label><span>Company</span><input type="text" class="input_text" name="name" id="name"/></label> <label><span>Website</span><input type="text" class="input_text" name="name" id="name"/></label> <label><span>Email</span><input type="text" class="input_text" name="email" id="email"/></label> <label><span>Address</span><input type="text" class="input_text" name="name" id="name"/></label> <label><span>City</span><input type="text" class="input_text" name="name" id="name"/></label> <label><span>State/Province/Zip</span><input type="text" class="input_text" name="name" id="name"/></label> <label><span>Phone</span><input type="text" class="input_text" name="name" id="name"/></label> <label><span>Subject</span><input type="text" class="input_text" name="subject" id="subject"/></label> <label><span>Message</span><textarea class="message" name="feedback" id="feedback"></textarea><input type="button" class="button" value="Submit Form" style="margin-right: 100%"/></label> </div> </form> </div> <div id="Footer"> <table style="background-color:#CCC"> <tr><td class="tdStyle" style="border-collapse: collapse">Charger Boats PO Box 709, Richland MO, 65556 | Phone: 573-765-3265 | © 2012 Charger Boats</td></tr> </table> </div> </div> </body> </html>
CSS:
@charset "utf-8";
/* CSS Document */
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
z-index:-1;
}
#Header {
width: 100%;
max-width:1250px;
margin-bottom: 10px;
border-color: #900;
background-color: #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
height: 190px;
}
table {
border: 0px;
background-color:#CCC;
width: 100%;
}
td:hover {
background-color: silver;
border-right: 3px solid black;
border-left: 3px solid black;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: black;
}
body, html {
text-align: center;
height: 100%
}
#Container {
width: 1250px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 10px;
background-color:#900;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
min-height: 100%;
margin-top: 0px;
}
#Main {
width: 99%;
margin: 3px;
}
#mainLeft {
width: 42.5%;
height: 100%;
float: left;
}
.text {
font-weight:bolder;
color: white;
padding: 10px;
background-color:black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
}
#mainRight {
width: 42.5%;
height: 100%;
float: left;
}
.rndBorder {
padding: 10px;
border: 10px;
border-color: black;
background-color: black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
height: 384px;
width: 512px;
}
.rndBorderFull {
padding: 10px;
border: 5px solid black;
border-color: black;
background-color: black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
height: 480px;
width: 720px;
margin-bottom: 10px;
}
#Footer {
width: 99%;
max-width:1250px;
bottom:0px;
height:30px; /* Height of the footer */
font-weight:bolder;
color: white;
margin-top: 10px;
margin-top: 100px;
}
.tdStyle {
width: 9%;
background-color:#900;
text-align:center;
font-size:13px;
font-weight:bolder;
color: white;
font-size:20px;
}
div.box {
margin:0 auto;
width:500px;
background:#222222;
position:relative;
top:50px;
border:1px solid #262626;
padding: 25px;
background-color: grey;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
}
div.box h1 {
color:#ffffff;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}
div.box label {
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span {
display: block;
color:#bbbbbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .input_text {
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
}
div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
overflow:hidden;
height:150px;
}
div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
This post has been edited by AnalyticLunatic: 10 August 2012 - 08:25 AM
MultiQuote
| 