|
CSS - Getting Rid Of The Space The </form> Tag Creates!!
Hi can anyone help me here, so I have a form on my page but after the </form> tag there is a big space below the last form element! Does anyone know some CSS i can use so I can get rid of this space? Thanks
Similar Tutorialshey What i want is to have one line with a select box and a submit button on it. But when i put those 2 elements in a form it takes up 2 lines. How can i make it so that the form wont require an extra line? Hi, I'm creating a form and for some reason I can't get rid of the space between each line of the fields. I've tried making the margin and padding 0 but no joy. Is it me or just browser bugs? Help appreciated PHP Addict Code: <div style="width: 350px; float: right;"> <div style="width: 100px; text-align: right; float: left; background: yellow;"> <label for="">field Name:</label> </div> <div style="width: 100px; float: left; background: orange;"> <input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25"> </div> <div style="width: 120px; float: right; background: blue;"> Error Message </div> <br /> <div style="width: 100px; text-align: right; float: left; clear: left; background: yellow;"> <label for="">field Name:</label> </div> <div style="width: 100px; float: left; background: orange;"> <input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25"> </div> <div style="width: 120px; float: right; background: blue;"> Error Message </div> <br /> <div style="width: 100px; text-align: right; float: left; clear: left; background: yellow;"> <label for="">field Name:</label> </div> <div style="width: 100px; float: left; background: orange;"> <input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25"> </div> <div style="width: 120px; float: right; background: blue;"> Error Message </div> </div> It seems the form that creates unwanted space in IE. Site in question: http://www.phaseninedesign.com/p/uber/ HTML: Code: <div id="topMenu"> <form action="#" method="post"> <div id="reviewsBut"><a href="#"><img src="images/reviewsBut.gif" alt="Reviews" /></a></div> <div id="articlesBut"><a href="#"><img src="images/articlesBut.gif" alt="Articles" /></a></div> <div id="aboutBut"><a href="#"><img src="images/aboutBut.gif" alt="About" /></a></div> <div id="contactBut"><a href="#"><img src="images/contactBut.gif" alt="Contact" /></a></div> <div id="sponsorsBut"><a href="#"><img src="images/sponsorsBut.gif" alt="Sponsors" /></a></div> <div id="loginButTop"><a href="#"><img src="images/loginButTop.gif" alt="Sponsors" /></a></div> <div id="passwordBoxTop"><input type="password" id="password" onFocus="if(this.value=='password')value=''" onBlur="if(this.value=='')value='password';" value="password" /></div> <div id="userTopBox"><input type="text" id="user" onFocus="if(this.value=='Username')value=''" onBlur="if(this.value=='')value='Username';" value="Username" /></div> </form> </div> ----------------------- CSS: Code:
#topMenu{
width: 1005px;
height: 23px;
margin-left: auto;
margin-right: auto;
background-color: #282a1d;
background-image: url(images/topMenuBG.gif);
border-right: 1px solid black;
border-left: 1px solid black;
}
I've tried moving the form outside of the dive that its in, but that makes the space even bigger. This is probably something extremely simple, but I'm the slow kid today... I have a right-hand sidebar with a heading that is not behaving the way I want it to. After each word, it creates a new line, then the next word.... Any suggestions, as always, are appreciated. Here's the page: http://www.websimage.com/pcqtest/index.html Thanks guys/gals :) How do I reduce the vertical space between form elements that I put inside a div? I have text "username" with the textbox below it but there is like 25 pixels of vertical space between them. Brad When I browse the website with internet explorer, in the search section, there is a space after the form area. How can I remove it? http://www.refinethetaste.com/html/ Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz In the following code...why is there a space between the two div's?? 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">
<style>
#header { background-color: cadetblue; }
#footer { background: blue; }
</style>
</head>
<body>
<div id="header">
<p>This is my header.</p>
</div>
<div id="footer">
<p>This is my footer.</p>
</div>
</body>
</html>
If I remove the <p></p>'s from each sentence the spacing disappears. If I add a "border: 1px solid black;" to each style the spacing disappears. I don't want to know how to make it go away. I want to know why it's there? I mean shouldn't the paragraphs be fully enclosed inside the div's? Such that no spacing should appear between the div's? Any insight anyone might care to share with me would be most appreciated. Thanks. Carlos I've been trying to get all the space out of IE, tried line-height and all of that, and nothing. Any hack to take out all of the space gaps so I can later on put some small margin? Thanks in advance Hi; I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yourheadstone.com</title>
<style type="text/css">
html head title{
border:0;
padding:0;
margin:0;
}
body{
padding:0;
border:0;
background-color:#3399FF;
margin:0;
}
table tr td{
border: 1px solid #000000;
}
table{
width:1024px;
height:25px;
padding:0;
border:2px solid #000000;
margin-top:5%;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
background-color: #E5FFFF;
}
tr td{
padding:0;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: right;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
</style>
</head>
<body>
<table>
<tr>
<td>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="uploadform.php">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Headstones</a></li>
<li><a href="#">Home</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
http://www.zombiepolitics.com Just when I thought I had this down .. I dont. I have a CSS layout .. there are two main divs side by side, the navigation rests at the top of the right div. problem is in IE 6 there is so much extra space at the top that my navigation doesnt line up with my header .. in FF its no problem. What is the workaround for this? Hi everyone, I know this is probably an easy fix but I'm going cross-eyed trying to find the problem. Basically the top of the site has a nice space above the header with a horizontal row of links in IE however FF ignores the space and the links are pushed down on the header itself. I downloaded firebug for FF which is great and has saved me a ton of time the last few weeks but I'm just not seeing this. Thanks for any help http://karenwilliamson.com/joom5/ Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please? Thanks so much! vonatah Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary. I should go with the flow. So I copied a basic page structure and twiddled a little. Here is the result so far html link css link A couple of questions. 1. Would you say I'm on the right track, or should I be looking at a different style structure? 2. The page appears in ie to have gaps around the elements. In Mozilla it looks like I hoped it would look. How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix. No luck so far. Any help, advice appreciated. Thanks Solar.. Hello, im working on styling an unordered list into a file tree. So far, so good. However, do you see that space that is showing in between each <li>, between the T (elbow2.gif) image, its very unwanted. Code:
/* -- FILE BROWSER -- */
#browseFiles {
padding: 0 0 0 20px;/* 000pix handles indent */
}
#browseFiles ul {
font: 10px sans-serif;
color: #000;
list-style:none;
margin: 0;
padding: 0;
}
#browseFiles li {
/*display:compact;
height: 18px;*/
padding: 0;
margin: 0;
}
#browseFiles .fileDiv {
height: 18px;
background: url(images/elbow2.gif) no-repeat scroll 0 0;
}
#browseFiles .fileLink {
padding: 0 0 0 13px;
margin: 3px 0 0 0;
}
#browseFiles .dir {
list-style:none;
font: bold 10px sans-serif;
margin:0;
padding:0;
}
#browseFiles .file {
padding: 0 0 0 3px;
margin:0;
}
Heres the html Code:
<div id='browseFiles'>
<ul>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
</ul>
</div>
Thank you for the help in advanced. Hi everyone. I have a header image and directly below it the div that holds my navigation. In FF it works great, but in IE I get about a 5px space inbetween the header image and the navigation div. The navigation div is colored so it's really easy to tell where it stops and starts in IE. Here's my CSS code: Code:
body {
background-image: url(images/bgshadow.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
#content {
width: 738px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
vertical-align: top;
}
#header {
width: 738px;
margin: 0 0;
padding: 0 0;
}
#nav {
width: 738px;
height: 25px;
margin: 0 0;
padding: 0 0;
background-color: #86462F;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
}
#nav ul {
width: auto;
float: right;
margin: 5px 0 0 0;
padding: 0 0;
}
#nav ul li {
margin: 0 25px 0 0;
padding: 0 0;
list-style-type: none;
display: inline;
}
and my markup: Code: <div id="content"> <div id="header"> <img src="images/header.jpg" width="738" height="100" /></div> <div id="nav"> <ul> <li>Home</li> <li>Register</li> <li>Go Play!</li> </ul> </div> I've tested the white-space bug in windows IE (taking out all of the white-space in the markup) but that only had a marginal effect on the list. Does anyone have any ideas? Thanks, -Brian Do ids take up space on a page if there is no content within them and no size specified for them, what about classes, paragraphs? Something like so: Code: <div id="one"></div> or <div class="two></div> <p></p> <p class ="three"></p> etc... In other words, would there be a obvious space where one of these styling markers was placed on the page? If you go to the following http://curley-construction.com/cc/ in IE6, you'll notice a break in the footer. I cannot for the life of me figure out why its being added in IE6, but not IE7 or FF.... I"ll post the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Small Business Credit Cards</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="layout.css" type="text/css" /> <!--[if lte IE 6]> <script type="text/javascript" src="supersleight-min.js"></script> <![endif]--> </head> <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix"> <div id="belowHeader"></div> <div id="maincol"> <div id="maincolInner">Main Content Column </div> </div> <div id="leftcol"> <div id="leftcolInner">Left Column</div> </div> </div> <div id="footer"> <div class="top"></div> <div class="content"></div> <div class="bottom"></div> </div> </div> </body> </html> ..and the CSS from layout.css Code: * { margin:0; padding:0; border:0;} html, body{ margin:0; padding:0; text-align:center; background: #E2EBF0 url(images/BG.jpg) repeat-x top; } #pagewidth{ width:1036px; text-align:left; margin-left:auto; margin-right:auto; } #wrapper{ background: url(images/pageBG.png) repeat-y; } #header{ position:relative; height:131px; background: url(images/header.png); width:100%; } #belowHeader{ background: url(images/headerBtm.jpg) left no-repeat; height: 36px; width: 297px; margin-left: 17px; } #leftcol{ width:166px; float:left; position:relative; padding-left: 17px; } #leftcolInner{ background-color: #000; } #maincol{ float: right; display:inline; position: relative; width:835px; padding-right:18px; } #maincolInner{ background-color: #555; } #footer{ clear:both; } #footer .top{ background:url(images/footerTop.png) no-repeat; width:1036px; height:13px; } #footer .content{ background:url(images/footerBG.png) repeat-y; padding:0; margin:0; width:1036px; /*padding: 20px;*/ } #footer .bottom{ width: 1036px; background:url(images/footerBtm.png) no-repeat; height:41px; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} }
Any clue on this? Thanks in advance! |
|||||||