|
CSS - Text Field Vertical Spacing
Hey, all. Just wondering if anyone knows of a proper way to get rid of vertical space between text fields in a form. IE seems to like to have 2px in there, where other browsers will give me the desired 0px. For example:
Code:
<input type='text' value='test' style='margin:0px; display:block;'> <input type='text' value='bottom' style='margin:0px; display:block;'> Gives me 2px of space between the 2 fields, but only in Internet Explorer.. Any thoughts? Similar TutorialsHi, Why there is such a big vertical space between table and element (div class="frm_container) in Internet Explorer 6. There is no space like that in Mozilla Firefox. What can I do about it? Thank you. Code:
<head>
<title>Title</title>
<style type="text/css">
.frm_container {
padding: 0px;
margin: 0px;
border: 1px solid #000;
background-color: #fff;
}
</style>
</head><body><div class="frm_container">
<form name="register" enctype="multipart/form-data" method="post" >
<table><tr>
<td align="right">Username:</td><td><input type="text" name="user" /></td>
</tr></table>
</form></div></body></html>
Here is the industry news page I have the picture floating either right or left with text beside it - then a line underneath it. I want the line to always be at least 10px below the picture. When the text is less, the line crosses into the picture. xhtml: Code:
<div id="industry">
<h1>Industry News and Information</h1>
<div class="row">
<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span>
<h2>New single set of standards for ERS and ATS</h2>
<p>Through the combined efforts of the European Respiratory Society (ERS)
and the American Thoracic Society (ATS), there is now a new single set
of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More
...</a></p>
</div>
<div class="row"> <span class="imgRight"><img src="../images/ARTP_thumb.jpg" width="112" height="100" alt="COPD Day at Vitalograph" /></span>
<h2>Winter ARTP meeting well attended</h2>
<p>Vitalograph recently attended the Association for Respiratory Technology
and Physiology (ARTP) 3Oth Annual Conference at the Hilton Metropole
Hotel in Brighton. <a href="/resources/industry_news/news_artp.html">More
...</a></p>
</div>
<div class="row">
<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span>
<h2>New single set of standards for ERS and ATS</h2>
<p>Through the combined efforts of the European Respiratory Society (ERS)
and the American Thoracic Society (ATS), there is now a new single set
of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More
...</a></p>
</div>
<div class="rowLast">
<span class="imgRight"><img src="../images/COPDdayoffice_thumb.jpg" width="99" height="98" alt="COPD Day at Vitalograph" /></span>
<h2>Vitalograph participates World COPD Day</h2>
<p>To mark World COPD Day on 16 November 2005, the British Lung Foundation
teamed up with Superdrug to offer a free spirometry test at selected
stores across the UK. <a href="/resources/industry_news/news_world_copd_day.html">More
...</a></p>
</div>
<p class="back"><a href="javascript:history.go(-1)">< Back</a></p>
</div>
css: Code:
.imgLeft img {
clear: none;
float: left;
margin: 0px 20px 10px 0px;
border: 1px solid #000099;
}
.imgRight img {
clear: none;
float: right;
margin: 0px 10px 10px 20px;
border: 1px solid #000099;
}
/*rows*/
.row {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid #3399FF;
}
.rowLast {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #3399FF;
border-bottom: 1px solid #3399FF;
}
.line {
border-bottom: 1px solid #3399FF;
padding-top: 0px;
padding-bottom: 10px;
}
.inline {
display: inline;
}
#mainColumn {
padding: 0px;
margin-left: 175px;
background-color: #FFFFFF;
height: 100%;
}
/*industry news*/
#industry {
padding-right: 20px;
padding-left: 20px;
}
#industry h1 {
margin-bottom: 20px;
}
#industry h2 {
color: #000099;
margin: 0px 0px 10px 0px;
}
#industry img {
margin-bottom: 10px;
}
.copdDay img {
clear: both;
margin: 0px 40px 15px 55px;
border: 1px solid #000099;
}
.artp {
margin: 0px 40px 15px 40px;
}
.artp img {
clear: both;
margin: 0px 40px 15px 25px;
border: 1px solid #000099;
}
Any suggestions on how to get this consistently since through css accounting for varying lengths of text?? I know I can adjust padding/margins for each section to make it work, but I want something that is more universal that I can always use to get the same appearance. Thanks! Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. I am simply trying to align a form (text field and submit button) to the bottom of its containing div. My method works with text, but not the form... it just stays up at the very top. The CSS: Code:
#search {
padding: 0 25px 0 0;
float: right;
}
#srchbox {
height: 118px;
position: relative;
}
#srchbox .form {
bottom: 0;
position: absolute;
}
The HTML: Code:
<div id="search">
<div id="srchbox">
<p class="form">
<form>
<input type="text"><input type="submit" value="Go">
</form>
</p>
</div>
</div>
I know that a form shouldn't be expected to act like text... but I don't know how to go about getting to align at the bottom. Thanks! Hi, I want to show the contents of a textarea as normal text in a preview block with all the text spacing intact. Name: ABC Age: 22 Place: World Somehow the spacing of the text is not displayed as in the textarea. How can this be done. Thanks I am presently new at CSS, and I need help with this little problem. Basically, I am creating a design and on Photoshop I have the following.. jerrytavares[dot]com/phpform/ex1.gif Then when I convert it into HTML i have this.. jerrytavares[dot]com/phpform/ex2.gif Now I need help spacing out the checkmark/rss image from the text. What is the best and easiest way to do this with CSS? Thanks, Peter Its been a long time now and I am finnaly getting back into website desiging. I am doing a simple coding but I am having a hard time trying to figure out how to do the following. I want to create a table but using only divs. So basically I am going to have a parent div acting as the whole table then sub-div acting as each row, and within those divs there will be more divs acting as each cell. But I can't figure out how to make each cell be right next to each other instead of on the next line. How do I make it look like below: |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| Also, what CSS properity do I have to use so that the content of each cell will overlap with all th surrounding cells? By overlap I mean so they will be touching each other. My site is displaying properly and in good way to the bullet that i've used in menu in FF. But in IE 7 bullet and text is too close which make menu un attractive. How can i fix this? any suggestion. if you want you can see nepalmedia . com . np thanks. I'm not that familiar with css yet...so this might be a stupid question. I'm creating this website for my department. on the index page, there are several lists of links. between the links there is line spacing. but some link name is too long it got wrapped under. the wrapped under text also have line spacing. this makes the viewer feels that there are 2 links instead of one. how can i make the wrapped under text go right under without the line spacing? here is the link if you wanna see how it looks like now. http://www.scienceevents.uwaterloo.ca/ for example under the first left hand side menu, international year of astronmy is one link. but it looks like 2 links. how can i make them move together? this is the css for the primary nav Code:
#primary_navigation {
background:url(../images/primary_navigation_bg.jpg) no-repeat; /* This controls the background image on the home page. */
width:960px;
height:200px;
margin-top:20px;
font-size:0.75em;
clear:both;
}
#primary_navigation ul {
list-style:none;
margin-left:-20px;
height:110px;
}
#primary_navigation ul li {
line-height:2.0em;
margin-right:5px;
}
Hello, this is my first attempt at a website and first attempt at using CSS as well. With much reading and the help of an online CSS layout creator I've been able to get pretty far, but have been having many roadblocks recently. For instance, the second heading in my layout is not displaying correctly in IE, but looks fine in FireFox. Please take a look at http://www.onlinecasinoboss.com/new_page_1.htm The second heading should lay directly underneath heading number 1, with a 2px margin in between header 2 and the main page layout. Also the text in the right, left and center columns starts as if it had a 12px or greater top margin. This problem exists in BOTH IE and FF. Please help, and thanks for anyone that takes the time to help a newbie web designer out. Is there a way to decrease a default spacing between bullet and text in <ul>? Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines. what is the tag for writing vertical in CSS? Hi, I've seen a number of posts and web pages about this but so far have NOT found a method that conforms to the w3.orgs css standard. There seems to be a lot of interest in this and l wondered whether anyone has found a work around that is compatible on more browsers than I.E? Ok...I am dabbling with CSS and I was wondering if there was anyway to specify your text to run bottom to top instead of left to right in a table cell. Anyone know if it can be done? I'm trying to get vertical text in a menu ie h o m e - l i n k - And so on how can this be done thanks How exactly can i vertically align text in css, i can't seem to find an easy way to do it, i basically want my text to be in the middle of a divs height, so much easier in tables heh. Tried padding but that then adds to the height, making it pointless for this use Hi guys, I'm still a beginner at CSS and I have run into a problem... In my footer, I want all the text to be aligned vertically and horizontally in the middle. eg. ------------------div-------------------- ............. text text text text text ------------------div-------------------- Can you please show me what text I would need to put in the #footer? My footer is 900px wide and 120px high. I am adding more than one line of text. If there's any more info u need from me to solve this problem then please ask. Any help will be great. Thank you very much How do you go about vertically aligning text in a <div> tag that is 200px in height? hi. i'm trying to have some text in a div, but also i want the text align to the bottom of the div. something like. but i don't know how... have a look at http://www.desorden.net/prueba.html any ideas? thanks in advance I have what I think is an easy question for you guys. I have an absolute positioned element and I gave it a height of 100px. I want to know how to make it so that any text that I enter goes to the bottom of this element. By default, the text appears at the top left. I tried vertical-align with all of its values, but none of them worked. The only way I could get it to appear the way I wanted was to use line-height. Using line-height I am able to get the text where I want it, but it doesn't seem like this is the way it should be done. Is there a way in which you don't have to specify a specific line-height value to get the where you want and it make it so all text appears at the bottom instead of the top? Here is what it looks like, and the CSS is below. Thanks. Code:
<html><head><title>test</title>
<style type="text/css">
body {
background-color: white;
}
#top {
position: absolute;
left: 20%;
right: 20%;
top: 2.5%;
height: 100px;
color: white;
background-color: rgb(20%,20%,20%);
border: 2px solid red;
line-height: 180px;
}
</style>
<body>
<div id="top">
this is a test
</div>
</body>
</html>
|
|||||||