CSS is blocking button/links from working

**dissectcode** · 11-14-2010 05:05 PM

Hi - I am working with a group in school.

Someone put a nice effect on our pages where there is shading on all four sides of the jsp page.

However, if there is a button or link is in the outter areas of the pages, then they don't work. It's like the CSS is sitting on top. How can I fix that?? thank you

Code:

/* 
    Document   : master
    Created on : Oct 19, 2010, 9:13:30 PM
    Author     : hamzeh
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

* {
	margin: 0;
	padding: 0;
}

body
{
	padding: 50px;
}

p
{
	font-size: 1.5em;
	margin-top: 0.4em;
}

pre
{
	font-family: "Times New Roman";
	font-size:16px;
}

img
{
	padding-bottom:20px;
}

table.center
{
	margin-left:auto;
	margin-right:auto;
}

#top, #bottom, #left, #right
{
	background: black;
}

#left, #right
{
	position: fixed;
	top: 0; bottom: 0;
	width: 88px;
}

#left
{
	left: 0;
	background: url(images/left.png)
	left center repeat-y;
}

#right
{
	right: 0;
	background: url(images/right.png) right center repeat-y;
}

#top, #bottom
{
	position: fixed;
	left: 0; right: 0;
	height: 88px;
}

#top
{
	top: 0px;
	background: url(images/top.png) top center repeat-x;
}

#bottom
{
	bottom: 0px;
	background: url(images/bottom.png) bottom center repeat-x;
}

#wrap /*broken - do not use*/
{
	margin: 0 0 0 0;
	width: auto;
	float: left;
	text-align: justify;
}

Code:

        <div class="edge" id="left"></div>
	<div class="edge" id="right"></div>
	<div class="edge" id="top"></div>
	<div class="edge" id="bottom"></div> --%>

**pauledee** · 11-14-2010 05:25 PM

Hi

Can you give an example of a button or link that doesn't work?

**dissectcode** · 11-14-2010 05:37 PM

and i tried putting it in body

Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link href="../master.css" rel="stylesheet" type="text/css">

        <a href="student_account.jsp"style="float: right">My Account
        <title>Testing</title>
    </head>
    <body>

        <div class="edge" id="left"></div>
	<div class="edge" id="right"></div>
	<div class="edge" id="top"></div>
	<div class="edge" id="bottom"></div>
      
    </body>

**pauledee** · 11-14-2010 06:11 PM

Ok
Firstly, no anchor link will ever work in the <head> tags.
Secondly, the link needed the anchor tag to be closed with a '</a>'.

Finally, the reason why the link wasn't working in the body of the page was that your CSS was in conflict with iteslf.

The line I have commented out below should not have been there:

Code:

#top, #bottom
{
	position: fixed;
	left: 0; 
	/*right: 0;*/
	height: 88px;
}

With fixed positioning, you can't specify 'left' and 'right'... only ONE of the two. You can specify top and left, left and bottom, top and right, or right and bottom. Those combinations are fine but 'left' and 'right' are opposites and will not be understood by any browser. Same goes for defining 'top' and 'bottom' in the same style - it will never work.

EDIT>>>

So the correct html for your body is:

HTML Code:

<a href="student_account.jsp" style="float: right">My Account</a>

**dissectcode** · 11-14-2010 06:50 PM

Here is my updated master.css:

Code:

/* 
    Document   : master
    Created on : Oct 19, 2010, 9:13:30 PM
    Author     : hamzeh
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

* {
	margin: 0;
	padding: 0;
}

body
{
	padding: 50px;
}

p
{
	font-size: 1.5em;
	margin-top: 0.4em;
}

pre
{
	font-family: "Times New Roman";
	font-size:16px;
}

img
{
	padding-bottom:20px;
}

table.center
{
	margin-left:auto;
	margin-right:auto;
}

#top, #bottom, #left, #right
{
	background: black;
}

#left, #right
{
	position: fixed;
	top: 0; /*bottom: 0;*/
	width: 88px;
}

#left
{
	left: 0;
	background: url(images/left.png)
	left center repeat-y;
}

#right
{
	right: 0;
	background: url(images/right.png) right center repeat-y;
}

#top, #bottom
{
	position: fixed;
	left: 0; /*right: 0;*/
	height: 88px;
}

#top
{
	top: 0px;
	background: url(images/top.png) top center repeat-x;
}

#bottom
{
	bottom: 0px;
	background: url(images/bottom.png) bottom center repeat-x;
}

#wrap /*broken - do not use*/
{
	margin: 0 0 0 0;
	width: auto; /*(mess with the width here until it's the size you want)*/
	float: left;
	text-align: justify;
}

but it doesn't work for this jsp:

Code:

<body>

        <a href="student_account.jsp" style="float: right">My Account</a> <br>
        <a href="saved_schedules.jsp" style="float: right">View Saved Schedules</a> <br>

    
	<div class="edge" id="left"></div>
	<div class="edge" id="right"></div>
	<div class="edge" id="top"></div>
	<div class="edge" id="bottom"></div>
        
	<div id="twoColumnWrap">

		<div id="preferencesPanel">

			<img src="../images/matrix_logo2.png" alt="Matrices Logo" width="200" height="130">
</body>

here is the twoColumnWrap in case that's it:

Code:

#twoColumnWrap {
	margin:0 auto;
	width:950px;
}

#preferencesPanel {
	text-align:center;
	float:left;
	width:300px;
}

thank you

**pauledee** · 11-14-2010 07:23 PM

Weird. When I test your new CSS (including the twoColumnWrap stuff) and html - it works fine in IE7, FF3.0, FF3.5 and Chrome

Must be something else that is causing it - something you havent posted

Thread: CSS is blocking button/links from working

Thread Tools

Display

CSS is blocking button/links from working

example of button that doesn't work

still can't click the links

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions