I'm not able to add some blank space below this form. The bottom of it still sticks to the edge of the page.
form {
display: inline;
text-align: center;
margin-bottom: 50px;
}
May I know how I can fix this
Thanks!
You can't add margin-top and/or margin-bottom to an element with display: inline because it will simply have no effect (although margin-left and margin-right will have) :)
Do you really need to apply display: inline to a form?
Perhaps if you could supply some more details I could try to be more helpful.
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once
In CSS, it is possible to specify different margins for different sides of an element
EXAMPLE:
ClassName Or ID{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
Related
if the first line is to small, then the label will be cut (see pic). Does anyone knows a solution?
enter image description here
i found a solution:
set a top and buttom padding of the container
.sankeyChart {
padding-top: 10px;
padding-bottom: 10px;
}
after every draw set the overflow to visible
container.find('svg').css("overflow", "visible");
can I somehow remove the gaps between the parts in an eclispe e4 application. There is always a couple of pixes (like 5 or so) gap where the background color can be seen between my tabs. However, I need the full space for the parts and thus want to get rid of this gap.
I tried already with css-properties (margin and padding) set on CTabFolder and MPart without success..
Any ideas?
Turning off the shadow on the part stack removes most of the space:.
The padding for the part stack adjusts the space inside the border.
.MPartStack
{
swt-shadow-visible: false;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px
}
http://ingoodtastemag.com/
On an iPhone, the button is round with a gradient. However, on every other desktop browser and Android that we've tested so far, it is square. I want the button to stay square. What CSS resets do I need for this?
This rounded corner is the default property of the Safari browser and iOS 5 devices. To overwrite it, use the following styling for your button:
-webkit-appearance: none;
border-radius: 0;
To keep your own border radius while removing the iOS styling
-webkit-appearance: none;
-webkit-border-radius: none;
border-radius: 10px;
You must remove webkit's border-radius to get your own style back, but you can still add your own border-radius after you remove theirs.
You could try to use this property on your button attribute.
border-radius: 0
How could i add curved corner to a gwt-checkbox using css?
.gwt-CheckBox {
border-radius: 5px 5px 5px 5px;
}
This Doesn't works!!!!
i also tried this too. but no change.
.gwt-CheckBox > input {
border-radius: 5px 5px 5px 5px;
}
spell check - border-redius must be border-radius
Curved Corner for checkbox via CSS is possible only in firefox/chrome and not in IE8 browser.
Which browser are you testing on? Apart from IE for others try -moz-border-radius or -webkit-border-radius etc depending on your browser.
Refer the link for IE information- Support for "border-radius" in IE
I'm trying to animate a DIV using CSS3 transitions. The example DIV is:
HTML:
<div class="element"></div>
CSS:
.element {
-webkit-transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 2s linear, width 2s linear;
position: absolute;
left: 100px; top: 100px;
height: 10px; width: 50px;
background-color: black;
}
This means that the DIV occupies a region in its container from (100px, 100px) to (150px, 110px) - and the right edge is fixed at 150px.
I would like the DIV to maintain a static right edge at 150px whilst I translate the left edge off the screen, so I've been applying (via Javascript) a transition class to the DIV like so:
CSS:
.transition {
-webkit-transform: translate3d(-200px, 0, 0);
width: 150px;
}
The issue that I'm seeing is that the transition on the width does not keep up with the left edge of the translated DIV, so instead of increasing uniformly in size and left position, the right edge position fluctuates as the DIV slides off at a different rate, flickering slightly (depends on platform how much it flickers).
The issue occurs more vividly on Mobile Safari (a Phonegap webview on the iPhone is my main development platform), rather than on Chrome.
I've put a JSFiddle at http://jsfiddle.net/XwuBz/ which demos it (view it on an iPhone to see it occurring).
Is there another way to achieve this end result?
Thanks in advance,
Dan
Well, it seems that iOS Safari has some weird issues with transitions / transform.
I tried to achieve the same results with jQuery only, and it worked on iPhone 4s, iOS6:
$('.element').animate({left:'-=200','width':'+=200'},2000);
Here is a demo.