CSS - Css Style Not Working In Php Form Button

Hello all,

I'm modifying Cory LaViska's PHP_File_Tree cascading style sheet, default.css, to remove the round bullets from the LI tags.

Browsed through the forums to find a solution to my problem with no luck.

Please, take a look at my test website: www seemyinvestments dot com

There, you can see what I'm talking about.

The webpage lists a directory tree on the left-hand side, and I want to get rid of the bullets (the little dark dots).

I've tried a number of ways of implementing 'list-style-type: none;' (You'll see one attempt below labelled 'not working!')

Doesn't work for Firfox or IE.

Any suggestions?

Thanks.

Code:

/* PHP File Tree Default Theme

	By Cory LaViska (http://abeautifulsite.net/)
	Featuring the Silk Icon Set from famfamfam (http://www.famfamfam.com/lab/icons/silk/)

*/

    .php-file-tree {
	    font-family: Georgia;
	    font-size: 12px;
	    letter-spacing: 1px;	
	    line-height: 1.5;
    }

	.php-file-tree A {
		color: #000000;
		text-decoration: none;
	}
	
	.php-file-tree A:hover {
		color: #666666;
	}

	.php-file-tree .open {
		font-style: italic;
	}
	
	.php-file-tree .closed {
		font-style: normal;
	}
	
	.php-file-tree .pft-directory {
		list-style-image: url(images/directory.png);
	}

	.php-file-tree .pft-directory-empty {
		list-style-image: url(images/directory_empty.png);
	}

	/* Default file */
	.php-file-tree LI.pft-file { list-style-image: url(images/file.png); }
	
	/* Additional file types */
	.php-file-tree LI.ext-3gp { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-afp { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-afpa { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-asp { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-aspx { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-avi { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-bat { list-style-image: url(images/application.png); }
	.php-file-tree LI.ext-bmp { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-c { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-cfm { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-cgi { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-com { list-style-image: url(images/application.png); }
	.php-file-tree LI.ext-cpp { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-css { list-style-image: url(images/css.png); }
	.php-file-tree LI.ext-doc { list-style-image: url(images/doc.png); }
	.php-file-tree LI.ext-exe { list-style-image: url(images/application.png); }
	.php-file-tree LI.ext-gif { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-fla { list-style-image: url(images/flash.png); }
	.php-file-tree LI.ext-h { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-htm { list-style-image: url(images/html.png); }
	.php-file-tree LI.ext-html { list-style-image: url(images/html.png); }
	.php-file-tree LI.ext-jar { list-style-image: url(images/java.png); }
	.php-file-tree LI.ext-jpg { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-jpeg { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-js { list-style-image: url(images/script.png); }
	.php-file-tree LI.ext-lasso { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-log { list-style-image: url(images/txt.png); }
	.php-file-tree LI.ext-m4p { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-mov { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-mp3 { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-mp4 { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-mpg { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-mpeg { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-ogg { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-pcx { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-pdf { list-style-image: url(images/pdf.png); }
not working! --->	.php-file-tree LI.ext-php { list-style-image: url(images/php.png); list-style-type: none; }
	.php-file-tree LI.ext-png { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-ppt { list-style-image: url(images/ppt.png); }
	.php-file-tree LI.ext-psd { list-style-image: url(images/psd.png); }
	.php-file-tree LI.ext-pl { list-style-image: url(images/script.png); }
	.php-file-tree LI.ext-py { list-style-image: url(images/script.png); }
	.php-file-tree LI.ext-rb { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-rbx { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-rhtml { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-rpm { list-style-image: url(images/linux.png); }
	.php-file-tree LI.ext-ruby { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-sql { list-style-image: url(images/db.png); }
	.php-file-tree LI.ext-swf { list-style-image: url(images/flash.png); }
	.php-file-tree LI.ext-tif { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-tiff { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-txt { list-style-image: url(images/txt.png); }
	.php-file-tree LI.ext-vb { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-wav { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-wmv { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-xls { list-style-image: url(images/xls.png); }
	.php-file-tree LI.ext-xml { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-zip { list-style-image: url(images/zip.png); }
	/* You can add millions of these... */

Hi,

At my site webpage http://www.pt2fansite.com/demo/monsters.pl there is a list on the middle where after the name of monster the colors changes that table has Code:

style="margin-left: 6; padding-top: 2px;"

but once i putted it all together it stoped working and is no longer giving the space to it....

What could be possible making it not work ? i have tried to put it into my style.css file and out of it and both ways it does not work.

thanks for any help

gday

i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't..

eg.
<table style"display: none;"></table>

with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space

thoughts?

I have four social media buttons on my webpage that aren't being activated properly.

http://www. andreagriecodesign .com/test/about.html

When viewing the page on Firefox, they only become activated when the cursor is dead center of the button or below (to the bottom edge of the button).

Any suggestions why and how to fix? I don't have this problem with any other images on any other pages.

Thanks

I have a form that displays the filled in results in an email but using all html. This is difficult to read for the user. Can this be easily corrected? Maybe apply a style sheet or something?

It looks like:
Code:

<html>
<head>
<title>Moonbounce Adventures Order Form</title>
</head>
<body>
Name: name<br />
Company: <br />
Address: add<br />
City: town - State: de - Zip: 19809<br />
E-Mail Address: name@.net<br />
Daytime Phone: 666-666-666<br />
Fax: <br />
Date of Event: 06/04/2005<br />

Hey any idea why submit button at this page is not working???

http://www.ajilanyureq.com

Am I missing something? I am using the following code and it works if I put it in the head, but doesn't work if I put it in an external style sheet. I know I am sleep deprived but am I missing something simple?


.m_isabel
{
display: block;
width: 175px;
height: 20px;
background: url("jpg/m_isabel.jpg") no-repeat 0 0;

}

.m_isabel:hover
{
background-position: 0 -20px;
}

.m_isabel span
{
display: none;
}


In body:

<a href="#" class="m_isabel" title="Isabel"><span>F. Isabel </span></a>

I am redesigning a web application . I want to introduce color themes in it. When i click on a particular theme i want a new look to appear including buttons. For this i m using the below css code which uses only 3 button images(single image sliced in 3)wherin only the background color is to be changed thru css and new button gets created.


Code:

body {
margin: 0;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }


HTML code:

<div class="btn btn_addtocart"><a href="#>Submit</a><span></span></div>
<div class="clear"></div>
Background Color: Red

For eg in a login screen
The earlier web application used:

<input type="image" onclick="javascript:return validate()>
wherin the validate function includes

Code:

function validate()
{
var user = document.login.loginid.value;
var pwd = document.login.loginid.value;

if(document.login.loginid.value.length==0)
{
alert("Enter user name");
return false;
}
if(document.login.password.value.length==0)
{
alert("Enter password");
document.login.password.focus();
return false;
}
return true;
}

I am not able to use javascript:return validate() with this new html code
i.e.
<div class="btn btn_addtocart">
<a href="#>Submit</a><span></span></div>
<div class="clear"></div>
Background Color: Red


Please help me with a similar css to run the above javascript or an alternative javascript to run the above css code.

When I add a gradient image to my submit button it works fine in IE but won't depress in Firefox or Netscape. The form action works OK, but it's just the button doesn't do anything on screen with the mouse click...What am I doing wrong?

input.btn{
border-style: outset;
border-width: thin;
border-color:#CCFFFF;
color:black;
font-size: 60%;
font-weight:bold;
background: url(images/gradient.jpg) repeat-x;
}

I have designed one page. I am getting correct behavior in IE but there is some problem with Mozilla.

Here is the code sample:

<DIV class=ColumnHeader><SPAN class=noSort style="WIDTH: 6%; TEXT-ALIGN: center"><input type=checkbox id=chkSelAllAvail value="" name=chkSelAllAvail></SPAN> <SPAN style="WIDTH: 20%">Year</SPAN> <SPAN style="WIDTH:36%">Type of Report</SPAN> <SPAN style="WIDTH:24%">End Date</SPAN></DIV>

I have attached both screen shots of IE and Mozilla.

Can anyone help me ??

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

Hello.

I have created a form with CSS and Divs. My problem is my "Submit your Testimonial" button background is all messed up and doesn't look like my "Reset Form" button in IE 6.0 SP2. It looks fine in Firefox.

Not sure how or where this gets changed. It seems to be adding a thicker border or something?

Here is the page:
http://www.nessphysiotherapy.com/testimonials.php

Suggestions?

Thanks

Matt

Hi all,

I'm working on styling a form button at the moment. I've got it styled perfectly to how I want it, with the correct mouseover and mouseout colours (mouseOver = light grey, mouseOut = white). However when the page is loaded initially, the background colour is set to something I haven't manually chosen - darker grey. Once I put the cursor over it and off it, the desired colours appear; however it's just this initial-colour problem that I can't seem to root out.

Here's the link.
Button.html

I believe this initial colour is the background colour of a standard button, but I can't seem to fix it so that it doesn't appear.

Anyone know how to fix this?

Thanks
Jaiyan

Code:

<html>
<head><title></title>

<style type="text/css">

  INPUT.formButton {
		color: Gray;
		font: 11px Arial,Helvetica,sans-serif;
		text-decoration: none;
                background-color: white
		border: 1px solid #708090;
		text-align: center;
		display: block;
		width: 150px;
		padding: 3px 5px;
		/*margin: 7px;*/
	}

  </style>

</head>
<body>

<form action="/expense_attach.phtml" method="post">
<input type="submit" name="which" class="formButton" onmouseover="this.style.background='#DADADA'; return true" onmouseout="this.style.background='#FFFFFF';" value="Investigator">
</form>

</body>
</html>

Is there a way in CSS to set rollover effects on form buttons?

Such as different bg colour, diff fonts, etc..