www.webdeveloper.com
Results 1 to 6 of 6

Thread: CSS is blocking button/links from working

  1. #1
    Join Date
    Nov 2010
    Posts
    6

    CSS is blocking button/links from working

    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> --%>

  2. #2
    Join Date
    Sep 2010
    Location
    Melbourne, Australia - on loan from London, UK
    Posts
    56
    Hi

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

  3. #3
    Join Date
    Nov 2010
    Posts
    6

    example of button that doesn't work

    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>

  4. #4
    Join Date
    Sep 2010
    Location
    Melbourne, Australia - on loan from London, UK
    Posts
    56
    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>
    Last edited by pauledee; 11-14-2010 at 07:30 PM.

  5. #5
    Join Date
    Nov 2010
    Posts
    6

    still can't click the links

    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

  6. #6
    Join Date
    Sep 2010
    Location
    Melbourne, Australia - on loan from London, UK
    Posts
    56
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles