I have a div set at a specific height, and text inside that div along with an input box. In safari and chrome it fits pretty nicely but in firefox it overflows into out the bottom of the div and is messing up the structure.
HTML:
<div class="formLine">
<div style="float:left;">Input Label</div>
<input value="" />
</div>
CSS:
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.formLine {
border-bottom:1px solid #000;
padding:2px;
height:18px;
}
input {
background-color:#E2F4FE;
height:14px;
outline: 0;
border:0;
border-radius:3px;
line-height:14px;
padding-left:3px;
float:left;
}
Firefox implements the box-sizing property with the -moz- prefix (click here for browser support). Change your universal selector to:
*, *:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Related
I've a rule like:
div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
}
For a special div with a specific ID I'd like to remove the:
text-align:left;
to have the text centered, but I can't succeed.
I've added, class, id and my text do not center.
Could you please help me?
may be .....id like that
#special {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align : center !important;
}
It shouldn't be abused but you can try this
div.new {text-align:center !important;}
I have a <div>, with fixed height and padding. The border-box property is applied on the whole page. Inside the <div> I have an <img> with max-width:100%, and max-height:100% properties. My problem is the container is wider than excepted (I think because of the padding).
What is the best solution to add padding around the image without breaking the design OR how to fix it?
I saved it to JSFiddle (http://jsfiddle.net/4eo6bebj/) and I also added it to my question.
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#responsive-image {
height:150px;
border:1px solid red;
display:inline-block;
float:left;
padding:15px;
}
img {
max-width:100%;
max-height:100%;
}
<div id="responsive-image">
<img src="http://lorempixel.com/400/200/sports/">
</div>
Update: The problem is visible in Firefox.
You could remove the padding from the div and add it into inner elements.
http://jsfiddle.net/6ux1wjLc/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#responsive-image {
height:150px;
border:1px solid red;
float:left;
}
#responsive-image * {
padding: 10px;
}
img {
max-width:100%;
max-height:100%;
}
<div id="responsive-image">
<img src="http://lorempixel.com/400/200/sports/" />
</div>
Let's assume for a second I do not wish to use Bootstrap.
How do you achieve his perfect vertical alignment of the input with its button? When I do it the button vertically misaligns. I do not wish to use "hacking" on the top-margin to fix this as I'm afraid it won't look well on all browsers.
How is bootstrap achieving this magic?
my goal is something like this:
I think the answer would be using box-sizing: border-box, as bootstrap does. This works across all recent modern browsers:
<input type="text" placeholder="Your text here">
<button>Button</button>
input{
float: left;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button{
float: left;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
http://jsfiddle.net/4dgzbc3y/
You will have to use a container and display both as table cells (working jsFiddle):
Markup:
<div class="container">
<input type="text" placeholder="Your text here">
<div class="button">
<a>Button</a>
</div>
</div>
CSS:
.container{
display:inline-table;
vertical-align:middle;
}
input{
display:table-cell;
padding:5px;
}
.button{
display:table-cell;
background:gray;
padding:5px;
}
Note:
Keep in mind general things like both having the same font size and padding. To make it look slick you can round the outer corners same as in bootstrap :)
Have an input and button with explicit heights. The input and the button will need a comment between them to "connect" otherwise they will have na ugly space
.target {
height: 2em;
}
.target * {
height: 100%;
display:inline-block;
border:none;
outline:none;
}
.target input {
width:79%;
background-color:black;
padding-left: 5px;
}
.target button {
width:10%;
background-color: orange;
box-sizing: margin-box;
padding: 0; margin: 0;
border-top: 2px orange;
}
<div class="target">
<input placeholder="Foo" type="text"><!--
--><button>Bar</button>
</div>
I have seen that box-sizing: border-box will avoid width calculation issue. I have doubt that why it is on * like
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
What is problem in defined like below.
body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Will not apply to all child elements? why?
It will be applied to all elements in the document instead of just the body element.
This way you don't need to add the box-sizing to all the style rules where you need the box-sizing.
Just be aware of that it may affect performance of the page using *. If you only need it for a few elements it is better to specify the box-sizing for those few instead.
" * " is universal CSS selector which means it selects all individual element on an HTML page.
Example-1:
Whenever you select body it only styles up the body (Remember only body not it's child).
HTML:
<body>
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
</body>
CSS:
body {
padding: 5rem;
background-color: chocolate;
border: 2px solid white;
}
Result:
Padding, background, border applied only on body
Example-2:
Whenever you choose " * " It styles up all individual elements including body inside an HTML document.
HTML:
<body>
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
</body>
CSS:
body {
padding: 5rem;
background-color: chocolate;
border: 2px solid white;
}
Result:
Padding, background, border applied all individual elements including body
<div id="colorscheme">
</div>
<div id="content">
<div id="display_saved">
TEXT TEXT TEXT
</div>
This is HTML structure of related to issue document.
CSS:
#colorscheme{
width:25%;
display:inline-block;
height: 50px;
background:green;
}
#content{
width:50%;
display:inline-block;
background: gray;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#display_saved{
border: solid 1px red;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width:100%;
}
JSfiddle
As you can see from the feedle, there is some space between #colorscheme and #content, despite there is no margins, and there is border-box property. How can I reduce it?
Inline block can cause whitespace issues and I would recommend floating the elements.
Have a look at this forked example - http://jsfiddle.net/DkhDm/1/
It's also worth noting that display inline-block lacks support in some browsers - which is another reason to always use floats ahead of it! You do however have the small added complication of clearing the floats but this is easily achieved.
#colorscheme{
width:25%;
float: left;
height: 50px;
background:green;
}
#content{
width:50%;
float: left;
background: gray;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#display_saved{
border: solid 1px red;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width:100%;
}
It's just whitespace, which is logical because you've reduced your blocklevel elements to inline blocks explicitly. Eliminate the whitespace and it'll go away:
<div id="colorscheme"></div><div id="content"><div id="display_saved">TEXT TEXT TEXT </div></div>
DEMO
CSS:
#colorscheme{
width:25%;
display:block;
height: 50px;
background:green;
float:left;
}
i have added float:left; and changed to display:block;
You can move the elements back into place with negative 4px of margin. (Not in IE6,7). inline-block do cause whitespace, i don't think it's a bug and it's rather nice to have when using inline-block on text-elements.
#colorscheme{
margin-right: -4px;
width:25%;
display:inline-block;
height: 50px;
background:green;
}
You can also use html comments to eliminate the whitespace.
<div>
<p>Content</p>
</div><!--
--><div>
<p>More content</p>
</div>