5 Replies - 2099 Views - Last Post: 15 August 2012 - 06:32 AM

#1 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 222
  • View blog
  • Posts: 1,035
  • Joined: 25-June 12

HyperLinks Not Acting Like HyperLinks

Posted 10 August 2012 - 08:23 AM

Hello Everyone, I am hoping someone can assist me with a rather quirky matter.

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


Is This A Good Question/Topic? 0
  • +

Replies To: HyperLinks Not Acting Like HyperLinks

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3554
  • View blog
  • Posts: 10,335
  • Joined: 08-June 10

Re: HyperLinks Not Acting Like HyperLinks

Posted 10 August 2012 - 10:24 AM

could you post the directory structure of the files concerned?

are you using the file:// or http:// protocol?
Was This Post Helpful? 0
  • +
  • -

#3 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,502
  • Joined: 28-November 09

Re: HyperLinks Not Acting Like HyperLinks

Posted 10 August 2012 - 03:58 PM

Read starting here: http://baweaver.tumb...html-the-basics

Your HTML skills are going to get you into some serious headaches later, that should help to show you some more efficient ways of dealing with page structure, css, classes, and the works.

Tables are for tabular data like databases. Divs, Sections, Asides, Footers, and Headers are for page structure.
Was This Post Helpful? 0
  • +
  • -

#4 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 222
  • View blog
  • Posts: 1,035
  • Joined: 25-June 12

Re: HyperLinks Not Acting Like HyperLinks

Posted 10 August 2012 - 09:17 PM

View PostLemur, on 10 August 2012 - 03:58 PM, said:

Read starting here: http://baweaver.tumb...html-the-basics

Your HTML skills are going to get you into some serious headaches later, that should help to show you some more efficient ways of dealing with page structure, css, classes, and the works.

Tables are for tabular data like databases. Divs, Sections, Asides, Footers, and Headers are for page structure.


Thanks for the link Lemur, it has some great info. This is like I said just some testing stuff I've been trying out. Haven't gotten around to changing the NavBar from a Table to a Unordered List, but do you see why the HyperLinks would not be functioning in FireFox, but do so in Explorer?

***UPDATE: Hyperlinks not behaving correctly in FireFox OR Chrome, but do so in Explorer.

This post has been edited by AnalyticLunatic: 10 August 2012 - 09:39 PM

Was This Post Helpful? 0
  • +
  • -

#5 EmiT FliX  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 05-August 12

Re: HyperLinks Not Acting Like HyperLinks

Posted 14 August 2012 - 06:37 PM

So what you are saying is:

The hyperlink's background isn't changing colour on mouse over?

trying using the hexadecimal code for the color instead of silver...



td:hover {
    background-color: silver;
    border-right: 3px solid black;
    border-left: 3px solid black;


also
<td class="tdStyle" style="background-color: silver">


your wanting a color change even though the color's are the same?

Eitherway, try changing it to a hexadecimal color code
http://www.colorpicker.com/
Was This Post Helpful? 0
  • +
  • -

#6 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 222
  • View blog
  • Posts: 1,035
  • Joined: 25-June 12

Re: HyperLinks Not Acting Like HyperLinks

Posted 15 August 2012 - 06:32 AM

View PostEmiT FliX, on 14 August 2012 - 06:37 PM, said:

So what you are saying is:

The hyperlink's background isn't changing colour on mouse over?

trying using the hexadecimal code for the color instead of silver...



td:hover {
    background-color: silver;
    border-right: 3px solid black;
    border-left: 3px solid black;


also
<td class="tdStyle" style="background-color: silver">


your wanting a color change even though the color's are the same?

Eitherway, try changing it to a hexadecimal color code
http://www.colorpicker.com/


Emit, thanks for the reply.

It's not just the mouseover color change. The cell itself is a hyperlink, but it is behaving like flat text and none of the CSS I created for it is functioning. It is really odd behavior that I have never come across before.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1