Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can CSS affect links or is it SP2?

Status
Not open for further replies.

LEICJDN1

Technical User
Nov 27, 2002
201
0
0
GB
Weird problem.

I run a small ASP database application on my hard drive acting for cataloguing references. Works perfectly. Searching populates a table with file details, the name set a link to the PDF so it can be opened in a new window via "_target=blank".

I used it for the first time in a while and it all works fine except nothing happens if you click on a link, or right click and choose open in new window. To investigate I copied the source and all looked well. Ran the source as new page which worked fine except could not find the CSS code as in the wrong tree, but bizzarely the links now work.

Put same file back in main folder so CSS is active and links fail.

The only change since is the addition of Service Pack 2. It does not flag any ActiveX or script errors though - clickin the link just does nothing at all.

Could SP2 have influenced how the CSS is implemented?? Seems unlikely to me?

Here is the CSS code I use (borrowed from bluerobot)

Code:
body {
	color:#333;
	background-color:#eee;
	margin:10px;
	padding:0px;
	font:11px verdana, arial, helvetica, sans-serif;
	}
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:23px;
	font-weight:900;
	color:#000;
	}
h2 {
	font:bold 12px/14px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 5px 0px;
	padding:0px;
	}
p {
	font:11px/20px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 10px 0px;
	padding:0px;
	}
	
.Content>p {margin:0px;}
.Content>p+p {text-indent:0px;}

a {
	color:#09c;
	font-size:11px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight:600;
	text-decoration:none;
	}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}

.headmenu {
	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:auto;
	margin:10px 10px 10px 0px;
	border:1px solid black;
	background-color:white;
	padding:10px;
		}
  

/* All the content boxes belong to the content class. */
.content {
	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:auto;
	margin:10px 10px 10px 0px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
	}


#navAlpha {
	position:absolute;
	width:150px;
	top:148px;
	left:20px;
	border:1px dashed black;
	background-color:#eee;
	padding:10px;
	z-index:2;
	}
		
#navBeta {
	position:absolute;
	width:190px;
	top:20px;
	right:20px;
	border:1px dashed black;
	background-color:#eee;
	padding:10px;
	z-index:1;
	}

Is there anything there to explain this weird change in how the program works?

Thanks.
 
nope

--------------------------
"two wrongs don't make a right, but three lefts do" - the unknown sage
 
Thanks, must be something to do with my source code then? Although I have not edited it at all but it has stopped working.

I also tried renaming the CSS sheet so that the base application cannot find it - but the links don't work.

So, the 'native' source does not work with or without the CSS, but if I copy and paste the source it then works fine (albeit without CSS).

Weird.

Here is my source code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<?xml version="1.0" encoding="UTF-8"?>
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Reference Manager" />
<meta name="keywords" content="Reference Manager" />

	<title>Reference Manager</title>
	<style type="text/css" media="screen">@import "style.css";</style>
	
</head>

<body>
<a name="top">
<div class="headmenu">
<h1>Reference Manager</h1>
<p>Search Results</p>
</div>

<div class="content">
<h2 style="color:black">A to Z listing</h2>
<table cellpadding="6">
<tr>
<td><a  href="asearch.asp?A">A</a></td>
<td><a   href="asearch.asp?B">B</a></td>
<td><a   href="asearch.asp?C">C</a></td>
<td><a   href="asearch.asp?D">D</a></td>
<td><a   href="asearch.asp?E">E</a></td>
<td><a   href="asearch.asp?F">F</a></td>
<td><a   href="asearch.asp?G">G</a></td>
<td><a   href="asearch.asp?H">H</a></td>
<td><a   href="asearch.asp?I">I</a></td>
<td><a   href="asearch.asp?J">J</a></td>
<td><a   href="asearch.asp?K">K</a></td>
<td><a   href="asearch.asp?L">L</a></td>
<td><a   href="asearch.asp?M">M</a></td>
<td><a   href="asearch.asp?N">N</a></td>
<td><a   href="asearch.asp?O">O</a></td>
<td><a   href="asearch.asp?P">P</a></td>
<td><a   href="asearch.asp?Q">Q</a></td>
<td><a   href="asearch.asp?R">R</a></td>
<td><a   href="asearch.asp?S">S</a></td>
<td><a   href="asearch.asp?T">T</a></td>
<td><a   href="asearch.asp?U">U</a></td>
<td><a   href="asearch.asp?V">V</a></td>
<td><a   href="asearch.asp?W">W</a></td>
<td><a   href="asearch.asp?X">X</a></td>
<td><a   href="asearch.asp?Y">Y</a></td>
<td><a   href="asearch.asp?Z">Z</a></td>
<td> &nbsp;::&nbsp; </td>
<td><a   href="asearch.asp?all">All References</a></td>
</tr>
</table>
<br />

<table cellpadding="2">
<tr>
<td><a href="search.asp" title="Search the Database">Search</a></td><td> &nbsp;::&nbsp; </td>
<td><a href="browse.asp" title="Add a new entry">Browse to add a new reference</a></td><td> &nbsp;::&nbsp; </td>
<td><a href="main.asp" title="Add a new entry">Back to start</a></td>
</tr>
</table>

	
</div>

<div class="content">
<h2 style='color:black'>Click the title to view it in a new window - hover mouse over link to view comments</h2>
<table cellpadding='5' border='0'>
<tr><td style='color:black;text-decoration:underline'><strong>Title</strong></td>
<td style='color:black;text-decoration:underline'><strong>Category</strong></td>
<td style='color:black;text-decoration:underline'><strong>Subject</strong></td>
<td style='color:black;text-decoration:underline'><strong>Author</strong></td>
<td style='color:black;text-decoration:underline'><strong>Journal</strong></td>
<td style='color:black;text-decoration:underline'><strong>Year</strong></td>
<td style='color:black;text-decoration:underline'><strong>Reference</strong></td>
<td style='color:black;text-decoration:underline'><strong>File</strong></td>
<td style='color:black;text-decoration:underline'><strong>Delete</strong></td>
<td style='color:black;text-decoration:underline'><strong>Edit</strong></td></tr>

<tr>
<td><a target='_blank' title='Comments here' href='D:\References\test.pdf'>Test entry</a></td>
<td style='color:black'>Cat</td>
<td style='color:black'>Sub</td>
<td style='color:black'>Sn</td>
<td style='color:black'>Jrnl</td>
<td style='color:black'>Year</td>
<td style='color:black'>Fullref</td>
<td style='text-transform:uppercase' style='color:black'>pdf</td>
<td><a style='color:red' href='delete.asp?683'>delete</a></td>
<td><a style='color:blue' href='edit.asp?683'>edit</a></td></tr>
</table><br />
<a href='#top'>Back to top</a>

</div>
</body>
</html>
 
Probably the z-index has pushed the links underneath another div. It happens with absolute positioning.


Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Thanks Chris,

I had wondered about that hence my attempt at running with no CSS by renaming it - the problem persisted. Does that rule Z-index faults out?

JDN
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top