Webkit decided there weren't enough browser incompatibilities and added 2px of padding to my textarea. However, if I set padding:0 then it looks awful when typed in. Is there a way I can make it the same size without destroying the display? (It seems like -webkit-padding-start:2px and -webkit-padding-start:2px will fix the left and right, but there are not corresponding properties for the top and bottom)
Also, there's some type of little handle in the bottom right corner to allow resizing of the textarea. Any idea what CSS property might turn this off?
For the second part of your question try this:
textarea
{
resize:none;
}
Just had this problem myself. Try:
<textarea style="margin-left:0;">
Related
Check this out:
http://codepen.io/maxwbailey/pen/vGKBr
Now, they look fine when you aren't hovering over them, but when you hover over the <button> and <input> elements, you'll see that the text below them is bumped around a bit, while hovering over the <a> element does not cause the same effect. That's because the <button> and <input> elements are displaying as inline-blocks still (which handle borders, padding, and margins differently than regular inlines), despite the display: inline !important; line that is applied to them.
Is there anyway to override this? I know it's doable via hacks like borders with the same colour as the background, etc. but I'd really like to know if there's a way to make them display: inline properly.
Note: The problem here isn't about the text being bumped around (though that is an effect of it), it's that, despite everything saying otherwise, the browser is still forcing the button to display as an inline-block. Thanks to everyone who's provided methods to prevent the text bumping from happening, but that's not the real problem here.
Thanks!
Not sure the context of why your markup exists like this, but the issue looks like it's being triggered by setting the font-family. If you take a look at this pen - http://codepen.io/pnts/pen/Egwuo - the hover works fine without a font-family specified, but if you uncomment the line specifying one, the jumping begins.
It seems your question is a little misleading. Your button tag IS in fact set to display:inline on both normal and hover states. It sounds like the question you have is how to prevent the text below from getting bumped down on rollover. Instead of using a bottom border as you are currently, why not use the following in the hover state to achieve the underline?
text-decoration:underline;
agree with the previous answer, however if you want the flexibility of a border, being able to use padding to adjust where it lays etc, you could use
border:1px solid transparent;
not as hacky as using the same color as you bg because it doesn't matter the color of the background that way.
I am having problems with the text input in firefox, it has some margins and I can;t get rid of them, maybe that space is not a margin?(it is outside the border of the input so it looks like a margin).
In the image above the width of the input is set to 100%,,margin and padding is 0, also i tried setting -moz-box-sizing: border-box;
I would like some resources or an explanation to make me understand what is that space and how can I get rid of it?
Thanks.
Edit1:
Here is my current test page
https://www.designersbookshop.com/support/test.html
also i made a copy in ...test_2.html (i will try the suggestions on the test.html),
Check the inputs on left side.
Edit2:
My Firefox version is 10.0.2
Here is how an input element looks like in firebug, it is clear that a margin or something similar is painted outside the border(or i am stupid but I want to learn)
in the image above the border of the input is the small line(1px) visible on left and right of the input.
Edit3 I figure it out, is the border, I am on Ubuntu but I has similar on Mac,so it is the theme engine that adds that white border?
You're using OSX right? I think what you are referring to is the focus highlighting. It's only seen on the active element, right?
Normally that is controlled by
input:focus {
outline: none;
}
Some people use it to remove the rectangle around links as well. which is a bad practice since it reduces usability as users can't visually see what is the active link. (think of keyboard users.)
FYI: here is a screenshot of your test page (from Edit1) in Firefox 10 under Windows: http://img210.imageshack.us/img210/1764/inputform.png
As it always has been with input fields in HTML - their appearance is often dictated by the OS or browser. Very hard to get a consistent appearance.
May be it is outline or border
Try
input {
padding:0;
margin: 0;
border: none;
outline: none;
}
Update: I cannot duplicate your problem on my system. This is what i see
Which css should I apply to textbox that make it same as background means user does not feel like he is typing in textbox? I tried giving same background color but it still doesn't provide exact what I want. User still can feel that it's a textbox.
Do you mean like this?
input {
border: 0;
background: transparent /* the important bit */
}
Live Demo (I added a blue border on a parent element so you can see where the <input> is)
http://jsfiddle.net/eUmr2/1/ (with gradient background to more easily see the transparent)
Appears to work in IE6:
If I understand your question correctly, you should first of all "hide" borders of textarea or input field. You can simply use "border:none;" property for this. In this case, if both backgrounds will be the same (e.g. textarea and rest of the container) it will be displayed like you need.
I don't know exactly what are you trying to achieve, but this method is used usually for not standard designs of form fields. The only you need to do is to be sure that this part of your page is OK from usability point of view.
Good luck!
Remove the borders and apply the same background color as the container it's in.
Please go to: http://jlecologia.com/page1c.html to see the problem
The top box look fine but in IE6 there is a double top and bottom border.
can somebody point me ut what i have done wrong ?
Or can anybody tell me a javascript rounded box that accept to do that effect with the border that is unequal. I have test some and they all fail, so i have done the picture round box but i like the jQuery javascript approach better.
Take a look at the JQuery's round corner plugin
And here is a demo
The default for background images to to have them repeat.
Try: background: transparent url(../images/roundbox-top.jpg) 0 0 no-repeat;
Edited after comment to provide full solution:
IE6 sets the height of empty divs to your font-size if the height specified in the css is less than the font-size.
On #roundbox .top and #roundbox .bottom, put
font-size:0;
line-height:0;
That will collapse the div to the right height.
In addition to the change you've made for the bottom border, setting the font-size of the element with class "top" to 7px fixes it in my IE6.
Try using the web developer toolbar in Firefox to validate the CSS and HTML. I did a quick check and there are multiple errors in each. The rendering difference, I suspect, is because IE does not handle malformed content as well as FF. In particular, even small errors in CSS files tend to snowball in IE and melt down an otherwise good layout. Not sure if IE7 and IE8 have made any improvements in this regard.
I have setup my form using CSS.. Labels float to the left and input/textareas float to the right. They align fine.
However I recently added a block with checkbox elements. For some reason, there is a margin appearing above it which I have not been able to find the solution to fix. I suspect it is a float problem but I can not figure it out. I'm generally pretty good with CSS.
(no longer viewable)
Notice the extra space above the checkbox block... Borders are on to help you understand where the divs lie.
So where is the offending CSS code?
Thank you!
Update
It appears to be fine in Safari.
I am testing on firefox 3 on mac osx .
This is because you are using a fieldset with a legend. The legend is pushing the top margin out. Legends are very difficult to style cross browser, in fact most browsers cant style them at all other than font color.
Check this link to see some research that has been done on styling legend elements (with cross browser screenshots): legend styling
I suggest you hide the legend, and include an extra label inside the fieldset for cross browser goodness.
I think its this:
.option-row input {style.css (line 562)
display:block;
float:left;
width:10%;
}
Firebug is telling me that your borders overlap. Reducing the width of that box to 8% would work, but not sure that achieves what you want?
if i'm not mistaken, your checkbox and label within the option-row class are both defined as block-level elements. try removing the display property or setting it to inline.