|
CSS - Textarea Padding
I'm having trouble adding padding to a text area without affecting the scrollbar. I would like the padding:10px to only be around text in the textarea without making the scrollbar have padding around it. Is this possible?
Thanks Similar TutorialsI'm using the following code below to try and get a CSS template that I can use on sites to make them as consistent as possible across browsers. I've done fairly well (I think), but I'm having trouble with odd stubborn space around textarea's and other form elements. Any suggestions on how to remove these margins/padding? Both CSS and HTML is validated OK. Code:
/* CSS Document */
/* TAG DEFAULTS */
HTML {
font-size:100%; /* IE correction */
/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
height:100%;
margin-bottom:1px;
color:#352819;
font-family:"Times New Roman", Times, serif;
}
BODY {
/* Text-Sizing with ems: (URL address blocked: See forum rules) */
font-size:1em;
background-color:#FFFFFF;
margin:0;
}
TABLE {
font-size:100%; /* IE correction */
border-collapse:collapse;
border:0px none;
}
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE {
margin:5px 0 10px;
line-height:100%;
}
H1 {font-size:2em;}
H2 {font-size:1.5em;}
H3 {font-size:1.25em;}
H4 {font-size:1em;}
H5 {font-size:.75em;}
H6 {font-size:.55em;}
INPUT, SELECT, TEXTAREA, TH, TD {
font-size:1em;
font-family:"Times New Roman", Times, serif;
margin:0;
padding:0;
}
INPUT, SELECT, TEXTAREA {
border:1px solid #352819;
}
TEXTAREA {
overflow: auto;
width:300px;
height:100px;
}
FORM, LI {margin:0;}
UL {list-style-type:disc;}
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}
OL, UL {
margin:0;
padding:0;
padding-left:23px;
}
A:LINK {color:#a47832;}
A:VISITED {color:#a47832;}
A:HOVER {color:#e5a135;}
/* END TAG DEFAULTS */
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"> <title>Style Test</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <table> <tr><th>Cell TH 1</th><th>Cell TH 2</th></tr> <tr><td>Cell TD 3</td><td>Cell TD 4</td></tr></table> <h1>This is H1</h1> <h2>This is H2</h2> <h3>This is H3</h3> <h4>This is H4</h4> <h5>This is H5</h5> <h6>This is H6</h6> <p>This is P</p> <UL> <LI>List Item 1</LI> <LI>List Item 2 Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped</LI> <LI>List Item 3</LI> </UL> <OL> <LI>List Item 1</LI> <LI>List Item 2 Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped</LI> <LI>List Item 3</LI> </OL> <form action=""> <div><input value="Input" name="name" type="text"><input value="Input" name="name" type="text"><br> <input value="Input" name="name" type="text"><br> <input value="Input" name="name" type="text"> <select name="stuff"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><br> <select name="stuff"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <select name="stuff"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><br> <table style="border:1px solid #000000;"><tr><td> </td></tr></table> <textarea name="myarea" cols="100" rows="5">This is my text area</textarea><textarea name="myarea" cols="100" rows="5">This is my text area</textarea><br> <table style="border:1px solid #000000;"><tr><td> </td></tr></table> <textarea name="myarea" cols="100" rows="5">This is my text area</textarea><br> <table style="border:1px solid #000000;"><tr><td> </td></tr></table> <input type=submit name=submit value="My Button"> <input type=submit name=submit value="My Button"><br> <input type=submit name=submit value="My Button"> </div></form> <div><a href="contact.shtml">Hyperlink</a></div> <blockquote><div>This is a blcokquote This is a blcokquote This is a blcokquote This is a blcokquote</div></blockquote> </body> </html> Hello again. Or should I say ( Time on my watch is 22:17 and because of time zones (+7 for US) ) good morning ? If go to the: http://www.odin.foxnet.pl/archives.html and expand these 2 menus : Navigation and Other - You will see my problem, and it was working before, now it looks, just like you can see. Second problem: solved And at the ending: Fileds for name and mail for comment wasn't so bad as now. Just look at it (2 eg: http://www.odin.foxnet.pl/2005/09/14/Tales/mj-przyszy-bokken.html http://www.odin.foxnet.pl/2005/09/15/Home/userfriendly-url.html ) Goodnight everyone. You are great people, offering great help. milosz-odin - known from this weigher Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey 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" I validated it and it validates fine, any suggestions? Hey everyone, I am working on a new template: http://4xp.net/temp.html The colors are there just so I can see the divs, so don't worry. If you look at the page in IE, it looks fine, with some padding between the green and orange div, and to the right of the orange div. When you look at it in Firefox, there is a bunch of white padding to the top and bottom of both the orange and green divs, and I can't seem to get it to go away. The weird thing is, if I add a 1px border to the orange div, the green div aligns to the top, and the orange background expands to fill in the white area above and below the orange div. Does anyone know how to remove this padding? Thanks! I don't know exactly what to call what's going on, but i'm asuming that there is a padding issue with my menu. I have a ul that contains my menu list. The CSS and xhtml are as follows: Code: /* Menu */
li {
border: 1px solid #000000;
border-bottom: 0px none;
display: inline;
line-height: 14px;
margin: 0px;
margin-left: 1px;
margin-right: 1px;
padding: 0px;
padding-left: 3px;
padding-right: 3px;
}
ul#menu {
background-image: url(img/menu.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
list-style-position: inside;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
background-position: left bottom;
vertical-align: text-bottom;
}
/* End Menu */
<ul id="menu"><li>Menu 1</li><li>Items 2</li>
<li>Will 3</li><li>Go 4</li><li>Here 5</li></ul>
(the menu is on one line, thanks to IE's whitespace issue, i broke it here for easier readablity.) the problem is: i have it nestled on top of a div, and for some reason the ul has a 1px bit of padding on the bottom. I have searched the forum and may have missed some one posting a resolution for this, but i tried every one ov the voice-family/carrage return fixes i've seen, but none work. to see what i'm talking about if my words are il formed (as they often are) click here. to view the CSS click here. I am noticing that padding changes the width/height of an object. For example, if I have a div element with a width of 100% and padding at 10px, it will actually cause the horizontal scrollbar on the browser to appear because it takes the 100% width into account, plus 20px for the padding on the left and right side. I thought padding was suppose to push elements inward. ??? Any help will be greatly appriciated. Right now, there is nothing about padding located in css file. And I was told I should add a bit because my page is a headache to read. I was told: "Basically you want to add more white space between the vertical line and the text" How would I go about doing this? The site Im talking about is: www.ohiocichlids.com Hi there, I have 2 main divs.. one which holds a small ammount of content on the right hand side.. like a 'related links' box which is located at the top right of the page. The other div holds the content. It wraps around the top right div, but there is no padding to the right of the content area, so the text goes right the way up to the right hand div. How can I add some padding to the right of this area? I have added padding, but it adds it to the text where it wraps below the top right div. This is the code I am using: PHP Code: #related_links{ width: 165px; height: 237px; background-image: url('images/related_bg.jpg'); background-repeat: no-repeat; float:right; padding-right: 10px; } #related_inside{ padding: 10px; } #content{ padding-right: 10px; } #content_inside{ padding: 10px; } PHP Code: <div id="related_links"><div id="related_inside">right hand text</div></div> <div id="content"> <div id="content_inside" >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div></div> Around this dropdown image? http://199.134.225.62/NW_PORTAL/sliding_menu/sliding_menu.cfm I have padding and margins all set to 0... Hi all, I'am using a component called TinyMce and what people not to dragg images into the textrea how would I prevent this? Regards, Stephen Alistoun Hi all, My CSS for a <DIV> is: Code:
.title {
width: 350px;
background: #aaccff;
padding: 0px 0px 0px 10px;
border: 1px #cccccc solid;
}
When I enter text in the DIV, it shows a bit to the right of the left border, which is what padding property is supposed to do! The problem is, in Internet Explorer, this "shift" is PERFECT and there is no extension beyond the right border, but in Firefox, the background color can be seen extended 10px to the right border. I searched on internet and people called it a problem with I.E. Everywhere I visited, people seemed to curse a Microsoft product and give a line of code, "DOCTYPE" etc to force I.E. to change mode and behave like Firefox. Those guys dont understand that what the coder wants is a solution so that Firefox shows the DIV exactly like I.E. 1) So please! Stop cursing I.E. and give solution as to how to modify the code...! 2) A person said that the width is calculated as: width + padding + margin. In my case, since margin is "0", the suggession seemed to use the following code: Code:
.title {
width: 340px;
background: #aaccff;
padding: 0px 0px 0px 10px;
border: 1px #cccccc solid;
}
i.e., subtracting the padding-left from width. But that makes "no sense" because if we do the above, it should do nothing but to just change the width of the DIV, and so the end result would be that in Firefox, instead of spanning to 360 px horizontally, this would cause it to span in 350px horizontally. Keeping in view that its the "only" DIV on the page, setting the width parameter should not be a problem. 3) Now, if Firefox follows standard, then how will firefox ever show the padding property correctly if the above scenario is considered...! 4) Microsoft may not follow the standards sometimes, but the result "is" userfriendly most of the times...! Thanks! just read a post on ALA regarding how to create a simple thumbnail gallery using CSS. while the styling of the CSS provided on ALA seems to render the same on both FF and IE, the original code renders slightly different. everything seems to work fine except for the padding around the caption, underneath the image. there is more space around then caption when viewed in IE. please look at this link where the html file and css are hosted - (view source) can you make out anything that could be adjusted to fix this tiny bug? really appreciate if you could help out a little here. been at this for the last couple of days, and now really dead with any ideas to fix this tiny issue :-/ thanx for your time, z Have a problem with my page.... There is a red bar appearing at the top of the page (looks like my page has padding:30px at the top). This only appears in Chrome (I'm using v10.0.648.151). In FireFox and IE it doesn't appear. You can view the site at www.rustyredlacrosse.com/ Not sure why the site is doing this ...anyone have any ideas? looks perfect in Moz and IE...but any time I set a padding it overhangs the actual width. So the below code creates a 1010px wide result...is there a workaround for Opera sucking? Code:
.topa { width: 1000px; padding: 5px; background:#000000 }
edit: nesting a div and putting the padding on it without a background seems to work...while I'm sure it is overhanging the same way, at least it doesnt LOOK that way. The padding isn't correct in IE or Firefox. It looks fine on a mac, but it's not rendering right on PC. strategicguru.com/secure-enterprise The menu should fill up the gray bar all the way to the right. What is conflicting here? EDIT: Fixed [s]Anyone know why that ie6 keeps doubling the padding to the left of the that avatar image on the top [/s]http://new.gifdump.com/ Hello, I am having problems sorting out my css. It all looks good but when i look at the css it has 21 browser errors in different browsers. Mainly it is padding errors for netscape 4.0. Is there a way round this please? Cheers |
|||||||