Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to disable css for input field

    Hello.

    There is a css form which is defined for the entire web domain.
    It is defined as #reports input { ... }
    Now I want my input field not to use css at all. How can i do that.

    I have tried

    <input style="none" ... /> <-- didnt work
    <input class="someClassThatDoesntExist" ... /> <--- didn't work
    <input id="someIdThatDoesntExist ... /> <--- didnt work

    I have tried googling, but couldnt find the answer. Does anybody have a clue how I can fix it?
    Last edited by cash1981; 05-21-2007 at 10:30 AM.

  • #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    I believe the best way would be to define the style attributes you wish it to have. Being that relying on browser defaults is not consistent.

    Also note that the specificity that you are referring to is in fact overridden by the last example you noted at the very least.

    some properties would take 'none' or 'normal', etc. but it would depend on the property.

    Whats the definition you are trying to override? Whats the implementation? It seems like you should lessen the specificity of the problematic definition. Do you not have access to it? Are you trying to violate some imposed style? (i.e hide a form that is mandatory as per the TOS of some service?)

    http://www.google.com/search?q=specificity+css
    Last edited by zro@rtv; 05-21-2007 at 10:32 AM.
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You can't remove styles, only change them. Set the styles to how you want it to look.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by zro@rtv View Post
    I believe the best way would be to define the style attributes you wish it to have. Being that relying on browser defaults is not consistent.

    Also note that the specificity that you are referring to is in fact overridden by the last example you noted at the very least.

    some properties would take 'none' or 'normal', etc. but it would depend on the property.

    Whats the definition you are trying to override? Whats the implementation? It seems like you should lessen the specificity of the problematic definition. Do you not have access to it? Are you trying to violate some imposed style? (i.e hide a form that is mandatory as per the TOS of some service?)

    http://www.google.com/search?q=specificity+css
    Well basically the css goes like this:
    Code:
    #reports input{
    	float: left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    	width: 60px;
    }
    Now I would like to disable the width for my inputs. But I cannot remove it from the css, because then other inputs will get ugly.
    Any clue on how to do this?

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    You can't remove styles, only change them. Set the styles to how you want it to look.
    But how? As I have written the input style has already been set, and I cannot change that. But I don't want it to be applied to my input fields.

  • #6
    New to the CF scene
    Join Date
    Jan 2007
    Location
    127.0.0.1
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by cash1981 View Post
    But how? As I have written the input style has already been set, and I cannot change that. But I don't want it to be applied to my input fields.
    Make classes for the input fields, set them to how you wish for them to look.

    <input type="class"> ...

    It should override with the input{} in the CSS file.

  • #7
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by OutThisLife View Post
    Make classes for the input fields, set them to how you wish for them to look.

    <input type="class"> ...

    It should override with the input{} in the CSS file.
    Ok, so basically I need to create a new class in the css. But I tried to do that using #reports something {}
    and added that to the input field. But still it used the "mother" one. So what you are saying is that I basically should input some values there? I can't just have blank so that it uses the default one?

  • #8
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Bah still doesn't work. Ok here is my code snip:

    Code:
    #reports input{
    	float: left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    	width: 60px;
    }
    #reports input.large{
    	width: 250px;
    }
    #reports input.submit{
    	width: 70px;
    	font-weight: bold;
    }
    #reports input.submit2{
    	width: 150px;
    }
    #reports input.small{
    	width: 50px;
    }
    #reports overrideInput {
    	width: 10px;
    }
    Code:
    <div id="reports">
    	<div id="top">
    		<ul>
    		  <li><a href="../index.jsp">Søk</a></li>
    	  	  <li><a href="../index.jsp?form=addReport">Ny rapport</a></li>
    		  <li><a href="../index.jsp?form=addCompany">Nytt firma</a></li>
    		  <li><a href="admin/index.jsp" class="active">Admingrensesnitt</a></li>
    		</ul>
    	</div>
    
    	<br/>
    	<br/>
    	<br/>
    	
    	<reports:listCompanies var="companyList" />
    	<table>
    	<tr>
    	<th align="left">Firmanavn</th>
    	<th align="center">Rediger</th>
    	<th align="center">Slett</th>
    	</tr>
    	<c:forEach var="company" items="${companyList}">
    		<tr>
    	    <td><a href="../index.jsp?action=search&companyId=<c:out value="${company.id}"/>&year=all"><c:out value="${company.name}"/></a></td>
    	    <td>
    	    	<form name="editCompanyForm" action="editCompany.jsp" method="POST">
    			<input class="overrideInput" type="hidden" name="companyId" value="<c:out value="${company.id}"/>"/>
    	        <input class="overrideInput" type="hidden" name="returnpage" value="index.jsp"/>
    	        <input class="overrideInput" type="image" src="images/edit.png" border="0" alt="Rediger selskap">
    	    </td>
    	        </form>
            <td>   	
               	<form name="removeForm" method="POST" action="deleteCompany.jsp">
    	        <input class="overrideInput" type="hidden" name="companyId" value="<c:out value="${company.id}"/>"/>
    	        <input class="overrideInput" type="hidden" name="returnpage" value="index.jsp"/>
    	        <input class="overrideInput" type="image" src="images/delete.png" border="0" alt="Slett" onclick="document.removeForm.action=(confirm('Er du sikker på at du vil slette?\nNB: Alle rapporter til selskapet blir også slettet'))?'deleteCompany.jsp':'?';" />
    	        </form>
    	    </td>
    	</tr>
    	</c:forEach>
    </table>
    </div>
    Here I put the class in the input but it still uses the #reports input style

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by cash1981 View Post
    and added that to the input field. But still it used the "mother" one. So what you are saying is that I basically should input some values there? I can't just have blank so that it uses the default one?
    You can if you remove the default style rule or the relevant part of it. You don’t want a width specified, so why not just remove the width: 60px declaration?

    Quote Originally Posted by cash1981 View Post
    Bah still doesn't work. Ok here is my code snip:
    Why are you setting a fixed width that you don’t want? According to your code, you don’t want it for any of the six input elements.

    Based on your code, you can use the following CSS to return the width to the default. The better alternative would seem to be to not declare a width in the first place though; then you wouldn’t need to use the below code.
    Code:
    #reports input { width: auto; }
    /* if that doesn’t work, try */
    #reports input { width: auto !important; }
    You can’t “disable” the width or any other CSS property, by the way. You can only restore the default value. In this case, the default value is auto.

    That said, your code looks like it could use some improvement. For example, some things like the align attribute could be converted to CSS and you could use more semantic class names that describe the content instead of what you want to do with it presentation‐wise; a name of overrideInput seems to be equivalent to overrideInputPresentation as far as meaning goes.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post

    Why are you setting a fixed width that you don’t want? According to your code, you don’t want it for any of the six input elements.
    The reason why this is set is because it is used somewhere else on the domain. So I need to figure out how I can change this, preferably auto for just those input fields I have put the other class for.

    Hope I cleared things up.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    We need you to post the generated html, not the html with the server side stuff in it. A link would be preferred. Quit having us guess. Help us help you.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Anything set dor an id is more specific than whatever is set for a class and so takes precedence.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    We need you to post the generated html, not the html with the server side stuff in it. A link would be preferred. Quit having us guess. Help us help you.
    Sure here is the generated HTML code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>Admin grensesnitt</title>
    	<meta name="generator" content="Eclipse" />
    	<meta name="author" content="Shervin Asgari" />
    
    	<meta name="keywords" content="" />
    	<meta name="description" content="" />
    	<link rel="stylesheet" type="text/css" href="/intranet_news/include/css/intranet_news.css;jsessionid=795622D6C4BFCC2FBE368F07A6537614" media="screen"/>
    </head>
    <body>
    		<h3></h3>
    	<div id="reports">
    	<div id="top">
    		<ul>
    
    		  <li><a href="../index.jsp">Søk</a></li>
    	  	  <li><a href="../index.jsp?form=addReport">Ny rapport</a></li>
    		  <li><a href="../index.jsp?form=addCompany">Nytt firma</a></li>
    		  <li><a href="admin/index.jsp" class="active">Admingrensesnitt</a></li>
    		</ul>
    	</div>
    
    	<br/>
    	<br/>
    	<br/>
    	
    		<table>
    		<tr>
    		<th align="left">Firmanavn</th>
    		<th align="center">Rediger</th>
    		<th align="center">Slett</th>
    
    		</tr>
    		
    			<tr>
    		    <td><a href="../index.jsp?action=search&companyId=17&year=all">444</a></td>
    		    <td>
    		    	<form name="editCompanyForm" action="?form=editCompany" method="POST">
    				<input class="overrideInput" type="hidden" name="companyId" value="17"/>
       		        <input class="overrideInput" type="hidden" name="editCompany" value=""/>
    		        <input class="overrideInput" type="image" src="images/edit.png" border="0" alt="Rediger selskap">
    
    		    </td>
    		        </form>
    	        <td>   	
    	           	<form name="removeForm" method="POST" action="deleteCompany.jsp">
    		        <input class="overrideInput" type="hidden" name="companyId" value="17"/>
    		        <input class="overrideInput" type="hidden" name="returnpage" value="index.jsp"/>
    		        <input class="overrideInput" type="image" src="images/delete.png" border="0" alt="Slett" onclick="document.removeForm.action=(confirm('Er du sikker på at du vil slette?\nNB: Alle rapporter til selskapet blir også slettet'))?'deleteCompany.jsp':'?';" />
    		        </form>
    		    </td>
    
    		</tr>
    		</table>
    	
    	
    </div>
    </body>
    </html>
    And here is the CSS:
    Code:
    #reports{
    	float: left;
    	width: 100%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    	color: #000000;
    }
    #reports #top{
    	float: left;
    	padding: 5px 0px 5px 0px;
    	margin: 0px 0px 0px 0px;
    	width: 100%;
    }
    #reports #top ul{
    	float: left;
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 0px;
    	text-indent: 0px;
    	list-style-type: none;
    }
    #reports #top ul li{
    	float: left;
    	padding: 0px 0px 0px 0px;
    }
    #reports #top ul li a{
    	font-weight: bold;
    	background: #ece8e1;
    	color: #374d88;
    	font-size: 11pt;
    	padding: 4px 4px 4px 4px;
    }
    #reports #top ul li a.active{
    	background: #374d88;
    	color: #ece8e1;
    	padding: 4px 4px 4px 4px;
    }
    #reports fieldset{
    	float: left;
    	background: #ece8e1;
    	padding: 7px 7px 7px 7px;
    	margin: 5px 0px 5px 0px;
    	border: 1px solid #cccccc;
    	width: 480px;
    }
    #reports label{
    	float: left;
    	width: 190px;
    	font-weight: bold;
    	overflow: hidden;
    }
    #reports label.small{
    	float: left;
    	width: 70px;
    	padding: 0px 0px 0px 3px;
    	font-weight: bold;
    	overflow: hidden;
    }
    #reports select, #reports select option{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    }
    #reports input{
    	float: left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    	width: 60px;
    }
    #reports input.large{
    	width: 250px;
    }
    #reports input.submit{
    	width: 70px;
    	font-weight: bold;
    }
    #reports input.submit2{
    	width: 150px;
    }
    #reports input.small{
    	width: 50px;
    }
    #reports overrideInput {
    	width: 10px;
    }
    #reports table{
    	width: 100%;
    	float: left;
    	border-collapse: collapse;
    	border-top: 1px solid #cccccc;
    	border-bottom: 1px solid #cccccc;
    	border-left: 1px solid #cccccc;
    	margin: 0px 0px 5px 0px;
    }
    #reports table th{
    	padding: 4px 4px 4px 4px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9pt;
    	font-weight: bold;
    	background: #ece8e1;
    	border-bottom: 1px solid #cccccc;
    	border-right: 1px solid #cccccc;
    }
    #reports table th.left{
    	border-left: 0;
    	border-right: 1px solid #000000;
    }
    #reports table th.change{
    	border-right: 1px solid #000000;
    	width: 50px;
    }
    #reports table td{
    	border-bottom: 1px solid #000000;
    	border-right: 1px solid #cccccc;
    }
    #reports table td.left{
    	border-left: 0px;
    	border-right: 1px solid #000000;
    }
    #reports table td.change{
    	border-right: 1px solid #000000;
    	width: 50px;
    }
    #reports table td.small{
    	width: 25px;
    	border-bottom: 1px solid #cccccc;
    	border-right: 1px solid #cccccc;
    }
    #reports table.preview{
    	border: 0px;
    	width: 450px;
    	background: #ece8e1;
    }
    #reports table.preview th{
    	border: 0px;
    	background: #374d88;
    	color: #ece8e1;
    	font-size: 12pt;
    	text-align: left;
    }
    #reports table.preview td{
    	border: 0px;
    	color: #000000;
    }
    #reports table.preview td.border{
    	border-bottom: 1px solid #000000;
    }
    #reports h3{
    	font-size: 12pt;
    	float: left;
    	margin: 0px 0px 0px 0px;
    	padding: 5px 5px 5px 0px;
    }
    #reports h4{
    	font-size: 11pt;
    	font-weight: normal;
    	float: left;
    	margin: 0px 0px 0px 0px;
    	padding: 5px 0px 5px 5px;
    }
    #reports h5{
    	font-size: 11pt;
    	font-weight: bold;
    	color: #000000;
    	float: left;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    }

  • #14
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Anything set dor an id is more specific than whatever is set for a class and so takes precedence.
    Im really noob at CSS, so I can't say I understood what you ment here.

  • #15
    New Coder
    Join Date
    Feb 2007
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it to work.

    I wrote the CSS as this:

    Code:
    #reports input.overrideInput {
    	width: auto;
    }


  •  

    Posting Permissions

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