CSS - Underlining <form> Buttons

My form's Submit and Reset buttons are centered and aligned properly in Firefox and Opera, but ,of course, look ridiculous in Internet Exploder 7 - aligned center, but stacked vertically with the Submit button on top of the Reset. My form markup is below - can you tell me how to apply correct CSS to make my buttons behave in IE? If it matters, keep in mind that my form appears in the page's center column. The left column is floated left and the right column is floated right.
Code:

<div id="directory">
.
<ul>
   <li>
      <input class=\"submit\" name=\"submitButton\" type=\"submit\" value=\"Let's see 'em\" />&nbsp;&nbsp;
      <input class=\"submit\" type=\"reset\" value=\"Clear the Form\" />
   </li>
</ul>
.
</div>

and here's the applicable styling already in place:

#directory fieldset {
   margin:1.5em 0 0 0; padding:0;
}
#directory legend {
   margin:0;
   padding-left:15px;
   font-weight:bold;
}
#directory fieldset ul {
   list-style-type: none;
   padding: 1em 1em 0 1em;
}
#directory fieldset ul li {
   padding-bottom: 1em;
}

I'm trying to adjust the left and right padding in a form submit button (to fake a normal-looking link so I can use the form to pass php variables w/ $_POST instead of $_GET)...

I've put the padding-left:0em; everywhere I can think of, can't seem to influence the submit button padding.

Does anyone know anything about this one? Tricky...

My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons.

If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons.

Here is the site:
http:// bradleyrose . net / WaterStreetRestaurant

I want to get buttons like these with my CSS: http://members.cox.net/npalmi188/test.jpg
how do I do this? (don't worry about the color codes)
everytime I try to get something near it I get this gay gray extra bevel to my button, anybody know how to fix that? here's the code I was using that had the gray bevel:
Code:

input.button 
     { 
       font-family: MS Sans Serif;
       font-weight: none;
       font-size: 10px;
       color: #ffffff;
       background: #4C5844;
     }

I'm designing a web site and I have everything look identical in IE 5.01-7, Firefox 1.5 and Opera 9 (I still have to check mac compatibility) - though one thing that isn't the same on all is the input buttons. In IE, they're relatively the same but in Firefox it is completely off. I've attached an image to show what they all look like. I've tried a few things but I can't manage to get the firefox button to align correctly with the text input to the left of it.

Here's my CSS for the inputs:
Code:

input {
	background: #fff;
	border: 1px solid #000;
	height: 23px; }

any help is appreciated, thank you!

I'm trying to do custom active buttons in a Joomla horizontal menu. But they don't align correctly with the text. I assume it's because the pseudo element with the button is an absolute inside a relative positioned section. The only way I can move it is to fiddle with padding on the relative section. But that fixes some buttons and messes up others.
I've tried a lot of other things but they move the whole element and not just that background image.


Does anyone know a way to do this?

Here's the code:

Code:

ul.frc-hmenu>li>a
{
   position: absolute;
   display: block;
   height: 23px;
   cursor: pointer;
   text-decoration: none;
   color: #4A4A4A;
   padding:3px 12px;
   line-height: 23px;
   text-align: center;
}
/*change from absolute positioning*/
ul.frc-hmenu>li>a:before, ul.frc-hmenu>li>a:after
{
   position: absolute;
   display: block;
   content:' ';
   top: 0;
   bottom:0;
   z-index: -1;
   overflow: visible;
  background-image: url('../images/menuitem.png');


}

Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/

Okay so I have a basic CSS navigation panel on the left-hand side of my webpage. Basically I surrounded an <li> tag with a solid border so it's a rectangle with some text in the middle (ie. about, home, contact us, articles, etc) and I linked it using an <a> tag:

Example:
Code:

<ul>
<a href="home.html" class="button"><li>HOME</li></a>
<a href="about.html" class="button"><li>ABOUT</li></a>
...
</ul>

Then for CSS:
Code:

#navigation ul {
	width: 128px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation li {
	background: #CCC;
	padding-left: 5px;
	margin-top: 5px;
	border: 1px solid #000;
	border-left: 10px solid #336699;
}

#navigation a.button {
	color: #333;
	text-decoration: none;
}

#navigation a.button:hover {
	color: #FFF;
}

The url is: Wolfenzon Schulman

It's a website for a firm I work for. So basically, on the FF edition, the buttons work as intended, the entire <li> tag is linked (<a>'ed) and you can click on any part of it to activate the :hover and follow the link. The IE version, you can only hover over the text and anywhere before that (probably because of the padding-left: 5px associated with it). No matter what I've seemed to come up with, the IE version will just not cooperate.

Is there a way to create oval buttons with CSS? I have an image of the button, and if I slice the image up in three sections, for example with two ends and a middle section for text, it becomes a mess if you go over a certain length. Is there a better way using CSS?

Hi,

Im just learning css and notice that alot of elements such as navigation can be done using bullet points.

Im wanting to make the .nav div into a button so i need to to be 30 pixels high and have a have a 1pixel white line underneath it, also is there a way to stop the indent?

my second question is when i add an image as a bullet point its aligned to the bottom of the text, can you change the position of it so its in the middle of it?

Code:

.nav {
	height:30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	line-height:30px;
}

.bul-sec {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-position: outside;
	list-style-image:url(images/bullets/sec.gif);
	line-height:30px
}

or is there a better way to do this? Thanks!

The problem that I am having is that my nav buttons will not show up unless you click on the the space first than they are there. This is the code it is done is html, css and php help would be great thanks. PHP Code:
<?php ?>
<html>
<head>
<title>CSS</title>
<style type="text/css"> 

a.menu , a.menu:link {
font-family:Arial, Helvetica, sans-serif;
font-weight : bold;
font-size:12px;
line-height : 30px; 
text-align : center;
text-decoration:none; 
color : #ffffff; 
} 
a.menu:visited {
background : url('Images/Untitled-1.png') no-repeat 0% 0%; 
width: 160;
height: 35;
color : #ff0000; 
} 
a.menu:hover {
background : url('Images/Untitled-2.png') no-repeat 0% 0%; 
color : #ffffff; 
font-weight : bold; 
} 
a.menu:active , body {
background : url('Images/Untitled-2.png') repeat; 
font-weight : bold; 
line-height : 30px; 
text-decoration : none; 
text-align : center; 
color : #ffffff; 
} 
body {
background-image : url(Images/brushedmetallighter.jpg); 
} 


</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<table width="199" height="210" border="0" align="left" bordercolor="#666666">
  <tr>
    <td width="187" height="80" align="left" valign="top" background="brushedmetallighter.jpg">
      <?php  
$hostname = "xxxx";    
$database = "xxxx";   
$username = "xxxx";   
$password = "xxxx";   
$connpt = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);     
mysql_select_db($database, $connpt);    
$sql = "SELECT * FROM mega ORDER BY productsID";    
$result = mysql_query($sql, $connpt) or die(mysql_error());    
if (mysql_num_rows($result) < 1) {    
    print "There are no items to display.";    
}  
else {     
    while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {    
        $Name = $row['productsName']; 
        $productsID = $row['productsID']; 
        $LeftBanner = $row['LeftBanner'];
        $BottomBanner1 = $row['BottomBanner1'];
        $BottomBanner2 = $row['BottomBanner2'];
        $BottomBanner3 = $row ['BottomBanner3'];
        $UpperLeftImage = $row ['UpperLeftImage'];
        $UpperRightImage = $row ['UpperRightImage'];
        $LowerLeftImage = $row ['LowerLeftImage'];
        $LowerRightImage = $row ['LowerRightImage'];      
        $Label = $row['Label'];   
        echo "<a href=\"mg_frame3.php?productsID=".$productsID."\"target=\"mainFrame\" class=\"menu\">".$Label."</a>  ";    
    }  
} 
?>
   </td>     
  </tr>
  <tr>
    <td height="50" align="left" valign="top" background="brushedmetallighter.jpg"><p><br>
        <br>
      </p>
    </td>
  </tr>
  <tr>
    <td height="71" align="left" valign="top" bordercolor="#000000" background="brushedmetallighter.jpg></td>
  </tr>
</table>
</body>
</html>

Was working on a new design for one of my sites today and when I inadvertently discovered using buttons as tabs, however...

I am more of a programmer than I am a designer. The tabs look differently in Firefox than they do in IE.

In IE, I give the currently tab more padding than the other buttons and those other buttons stay attached to the <div> below them.

In Firefox/Mozilla, the other buttons are raised up.

See here*

*You will notice that the Home page has rounded corners, while the About page does not; can't decide which one I like better

The other issue I have in IE is that when I button is being clicked/activated, it detaches itself from the <div> below.

--

Maybe a good time to also ask how I can accomplish something using div's or span's that I used to do with table's:

How would I have a 700px wide box, with a div at the top, split 50/50 so that I could have a small logo at the top left and a search box (on the same row) at the top right? I have always:
Code:

<table width="700">
<tr>
<td width="50%">logo</td>
<td width="50%" align="right">search box</td>
</tr>
</table>

--

One mo If I am using HTML 4.01 strict, can I still use: Code:

<td align="center" valign="middle">

or do I have to: Code:

<td style="text-align:center;vertical-align:middle">

Cheers!

I have 2 buttons that are not lining up in IE7. I have it working Safari and Firefox on the MAC, but my PC IE browser won't align the buttons. I have tried everything, but no luck.

Here's the site: http://www.caillouette.com/Utilitrek/four/

Here's the CSS for the button elements:
Code:

#bottombox{
clear:both;
	float:left;
	display:inline;
	width:710px;
	height:61px;
	margin:0px 0px 0px 0px;
}

.collectionBig
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
width: 271px;
height: 61px;
margin: 0 0 0 0px;
padding: 0;
}

.collectionBig a
{
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
color: #000000;
font-size: 11px;
width: 271px;
height: 61px;
float: left;
color: black;
text-decoration: none;
}

.collectionBig img
{
width: 271px;
height: 61px;
border: 0;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;

}

* html a:hover
{
visibility:visible;
}

a:hover img
{
visibility:hidden;
}

.memberBig
{
float:right;
position: absolute;
top:0;
margin-right:5px;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/membershipBig_on.gif) no-repeat;
/* white-space: wrap;  */ 
display: inline;
width: 414px;
height: 61px;

padding: 0 0 0 0;
}

.memberBig a
{
display:inline;
color: #000000;
font-size: 11px;
width: 414px;
height: 61px;
float: right;
color: black;
text-decoration: none;
}

.memberBig img
{
width: 414px;
height: 61px;
border: 0;
}

"collectionBig" and "memberBig" are wrapped inside of the "bottombox" div

any help is appreciated.
-S

Hi I have built some nav buttons on my site and they looked as I wanted however when i attached links to them a border appeared around the image can someone tell me how to get rid of them please. DYNAMIC WEB DESIGN thankyou in advance.

I'm trying to get these CSS buttons into a CSS list, but they aren't stacking vertically and I can't seem to remove the bullet (at least, not on FF). Any insight as to how I can get these to appear top to bottom?

http://www.concrete-creative.com/buttons/buttons_list.html

the HTML:
Code:

<div>
<ul class-"buttons">
	<li class="button1"><a href="#"><span>Gray Buttons</span></a></li>
	<li class="button6"><a href="#"><span>Orange Button</span></a></li>
</ul>
</div>

the CSS:
Code:

ul.buttons {
  list-style-type: none
  }

/* GRAY BUTTON */
li.button1 a {
    background: transparent url('images/gray_ends.png') no-repeat scroll top right;
	font-family: Helvetica, Verdana, Arial, sans-serif;
    color: #000000;
    display: block;
    float: left;
    font: normal 11px arial, sans-serif;
    height: 22px;
    margin-right: 6px;
    padding-right: 8px; /* sliding doors padding */
    text-decoration: none;
}
li.button1 a span {
    background: transparent url('images/gray_body.png') no-repeat;
    display: block;
    line-height: 12px;
    padding: 5px 0 5px 8px;
} 
li.button1 a:hover {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
li.button1 a:hover span {
    background-position: bottom left;
} 

then same CSS for orange button - button6