How to style a <div> already styled - html

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;}

Related

Border-box breaks the container of the responsive image

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>

textare a doesn't resize when I change "cols" parameter

I have a textarea that i'd like to shrink in width: but no matter what I set the cols= parameter to, the textarea keeps its width. Why is this?
The code looks like
<textarea id="edit-submitted-question-request" name="submitted[question_request]" cols="10" rows="5" class="form-textarea required"></textarea>
and it can be found here:
http://quaaoutlodge.com/content/dinner-theatre-rock-romance
EDIT A
I commented out width: 100%; in .form-textarea-wrapper textarea in my css and now the textarea renders to the right size but the "resize bar" to extend the text area is still at 100%, why is this?

Found a class in your css that makes problems for your textarea size:
.form-textarea-wrapper textarea {
display: block;
margin: 0;
width: 100%; // <----- Thats the problem
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
width from that class is affecting on textareas. check your css file /system.base.css?nipcyw

you are using one div for the textarea in which you have set width as 100%, Please remove that width part then your cols=parameter will start working.
.form-textarea-wrapper textarea {
display: block;
margin: 0;
/* -------- width: 100%; ------- */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

css how to make max-width fixed when adding padding

I just wondering is there any way that could make max-width become fixed when padding left and right is being added?
Here my css:
#editorBody {
overflow: auto;
margin: auto;
padding: 15px 40px 10px 40px;
max-width: 816px;
}
I would like the width is 816px, but actually it is 736 (816-50).

You are going to want to add the css rule box-sizing: border-box;
According to Caniuse there may be a need for prefixing...
CSS
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
Check out this page for a comprehensive look at box-sizing

Why box-sizing on * instead of body

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

input box padding fitting inside div cross browser

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;
}