|
CSS - How To Get Ride Of Spacing At Submit Buttons
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 Similar TutorialsI am unable to get ride of the spacing which firefox and IE is doing with <img ...>. I used margin=0 padding=0 and boarder=0 but still there is a spacing remaining. i.e. when i put 2 images rigth following, between these 2 images is a spacing, while I want that they are just hitting each other. can anyone help me? Code:
example:
<table width="100%" border=0 cellspacing=0 cellpadding=0>
<tr><td><img scr="..." alt="..."></td></tr>
<tr><td><img scr="..." alt="..."></td></tr>
there is spacing between these images even i set the following in the CSS:
table {margin:0;padding:0;}
tr {margin:0;padding:0;}
td {margin:0;padding:0;}
img {margin:0;padding:0;}
when i put the <img ...> inside <p> commands (below example), then IE shows the images without spaceing (what i want), BUT firefox still has this spaceing between images. i am totaly unable to get ride of those sppaces Code:
<p><img ...></p>
<p><img ...></p>
and in css:
p {margin:0;padding:0;}
img {margin:0;padding:0;}
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? The default behaviour for an <input type="submit ... /> is to add a certain amount (perhaps some percentage of the length of the text?) of blank of space to the right and left of the text that is displayed within the button. Very ugly for buttons with long labels. Is there any way to control this without hardcoding a width value? Hi All I've styled all my input form fields, with background colours and fancy borders, however I've done this teh lazy way and used input, textarea { ...styling stuff } which means all my input fields are styled bu default, however this means that radio buttons are also styles and they look crap. Is there a class I can allocate to radio button, to overide the main style, something like .no-style{ ...this element has no style. } and <INPUT TYPE="radio" class="no-style" ........ any thoughts 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 Hi; i am trying to write a register form for user. i got a problem that the sign up of submit bottom doesn't sit properly after fill some invalid input and click the sign up bottom. but before fill anything to form, everything sit ok, no problem at all. And this problem happens in the IE browser, not in the Firefox browser. Could anyone help me find out the problem, please. please go to the link. http://writeanything.org/Register.php valid password 1) at least 8 char 2) at one lower char 3) at least one upper char 4) at least one digit please fill some invalid input to see the different before and after that. my code as following: Register.php PHP Code: <?php session_start(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title> Welcome to login </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <head> <style type="text/css"> body{ padding: 0px; margin: 0px; border: 0px; background-color: white; } #container{ padding: 0px; border-top: 2px solid #1d2add; border-bottom: 2px solid #1d2add; border-left: 1px solid #3b44b5; border-right: 1px solid #3b44b5; margin-left: auto; margin-right: auto; margin-top: 5%; margin-bottom: auto; width: 330px; height: 370px; } #t1{ font-weight: bold; font-size: 18px; color: white; background-color:#3542eb; } form{ padding:0px; border: 0px; margin: auto; width: 280px; } #JoinMe { background-color: #41ac1c; padding: 2px; border: 2px solid #94e07a; color: white; font-size: 12px; font-weight: bold; } #JoinMe:hover { background-color: #237516; border: 2px solid #104108; padding: 2px; } table{ padding: 0; border: 0; margin: 0; } tr{ padding: 0; border: 0; margin: 0; } td{ padding: 0; border: 0; margin: 0; } .errorM{ padding:0; margin:0; font-weight: bold; font-size: 12px; color: red; background-color:white; } </style> </head> <body> <div id="container"> <form action="/RegisterP2.php" method="post"> <table> <tr><td colspan="2" id="t1">Welcome to join xxxx</td></tr> <?php if($_SESSION['register_flag']==0) echo ("<tr><td colspan=\"2\" class=\"errorM\">some invalid field below, please reenter again.</td></tr>"); ?> <tr><td> Email Address:</td><td><input type="text" name="email" maxlength="60" value="<?php if($_SESSION['register_flag']==0) echo $_SESSION['register_email']; ?>"><?php if($_SESSION['register_errorM_Email']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Email']; echo "</span>"; } ?></td></tr> <tr><td>Password:</td><td><input type="password" name="pass1" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td>Confirm Password:</td><td><input type="password" name="pass2" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td> Display Name:</td><td><input type="text" name="DisplayName" maxlength="30"></td></tr> <tr><td> First Name:</td><td><input type="text" name="FirstName" maxlength="30"></td></tr> <tr><td>Last Name:</td><td><input type="text" name="LastName" maxlength="30"></td></tr> <tr><td>Country:</td><td><input type="text" name="Country" maxlength="30"></td></tr> <tr><td>State or City:</td><td><input type="text" name="StateCity" maxlength="30"></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td>Age</td><td><input type="text" name="age" maxlength="30"></td></tr> <tr><td>Gender:</td><td><input type="radio" checked="checked" name="Sex" value="male">Male <input type="radio" checked="checked" name="Sex" value="female">Female </td></tr> <tr><td colspan="2" align="right"> <input type="submit" name="Join" value="Sign Up" id="JoinMe"></td></tr> </table> </form> </container> </body> </html> ///////////////// RegisterP2.php PHP Code: <?php session_start(); //error massage for validate form $_SESSION['register_errorM_Email']=""; $_SESSION['register_errorM_Password']=""; //flag to check user input, 1=valid, 0=invalid $_SESSION['register_flag']=1; if(isset($_POST['Join'])){ $email_pattern = '#.*@.*\..*#'; $_SESSION['register_email'] = $_POST['email']; //email pass validation; if (preg_match($email_pattern, $_POST['email']) > 0) { } else{ //not validate $_SESSION['register_errorM_Email']="**"; $_SESSION['register_email'] =""; $_SESSION['register_flag']=0; } $password1 = $_POST['pass1']; $password2 = $_POST['pass2']; //valid if ($password2==$password1) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password1)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password2)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } if( $_SESSION['register_flag']==1) header('Location:RegisterP3.php'); else header('Location:Register.php'); } ?> Hi there, we have created the following list menu and we want to reduce the space between the left hand page margin, and the disc, at the 1st part of the text closer. Example: This is what we see now. | Text Here Example: This is what we would like to see. | Text Here Any suggestions? ul a, li a{ margin:0; padding:0; } Thanks for taking the time to read my question. The contents in my .ContentContainer are positioned differently in IE6 and FF. I want them to look like FF. What is wrong with my CSS that makes IE6 have more space on the left side of the green globe than FF? My goal is to have the 2 blue vertical lines line up. They line up in FF and IE7, but not in IE6. www.scopicdesigns.com/ZoneAll/index.htm Thanks, Brad Hi Guys I am having trouble trying to work out a bug that is creating a space between two div containers. To see what i mean click here for web page the css can be viewed here in firefox the two containers appear correctly but in internet explorer there is a 10px space between them. Could it have something to do with the background images? The div containing the login form also drops down in ie and i am convinced this is related to the main problem i am facing. Does anyone have any ideas as to what the problem is. Any help would be much appreciated! This is my first time ever working with CSS. I am trying to put together a site; however, I am havings some setbacks straight out of the gate. I am trying to get the navigation bar to align up against the header. How do I eliminate the spacing between the header and the navigation bar? I have tried the padding: 0; method with no luck. PLEASE HELP! Hello All, I wanted to ask a question. I'm having trouble with spacing between two divs. Here's the site I'm working on: johnraymondonline.com/mjbfoundation/ The problem is that I'm trying to put a 20pixel margin between the bottom footer div (that contains "test test") and the div just above it. I'm not having much luck at all. I've done a clear and also have checked the divs several times to see if I've missed any. I've even put a div between with some height and that doesn't work. I'm not sure if one of the div's above it has a fixed height. Any help would be greatly appreciated! Thanks! I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows... HTML Code: <ul id="nav"> <li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a> <ul> <li><a href="#" style="color:#000;">About Asthma</a></li> <li><a href="#" style="color:#000;">Treatment</a></li> <li><a href="#" style="color:#000;">Taking Control</a></li> <li><a href="#" style="color:#000;">Lifestyle</a></li> <li><a href="#" style="color:#000;">Resources & Support</a></li> </ul></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> </ul></li></ul> I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here? I am new to doing layouts in CSS and have a page (on an existing site) that I just did using CSS. The problem that I am having is that the "content" div has unwanted space above and below the div. I have padding & margins set to zero for the content div. Page is he http://www.prairieplugs.com/Sample1/sample1.htmlhttp://www.prairieplugs.com/Sample1/sample1.html CSS is he http://www.prairieplugs.com/Sample1...ieplugscss1.css Below is the CSS that is applicable: Code: body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: .9em;
color: #000;
background-color: #008F13;
background-image: url(images/bgbottom.jpg);
background-repeat: repeat-x;
background-position: bottom;
background-attachment: fixed;
}
#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
}
#wrapper #header {
background-image: url(images/headerSamp1.jpg);
margin: 0px;
padding: 0px;
height: 276px;
background-repeat: no-repeat;
}
#wrapper #nav {
background-color: #FFF;
background-image: url(images/navSamp1.jpg);
background-repeat: no-repeat;
height: 60px;
width: 900px;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper #content {
background-image: url(images/contentSamp1.jpg);
background-repeat: repeat-y;
margin: 0px;
width: 900px;
background-color: #FFF;
padding: 0px;
}
#wrapper #footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-repeat: no-repeat;
height: 79px;
background-color: #FFF;
background-image: url(images/footerSamp1.jpg);
margin: 0px;
padding: 0px;
}
#wrapper #nav ul {
margin: 0px;
list-style-type: none;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #060;
}
#wrapper #footer p {
text-align: center;
margin: 0px;
padding-top: 25px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#wrapper #nav ul li {
display: inline;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #000;
font-size: 1.2em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#wrapper #nav ul li.last {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #nav ul li a:visited {
text-decoration: none;
}
#wrapper #nav ul li a:hover {
color: #000;
text-decoration: underline;
}
#wrapper #nav ul li a {
text-decoration: none;
color: #FFF;
}
#wrapper #content p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-align: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 15px;
}
This is starting to bug me this problem, but on my site www.readinginfo.co.uk the background image (inner shadow and small gradient) at the top is playing up. It doesn't seem to want to align all the way over to the left, however as is always the way, it is working in firefox, ie7, 8 and safari. I've tried some of the ie6 fixes mentioned but I have the sneakiest of feelings that it is to do with the form element (the search box), positioning absolutely just bumps it over to the side. Thanks in advance for any reply!! In IE, there is a space between my div's. Can someone help me fix it? Attached is a sample htm and graphics or see he PHP Code: <div id="red" align="center"> <img src="red.gif" width="500" height="100"> </div> <div id="blue" align="center"> <img src="blue.gif" width="500" height="100"> </div> Thanks. Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why. Here is my css its at bestinefight.net/memberlist.php Code: /* Memberlist */
#navcontainer {
width: 210px;
margin-left:109px;
}
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
width: 200px;
background-color: #4B4535;
padding: 0px 0px 0px 10px;
border: 0;
}
#navcontainer a:link, #navlist a:visited
{
font-size:10px;
color: #dbdfaa;
text-decoration: none;
border: 0;
padding: 0px 0px 0px 10px;
outline:none;
}
#navcontainer a:hover, #navlist a:active
{
font-size:10px;
background-color: #8B8063;
color: #dbdfaa;
border: 0;
text-decoration:none;
outline:none;
}
#profile_holder {
background-image:url(profile.png);
background-position:top;
background-repeat:no-repeat;
width:300px;
height:200px;
float:right;
margin-right:30px;
}
#profile {
width:260px;
height:180px;
margin: 40px auto;
}
#memberlist {
width:250px;
height:300px;
float:left;
}
#memberlist_title {
background-image:url(memberlist.png);
width:228px;
height:31px;
margin-left:100px;
}
#memberlist_bottom {
background-image:url(memberlist_bot.png);
height:21px;
width:210px;
margin-left:109px;
}
Here is the code for my page. Code:
<div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer">
<ul id="navlist">
<li><a href="#">Aslad</a></li>
<li><a href="#">Bilos</a></li>
<li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li>
<li><a href="#">Brak</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Diablo</a></li>
<li><a href="#">Equilibruim</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Faller</a></li>
<li><a href="#">GoOsE</a></li>
<li><a href="#">Melik</a></li>
<li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li>
<li><a href="#">Nekos</a></li>
<li><a href="#">Normanalata</a></li>
<li><a href="#">O'rian</a></li>
<li><a href="#">Pooga</a></li>
<li><a href="#">Romu'lis</a></li>
<li><a href="#">Sena</a></li>
<li><a href="#">Tepor</a></li>
</ul>
</div>
<div id="memberlist_bottom"></div>
</div>
<div id="profile_holder"><div id="profile"></div></div>
Hi Guys, I am having a small problem with IE, the height between <p> tags is considerably different to that of firefox. I think it is a padding problem but i am unable to crack it. The area i am referring to is the left side of the page where the two forms are and the images text. my website is here my css file can be found here Any suggestions? In both Firefox and IE some of the larger advertisements at the top overlap the content. In IE only, the margin on the bottom of the page does not show up at all. The website is http://www.socialplay.com. Please provide help if you know what's wrong. Thanks. Lets say I had a list like this in html <ul> <li>the first link</li> <li>the second link</li> <li>the last link</li> </ul> then in CSS ul{ letter-spacing:4px; } *left out some code, I'm concerned about this atm though: Is there a way where I can space groups of words, so that instead of looking like this... Code: the first link the second link the last link it looks likes this: Code: the first link the second link the last link for my final result, I'd like to put pipes between these groups of spaced words Code: the first link | the second link | the last link I'm not sure how to space those groups of words. Can anyone help? |
|||||||