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
Related
here is my url www.hotelchurch.org. Above each of my content boxes is a slightly gradient bar that i want to either remove to just make it transparent. I can enter CSS custom code but can't figure it out and the developer is having trouble too. Seems like it should be simple to isolate it using the web inspector and then doing some simple CSS... but I'm not succeeding. Any advice? thanks.
This was the original code that was given to me by the developer to try. I'm stalled out. I tried the other suggestions below but nothing
.otw-sc-contentbox .otw-contentbox-title .otw-regular-title{ background: none !important; }
Im not sure how this code was laid out, try going to the elements/box model with the border and typing
border-style: hidden;
This should just hide the border completely while not collapsing it.
If you cant identify the elements with the border try adding.
* {
border-style: hidden;
}
though this will hide ALL the borders on your web page.
:) hope this solves your problem
After have changed marker icon (same as original, just colorized), borders are still displayed under Firefox, not from Chromium :
This CSS code has no effect:
border: none; / border: 0;
overflow: hidden;
An idea to force hide this undesirable effect?
In fact, this effect has added by an outside element: .leaflet-pane.leaflet-shadow-pane ; no rule applied on .leaflet-pane.leaflet-marker-pane that contain markers.
Code inspection has been not easy: element to hide
Solved by simple display: none; rule on this element .leaflet-pane.leaflet-shadow-pane: you can see
Seems rather like the "border" you see is actually the placeholder for a broken image.
Typically if your custom Marker icon's shadow is missing (e.g. you forgot to change its default value, while not providing the default shadow image asset)
This would also explain the different behaviour between browsers, since each of them hints for broken image differently.
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've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/
When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.
In landscape view, this scrolling isn't there and it renders as I'd like it.
I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?
Just adding a border to some divs can cause the layout to change.
Add this to the bottom of your css to find the rogue element:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.
I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.
Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.
One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.
A different approach would be to run this JS code in the console to find them:
Array.prototype.filter.call(document.querySelectorAll('*'), function (node) {
return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth
});
This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.
You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.
Interestingly enough, this was only seen on iPhones, not on Androids.
I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.
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;">