CSS - Remove Left-right Padding In Form Submit Buttons?

It seems that in Firefox, whenever I use the padding-left directive, it actually increases the size of the div by the amount I chose in padding-left. It doesn't do this in IE, all it does is pad the contents in, which is what I want. Is there any way to do this except for creating another div within that one that is padded-left...

Thanks in advance...

Hi guys,

as you all know when you got lot of text in a <button> element, the padding (left and right) of the latter becomes very annoying. Any way of removing it?

P.S. I am fully aware of the fact that setting margin:0 and padding:0 has no effect at all.

Thank you

I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except:

1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html

2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are :
#1 (for the menu) : thinkmarriage.org/catalog/menustyle.css
and
#2 (for the site) : thinkmarriage.org/catalog/stylesheet.css

The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it.
(Sorry, the rules won't permit me to place hyperlinks)

Hi
when using a submitbutton (<INPUT TYPE=SUBMIT ...) then the browser makes a grey button with big spaceing left and rigth of the button-text.
How can I get rid of this spacing??
I tryed style="margin:0;padding:0;border:0;background-color:#FFFFFF;"
The grey desapears, but the big spacing left and rigth is still there.

I am aware of image-submitbuttons, but i want to have text-submitbutton.
I want to use only html and css.
so no images, no javascript, no ...

thanks in advanc for help

Hi, just a quick question. Say I have two input buttons (Just like the submit post/preview post buttons at the bottom of the forms).

Code:

<input type="submit" value="blah" />
<input type="submit" value="lol" />

If I want to align them in the center of the row that they're on, I've had to wrap them in a <div> with the text-align: center attribute on the div. Is there anyway to accomplish this same purpose without having to use wrapper <div>s?

Hi all,

My first post here as I am struggling a bit with some CSS and i'm not sure where I am going wrong.

My brother built a site based on a template, but he needed some help with maintenance and both the html and css code was complete crap.

So I have started rebuilding the site from scratch to make it easier to maintain, and am copying a few bits and peices across from the old site to speed up the process.

One such peice was the nav menu.

As it stands the menu displays properly and the rollovers work etc, however it has some sort of mystery padding to the left hand side that I can't shift.

Please can you take a look at the files and let me know where i'm going wrong?

www [dot] dubtrippin [dot] com/test.html

Cheers, Paul.

Hello.

I have created a form for Member Login and added padding for the username and password input text (so it displays centred vertically and a offset from the left edge).

If looking at it with Firefox it works and looks perfect, I open it inside IE 8 and the padding is removed.

What am I missing?

This line is governing my inputs:
Code:

.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin input{

http://www.nessphysiotherapy.com/testing/testing.php


Form Elements:
Code:

<div id="popupbox"> <!--Start login box-->
<form name="login" action="" method="post" id="formlogin">
<div class="mainloginrow">
<input name="username" class="fielduser" size="14" maxlength="25"/>
<img src="../images/login_register.png" border="0" usemap="#register"/>
<map name="register" id="register">
  <area shape="rect" coords="27,10,95,29" href="" />
</map>
</div>
<div class="mainloginrow">
<input name="password" type="password" class="fieldpass" size="14" maxlength="30" />
<img src="../images/login_forgot.png" border="0" usemap="#forgotpass" />
<map name="forgotpass" id="forgotpass">
  <area shape="rect" coords="33,7,87,23" href="" />
</map>
</div>
<input name="submit" type="submit" class="submitlogin" value="" />
<input name="Button" type="button" class="closelogin" value="" onClick="loginclose(this.form)" />
     <map name="forgot_pass" id="forgot_pass">
        <area shape="rect" coords="41,36,113,76" href="" />
      </map> 
</form>
<br />
<!--<center><a href="javascript:login('hide');" class="alogin">close</a></center>--> <!-- Closes the box-->
</div> <!--End login box-->

CSS:
Code:

<style type="text/css">
/* Personal add-ons */
#loginmain {
	margin: 0 auto 0 0;
	width: 412px;
}
  #popupbox{
  margin: 0; 
  margin-left: 10%; /* This gets it relatively center on the screen */
  margin-right: 30%; /* This gets it relatively center on the screen */
  margin-top: 50px; /* Makes it a little off the top of the screen */
  /*padding-top: 10px; /*  Make the text not touching the top on the login box */
	padding:0px;
	width:420px;
  /*width: 20%; /* For centering it on the screen */
  height: 280px; /* The height of the login box */
  position: absolute; /* Makes sure its absolute so it doesn't dock with everything else */
  /*background: #FBFBF0; /* Login Box background color. Change this if desired. */
	background-image:url(../images/loginimage.png);
	background-repeat:no-repeat;
  /*border: solid #000000 2px; /* Makes a black border around the login box */
  z-index: 9; /* Makes it on top of everything else */
  font-family: arial; /* Sets the font */
  visibility: hidden; /* Makes it hidden at first. Very Important.*/
  }
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin {
		position:relative;
		padding:0px;
		margin-bottom:0px;
		margin-top:132px;
		margin-left:71px;
		height:148px;
	}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin input{
		position:inherit;
		width:210px;
		height:30px;
		background-image:url(../images/login_field_username.png);
		background-repeat:no-repeat;
		border:none;
		magin:0px;
		padding-bottom:0px;
		padding-left:10px;
		padding-right:0px;
		padding-top:0px;
		font-size:12px;
	}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin .fielduser {
	margin-bottom:23px;
	margin-right:0px;
}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin .fieldpass {
	margin-bottom:13px;
	margin-right:0px;
}

.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin .submitlogin {
	position:relative;
	background-image:url(../images/login_now_stand.png);
	background-repeat:no-repeat;
	width:125px;
	height:45px;
	padding:0px;
	margin-top:0px;
	margin-left:13px;
	margin-right:5px;
	margin-bottom:0px;
	border:none;
	}
.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin .closelogin {
	position:relative;
	background-image:url(../images/login_now_close.png);
	background-repeat:no-repeat;
	width:125px;
	height:45px;
	padding:0px;
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	border:none;
}
		#popupbox .alogin {
	position:relative;
	width:100%;
	height:15px;
	padding:0px;
	margin-top:11.5px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	}


.twoColFixRtHdr #container #menuwrapper #p7menubar #popupbox #formlogin img {
	position:absolute;
	margin: 0px;
	padding: 0px;
	height: 30px;
	width: 116px;
}
</style>

I used a form generator online that utilizes CSS and PHP. I am very comfortable with programming; but, I have never used CSS. I tried tweaking everything I could and no luck changing the CSS to left-align the entire form. I thought they used padding; but, I can't figure out where. Also, I removed the CSS to make sure the alignment wasn't part of the HTML - it is definitely embedded in the CSS as the form left-aligned (just not as attractive). Here is the CSS - apologies for the length. As you will undoubtedly see, this is my first post and I am not sure of your protocols for posting code.

body
{
background:#fffff;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:small;
margin:8px 0 16px;
text-align:left;
}

#form_container
{
background:#fff;
border:1px solid #ccc;
margin:0 auto;
text-align:left;
width:640px;
}

#top
{
display:block;
height:10px;
margin:10px auto 0;
width:650px;
}

#footer
{
width:640px;
clear:both;
color:#999999;
text-align:left;
width:640px;
padding-bottom: 15px;
font-size: 85%;
}

#footer a{
color:#999999;
text-decoration: none;
border-bottom: 1px dotted #999999;
}

#bottom
{
display:block;
height:10px;
margin:0 auto;
width:650px;
}

form.appnitro
{
margin:0px 0px 0;
padding:0 0 20px;
}

There is much more CSS; but, I believe the issue is isolated to this section.

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;
}

Hi all. I've got a quick question about the formatting of form buttons.

Currently I apply a class with the following properties to my form buttons:

Code:

.formbutton {
font-family:       Arial,Verdana,Tahoma,sans-serif;
font-size:         11px;
background-color:  #e8dfb6;
}

The buttons appear fine, but when I have some long text in the button, for example "Go back to the content tree", there is around 3/4 of an inch of space on either side of the button.

Is there any way to control this? On other buttons with text such as "update all" or "delete all" there is a little space but not much.

It seems like the more text there is in a button, the more space which will be inserted on either side of the text, and that to me seems kinda dumb.

Does anyone know if there is any way to control this?

Cheers and TIA,

Pablo

I've come across a bit of a problem, and I need some help.

Here's the deal: I'm creating a button system that will allow for easy placement of BBCode tags. Obviously, I'm using <form> and <input type="text"> elements to construct the buttons.

I found out that I can edit button labels through some simple CSS. I'm having a problem, though, with underlining text in one particular button.

Here's the code in question:

PHP Code:
<input type="button" value="Underline" style="text-decoration: underline;" accesskey="u" /> 




Now, this code works correctly in IE (what a suprise :O), but FF fails to draw an underline under the button's text. I know its possible, because if you go onto any PHPBB-based forum you'll see two buttons that have underlined titles.

Any idea how I should go about fixing this problem? I tried to reverse-engineer some of PHPBB's code, but alas to no avail. Help me if you can, please!

Hi!

Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit.

Basicly, this sums up the issue:
(sorry for the pure-text link, it didn't allow me to put up a propper one... >.<)
http://img205.imageshack.us/my.php?image=cssiebug.png

So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that.

Here is the code that should be of interest in this issue:
Code:

        <div id="bannerContent">
        <!--{{{-->
           <div id="logo">
                <a href="<?PHP echo $home ?>" target="_self"></a>
            </div>
                
            <div id="search">
                <form>
                    <input type="text" class="searchField" name="uSearchQuery">
                    <input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
               </form>
            </div>
        <!--}}}-->
        </div>

Code:

        #bannerContent
        /*{{{*/
            {
            width: 800px;
            height: 158px;
            }
            #logo
            /*{{{*/
                {
                background: url("../images/layout/logo.png") no-repeat;
                
                width: 394px;
                height: 56px;

                position: relative;
                top: 51px;
                left: 24px;

                float: left;
                }
            /*}}}*/
            #search
            /*{{{*/
                {
                width: 331px;
                height: 32px;

                position: relative;
                top: 62px;
                left: 58px;

                display: inline;

                float: left;
                }
                .searchField
                    {
                    background: url("../images/layout/search_field_bg.png") no-repeat;
                    
                    width: 266px;
                    height: 32px;
                    
                    border: none;
                    outline: none;

                    float: left;

                    <?PHP
                    if (!$agentIE && !$agentFF)
                        echo 'padding-left: 10px;' . "\n";
                    else
                        echo 'padding: 8px 0 0 10px;' . "\n";
                    ?>
                    }
                .searchSubmit
                    {
                    background: url("../images/layout/search_button.png") no-repeat;

                    width: 55px;
                    height: 32px;

                    margin-left: -10px;

                    border: none;
                    outline: none;

                    cursor: pointer;

                    float: left;
                    }
            /*}}}*/
        /*}}}*/

Thanks a bunch in advance!

I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.).

Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left".

What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it?

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

Hey everyone,

I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something.
html4strict Code:
Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html>

  

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


    "http://www.w3.org/TR/html4/strict.dtd">


 <html>


  <head>


   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


   <meta http-equiv="Content-Style-Type" content="text/css">


   <meta http-equiv="Content-Script-Type" content="text/javascript">


   <title></title>


   <style type="text/css">


   body {


    background-color: #082567;


    color: #FFFFFF;


    margin: 0;


    padding: 0;


    font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif;


    font-size: 12px;


    text-align: justify;


   }


   #top-menu {


    background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg );


    background-repeat: repeat-x;


    height: 130px;


   }


   #top-menu h1 {


    float: left;


    font-weight: bold;


    letter-spacing: -3px;


    font-size: 31px;


    padding: 5px;


   }


   #menu {


    float: right;


    list-style-type: none;


    text-align: center;


   }


   #menu li {


    display: inline;


   }


   #menu a {


    background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg );


    background-repeat: repeat-x;


    color: #FFFFFF;


    padding: 50px;


   }


   #menu a:hover {


    background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg );


    background-repeat: repeat-x;


   }


   </style>


  </head>


  <body>


   <div id="top-menu">


    <h1>ryon.hunter</h1>


    <div id="menu">


     <ul>


      <li><a href="">asdf</a></li>


      <li><a href="">asdf</a></li>


      <li><a href="">asdf</a></li>


      <li><a href="">asdf</a></li>


      <li><a href="">asdf</a></li>


     </ul>


    </div>


   </div>


  </body>


 </html> 

I validated it and it validates fine, any suggestions?