|
CSS - Form Inputs And Line Breaks
Can they play nicely together? What I have is a series of check boxes displayed inline with a short label next to each one. Problem is, when there are a lot of check boxes generated and it comes time for a line break, the check box gets broken off from its label. I've tried everything, the label tag, the white-space: nowrap styling. I can't get it to work.
So, how do I do this? Similar TutorialsHey there. Is it possible to add a line break so that the following markup... html Code: Original - html Code <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl> <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl> ...looks like this? Posts: 33 Topics: 4 Basically, I want it to be like display: block, but only to the RIGHT of the text. Does that make sense? Just like adding a <br />, but with different HTML. There must be a better way to accomplish this... I need a line break between the two headers in the page below. As it stands it works in Firefox and IE with <br> tags but this seems sloppy.....Is this what the clear element is for? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#cccccc;
}
#wrapper {
width: 700px;
height: 565px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border: 1px solid #808080;
background-color:#ffffff;
}
#sidebar {
width: 123px;
height: 565px;
float: left;
background-image:url(images/sidebar.jpg);
}
#content {
margin-left: 125px;
height: auto;
width:auto;
padding: 30px;
font:Arial, Helvetica, sans-serif;
font-size: 24px;
font-style:oblique;
color: #444444;
}
#01 {
position:relative;
}
#02 {
position:relative;
margin-top:100px;
}
#b1w, #b2w, #b3w {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}
</style>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">
<div id="01">Header 1</div>
<div id="b1w"></div>
<div id="b2w"></div>
<div id="b3w"></div>
<br><br><br>
<div id="02">Header 2</div>
</div>
</div>
</body>
</html>
I have coded my css file to display a border and change the background color of any text I put inside of <p> tags. It seems to work fine until I have to create a new line using <br> then it ignores everything after the <br> and strips the styling. My css is attached below: Quote: p.doubleSpaced { line-height: 200%; text-align: left; background-color: #eeeeee; border: #dddddd 2px solid; padding: 10px 15px; } My page can be viewed he http://dev.asbco.com/products/insti...al-recrational/ Thanks for the help! Hi I'm writing here after spending a few hours searching google without luck. I bought a "mega menu" plug in for wordpress but its acting very odd. It generally works as it should but ive found that theres something wrong with the formatting of the drop down menus. There is an issue where line breaks do not happen at all, and most important - list items are not shown on a new line. The content all seems to flow around its self rather than being formatted. See attached pic: img14 .imageshack .us/img14/964/screenshot047cr .png I did run the css and html though a validator and it spits out hundreds of errors but i think they are pretty much only shown because its css3. I'm really curious what would cause line breaks to not appear after list items. I had thought previously it may be the css clashing with my themes css but i tried a fresh install on a really mimimal theme and the error is still there Like on this page, under each of the photos: http://www.sdtars.com/development/events/camp.php What causes the text to appear like: Quote: Originally Posted by In IE Officers discuss TAR Days at an executive board meeting I have a very curious problem with the formatting of input fields in html forms which has me completely stumped. Basically, input fields are not looking as they should (and in particular, not showing any text typed inside them) in any versions of IE (well, 6, 7 and 8 anyway) - tested on various machines so not a Windows installation issue. Despite my setting a class for them I cannot get them to look like proper inputs, nor can I make the inputted text visible. I can see the cursor for the text when I click inside where the input should be, but it looks far too small- about 4 px as far as I can tell. (???) Interestingly in Firefox the text inputted IS visible, although the border of the inputs doesn't show. I've set a class for input: input {border:1px #000; color:#000;} I also tried setting this explicitly for inside the div holding a form where the input appears: .searchform input {border:1px #000; color:#000;} Neither of which work. Here's one of the forms where I'm trying to include the input (hashes at the moment for links as it's in development): <form action="#" method="POST" name="searchform"> <img src="/images/freecallback.gif" alt="Free Call Back"> <a href="#" title="Member Login"><img src="/images/memberlogin.gif" alt="Member Login"></a> <input type="text" name="searchtext" value="" size="8" /> <input type="image" src="/images/searchbutton.gif" name="searchform" /> </form> And here's another form (same result though interestingly the SELECT appears ok): <form action="#" name="bookahotel" method="post"> <label>Arrival</label> <input name="date" size="6" type="text" /> <p class="text_normalblack">Arriving Today</p> <input name="country" size="6" value="Country" type="text" /> <input name="towncity" size="6" value="Town/City" type="text" /> <select name="_EnquiryType" size="1" class="forminputs" /> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select> <input name="bookahotel_search" size="6" value="" type="image" src="/images/bookahotel_search.gif" /> </form> Any ideas??? Thanks I'm trying to make a simple input form, but the problem is that when trying to use CSS to align things, it makes it seems a lot more difficult. I was trying to get away from using tables because I was told they are unnecessary most of the time for alignment purposes. So if I have a couple of labels and form fields, how can I align them so that the labels all are at around 10px left , and then the inputs start at around 150x left. This is what I started to do, and I was thinking...wouldn't tables be much @$!# easier? I have to specify the position for every form field, and this is just one row: Code: <label style="position:relative; left: 10px; top: 50px; ">Input <u>N</u>ame:</label> <input style="position:relative; left: 100px; top: 50px; " type="text" name="txtInputName" maxlength="40" accesskey="n" > I tried it without the style tags, but the labels and fields would then be right next to each other on each line (no way to horizontally space it out nicely because the label length will vary) Whenever I specify <form> in an html page I find that the browser will skip a space after I'm done with the form. Overly simplified example: Code: <html> <body> <form name="input" action="html_form_action.asp" method="post"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> test (notice that this is two lines below the input box instead of one) </body> </html> Is there any way to use a <form> tag but still have the text after the form appear right after the form and not skip extra spaces? What i want to do is to put a search form (label,input & submit button) on a single line. This happens in FF but guess which browser puts them on different line?? IE. yes you got it! Code:
#searchBox {
float:right;
clear:right;
margin-right:0.2em;
}
#searchBox label {
font-size:0.8em;
}
#searchBox input, #searchBox select {
background-color:#d2c5a2;
}
#searchBox .submit {
background-color:#d2c5a2;
color:#483e2b;
font-size:0.8em;
}
btw if i give the searchbox Div a width, what happens is that in IE the box goes out of the wrapper a bit and in FF the form moves to the left leaving gap between it and right side.. site: http://www.zahra-zahra.com/ I recently relaunched our web site and, trying to stay with the times, use CSS as much as possible for layout purposes. The one place I still use a table for layout is in the top navigation bar, which includes a search form. I would like to eliminate the table and use CSS for styling the top navigation bar, but am not sure how. I want the pages to hold up in IE 5.0+, Mozilla, Netscape 6+, Firefox and Safari and to be tolerable in Mac IE 5.x - a tall order but manageable I think. Can this be done? Am I stuck with a layout table here? Any help is appreciated. You can see an example web page at: http://www.cambridgema.gov/~CDD/ The HTML is in the attached file. Greetings! Maybe it's a newbie question, but I can't find out why form fields don't get vertically centered when rule height: 4em; line-height: 4em; is applied on them, they are inline elements, aren't they? In FF applied correctly, not so in IE. Please take a look at: http://147.32.113.143/biotest/Sourc..._LookUpTerm.php I have a search box/button I want to keep on a single line in a tool bar on my page in strict XHTML/CSS. The <form> tag produces a line break beforehand. In old HTML I could put the <form> tag outside of the table row or data tags, but XHTML does not allow that (bad nesting). I found in devshed here to use style="display:inline;" which works! But the page does not validate as strict XHTML/CSS (using validator.w3.org). <table><tr><td> <!-- simplified to illustrate!! --> <form method="get" action="..." style="display:inline;"> <input type="text" name="q" size="10" maxlength="255" value="" /> <input type="submit" name="sa" value="go" /> </form> </td></tr></table> The Error and reason given is below. It seems that you can not have a block-level element (<input>) within in inline-level element (<form>). *** document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag. The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). *** Does anyone know how to code this to not have the linebreak and still maintain strict XHTML/CSS code? Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! First off, I use Firefox more than IE, so I'm a little upset to see my Firefox version doesn't look as nice as the IE version... When I design, I like to design to make the Firefox one always look better (even though you should make them look the same, sometimes the FF one still looks better than IE... <h3> tags anyone?). So, I have to make these file inputs look better than they do. A couple things I want to focus on (css code below for reference): 1. Make the FF inputs have a width of 450 like they should. 2. Make the FF input buttons have the same border as IE buttons. 3. Remove the bevelled border from FF inputs. First, the screenshots (attached) Second, the inline HTML styles: Code:
<tr>
<td colspan="4" align="left" style="padding-left: 50px;">
Image 1: <input type="file" name="file[]" style="width: 450px;" /><br />
Image 2: <input type="file" name="file[]" style="width: 450px;" /><br />
Image 3: <input type="file" name="file[]" style="width: 450px;" /><br />
Image 4: <input type="file" name="file[]" style="width: 450px;" /><br />
Image 5: <input type="file" name="file[]" style="width: 450px;" />
</td>
</tr>
Third, the CSS code: Code:
input, textarea, select
{
border: 1px solid #45649B;
}
input {-moz-box-sizing: border-box;}
Any help is appreciated, Thank You! Hi there, I am trying to add some padding to my inputs, but the padding is being ignored by IE. This is my CSS: PHP Code: INPUT { background-color:#FFFFFF !important; border: 1px solid #ececec; padding: 10px; } Any ideas why it is not working? i tried to search for any threads that talk about this problem, but i wasn't able to find any. i have a css dropdown menu and it works great in firefox(cuz FF rocks). there is an input dropdown under the css dropdown menu, and in IE, the input dropdown shows through the css dropdown layer. i've tried playing with the z-index, but it doesn't seem to work. can anyone help me with this? here is an example of my problem, you'll see the input is showing through the div layer when it shouldn't. Code:
<html>
<head>
<title>Untitled</title>
<style>
div#layerOne { background-color: #fff000; position:absolute; width:50; top:1em;left:1em; z-index:2;}
div#layerTwo { z-index:1; position:absolute; top:2em;left:2em; }
</style>
</head>
<body>
<div id="layerOne">
11 adsf adsf asdf asdfasdf asdfasdf asdf
</div>
<div id="layerTwo">
<select>
<option selected="selected">Choose a topic...</option>
<option>
DECORATING</option>
<option>
All Rooms</option>
</select>
</div>
</body>
</html>
When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background? Has anyone seen hidden inputs being rendered as periods or dots under FF? I am using FF 3.5.4. Is this normal? Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-language" content="en">
<title>Funny Dots</title>
<style type="text/css">
input
{
border:1px solid blue;
display:inline-block;
}
</style>
</head>
<body>
<form action="index.php" method="post" name="mainForm">
<input type="hidden" name="aaa" value="5" />
<input type="hidden" name="bbb" value="" />
<input type="hidden" name="ccc" value="" />
</form>
</body>
</html>
|
|||||||