In the following image I have a form which has rounded corners but if you look closely, there is some sort of ugly overlap on the bottom corners (some sort of white corner)
I tried using a bigger border-radius on the background and taking away the background, but looks like it isn't the background but the element itself, since that didn't do anything.
This is my css code for the bottom of the form (the gray area around the button)
.formss #button_div{
clear:both;
height: 60px;
width: 100%;
border-top:1px solid #ddd;
margin-top:5px;
padding-top: 10px;
text-align:center;
background:rgba(51,51,51,0.8);
-moz-border-radius-bottomleft: 19px;
-moz-border-radius-bottomright: 19px;
-webkit-border-bottom-left-radius: 19px;
-webkit-border-bottom-right-radius: 19px;
border-bottom-left-radius: 19px;
border-bottom-right-radius: 19px;
}
I have experienced this problem before, I guess keep doing something wrong but I dont know what.
EDIT: jsFiddle --> http://jsfiddle.net/Z6pwR/4/
I dont know why the text inputs are going outside the form in the fiddle
I can't explain why your solution isn't working properly, but if you remove the overflow: hidden property from #agregar_instituto_div and add it to the children / the form, the problem is gone.
You need to set set a value for the ".widearea" border. The standard browser input border is causing that problem.
jsfiddle.net/Z6pwR/5/
Related
I have a situation in which I'd like to be able to give a slight round to the right side of a div. Is there any CSS wizardy that can achieve this? If so, please demonstrate using this fiddle template: http://jsfiddle.net/z2hejemu/
HTML
<div class="rounded-side">
<p>This div is by default rectangular in shape. I'd like the right side of it to be rounded, if that's possible. </p>
</div>
CSS
div.rounded-side {background-color:yellow;padding:10px;}
div.rounded-side > p {font-size: 36px;}
To get the semicircle you're looking for, you'll want to take advantage of the scaling requirement dictated by the spec. The key is to use border-radius with equal and very large values (see the fiddle http://jsfiddle.net/gLsd2z4L/ forked off of yours):
div.rounded-side {
background-color:yellow;
padding:10px;
border-radius: 0 100em 100em 0;
}
div.rounded-side > p {font-size: 24px;}
<div class="rounded-side">
<p>This div is by default rectangular in shape.
I'd like the right side of it to be rounded, if that's possible. </p>
</div>
This works because, as described in the spec:
Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap.
In the example, the total of the radii is 200em; assuming the height (or width, whichever is smaller) of your element is less than this total, the radii will be scaled down proportionally. Since we're choosing equal values for the radii, they will continue to be equal, just reduced. Choosing very large values (i.e., sizes that the element's box will never come close to) forces the browser to do the scaling.
In the link "The curious case of border-radius:50%" posted by Stephen P in a comment on another answer, they suggest using the value 9999px; I used 100em simply because it looks cleaner to me. Unless there's some performance cost with some values/units over others (very doubtful), it shouldn't matter what you use, as long as the radii are equal and their total is larger than the element's size.
You're just missing border-radius:
http://jsfiddle.net/z2hejemu/3/
div.rounded-side {
background-color:yellow;
padding:10px;
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
where the border-radius format is (in this case): top-left top-right bottom-right bottom-left
This code below should solve your issue.
div.rounded-side {
border-radius:0 20px 20px 0;
}
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
-webkit-border-top-right-radius: 2em;
-webkit-border-bottom-right-radius: 2em;
-moz-border-top-right-radius: 2em;
-moz-border-bottom-right-radius: 2em;
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
I have this HTML in JSFiddle: http://jsfiddle.net/p5Dqw/
When I try to put margin-top: 5px; or padding-top: 5px; to #newsPaneText, it either moves the entire #newsPane div itself down, which I didn't even think was possible, or it moves the text inside down like 25 pixels extra, seemingly for no reason at all. On line 102, add padding-top: 5px; or margin-top: 5px to see what I'm talking about. What is going on here? I have no idea why this is happening.
I know my solution may be not valid but it may help you to solve your problem.
You need to add margin-top to make it work.
margin-top: 16px;
padding-top: 5px;
See This JSFiddle
As i understood you have to add line-height, correct me if you are
asking different question?
in line 105 add this two lines of css (change the values if you
need)
line-height:10px;
padding-top:5px; or margin-top 5px;
Hope this helps you
I don't know what was going on, but putting display: inline-block; in #newsPane and margin-top: -10px; in #newsPaneText fixed the issue.
I am facing a problem with a list inside a div. The thing is, I have a div with a list inside. This limits the amount of div intens that will appear to the user. When the limit is exceeded will see a scroll inside this div, for the user to view other intens, this same div has a rounded edge (border-radius) at the bottom. When I move the mouse over the LAST ITEM LIST, it removes the effect of border-radius of div. Who can help me here is a file jsFiddle Here
.limit {
height:300px;
width:500px;
background-color:red;
overflow: scroll;
/*overflow: hidden;*/
overflow-x: hidden;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6x;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6x;
}
Much appreciated in advance!
it's caused by
li { ... position:relative; ... }
remove that from li and apply it to a nested element (ie li > .somediv) and make this one transparent... no borders, backgrounds, etc.
update: a nicer workaround http://jsfiddle.net/YcYHd/
Add outline:1px transparent solid to the scrolling element.
Apparently this seems to prevent the bug
hope this helps
So I'm trying to create a textbox with rounded corners but I don't know exactly how to go about doing it. I have the HTML and CSS here for what I want so far but I can't wrap my mind around rounding the corners.
Html:
<form action="index.php">
Textbox <input type="text"/> <br />
</form>
For right now, all I need is the CSS if it is possible. This is what I have so far of the CSS:
form {
height:50px; width:200px;
}
If this is impossible for CSS to this just say that in the comments but if not, please tell me. Thanks
You could try border-radius, however keep in mind it won't work in all browsers:
input[type="text"] {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Demo: http://jsbin.com/uduyew/1/edit
You can add rounded corners by adding the following to your css file:
input {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
I use 3px here as an example - you could easily change that. The higher the number the more rounded the corners. You could also add rounded corners to a single corner like this:
input {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
}
That example would round only the top left corner. Playing with that code you could probably see how easily you could round any specific corner or all of them at once.
I have this wireframe http://problemio.com/problemionewest.pdf and you see on the top-right there is a text box that has rounded corners.
Is that done with css only or image and css? I have an image that was provided to me, but would much rather just do it with css. In any case, I don't know how to do it either way lol, so any help would be great!
The current version I have is here: http://www.problemio.com
You could use CSS to do that, but it wouldn't be supported in IE8-. You can use some site like http://borderradius.com to come up with actual CSS you'd use, which would look something like this (again, depending on how many browsers you're trying to support):
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
This can be done with CSS3:
<input type="text" />
input
{
-moz-border-radius: 15px;
border-radius: 15px;
border:solid 1px black;
padding:5px;
}
http://jsfiddle.net/UbSkn/1/
However, an alternative would be to put the input inside a div with a rounded background, and no border on the input