I have a responsive web page in which I am trying to show a modal with an image inside. The following is the html of the modal
<div id="open_modal" class="modal">
<div id="chicken">
<img src="images/chicken.png" alt="McChicken"/>
<div class="kosullar" title="lorem ipsum">Katılım Koşulları</div>
</div>
</div>
And the following is the css I have for the modal
.modal {
display: block;
overflow: auto;
z-index: 1001;
position: absolute;
height: 100%;
overflow: hidden;
padding-top: 77px;
padding-bottom: 10px;
opacity: 1 !important;
}
#chicken{
height: 100%;
color: #fff;
overflow: hidden;
text-align: center;
float:left;
}
#chicken img{
height: 100%;
float: left;
}
.kosullar{
color: #fff;
font-size: 10px;
height: 20px;
background-color: #2B9BC8 !important;
float: left;
position: absolute;
bottom: 15px;
padding: 2px;
text-align: center;
cursor: pointer;
border: 1px solid;
width: 100%;
}
As you can see in the css I have added 77px top padding to the modal class, so that it wouldn't overlap with my navigation bar. Other than that the modal should have the same height as the display and its width should be automatically calculated according to the aspect ratio of the image. This works very well on Chrome (and IE as well surprisingly), but it misbehaves on Firefox. On Firefox the image looks as it's supposed to, but the width of the modal is wider than it should be. To be specific, the width of the modal is what it should have been if there was no padding on the modal. How should I modify this css so that Firefox will calculate the width of the modal successfully. You can visit adwin.com.tr to see the problem for yourselves.
First of all mention <!DOCTYPE HTML> (in case of HTML5) if you have not mentioned and then try adding
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
in you modal class, this should help you solve the width issue.
Alternatively you can override the bootstrap's
*, *:before, *:after {
-moz-box-sizing: border-box;
}
to
*, *:before, *:after {
-moz-box-sizing: inherit;
}
You can also refer w3
try this:
#chicken img {
display: block;
float: none;
height: 100%;
margin: 0 auto;
}
Related
I have a icon font and I need to center my letter in a circle.
I copy my code in this jdfiddle
This is css code
.icon:before {
margin: 0 auto;
font-size: 57px;
}
.icon h2 { text-align: center; }
.circle.icon:before {
border-radius: 50%;
color: #FFFFFF;
width: 65px;
height: 65px;
display: block;
text-align: center;
line-height: 1.2em !important;
}
.icon.mobile:before{ content: 'F'; }
.mobileC { color: #8CC63E; }
.icon.mobile-background:before { background-color: #8CC63E; }
this is html code
<div class="icon circle mobile-background mobile"><h2 class="mobileC ">Mobile games</h2></div>
As you can see via normal browser they are centered
but when I open the page via mobile I see this
The same result if I turn-off the line-height from browser inspector.
Can someone know how can fix this?
Did you try to add a
vertical-align:middle;
?
in most cases, it works.
Or you can just use padding, and avoid resizing by using:
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
So I have a site with a simple two DIV panes: a content area left and a fixed 300px menu right, both of them going to a max of 1200px. I want users to be able to resize the window and have the LEFT pane shrink with the right menu staying fixed. But right now I can't find any way to do this, everything looks good at max size, but the left pane doesn't shrink if I resize the window, instead the right menu just wraps to the bottom of the screen. This would be easy with a left menu but the menu is on the right. Here is what I have so far:
#main
{
max-width: 1200px;
margin-right: auto;
margin-left: auto;
margin-top: 0;
display: block;
padding: 0;
}
#left
{
max-width: 890px;
float: left;
padding-right: 10px;
}
#right
{
width: 290px;
top: 0;
float: right;
padding-right: 10px;
padding-left: 10px;
}
you can use CSS calc() to adjust the width of the left container.
OPTION 1 FIDDLE
HTML
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
CSS
#main{
width: 100%; //set to 100% since you're capping it at 1200 anyways
max-width: 1200px;
/* margin-right: auto;
margin-left: auto;
margin-top: 0; */ condense these to the following:
margin: 0 auto;
/*display: block;*/ already a block element so not necessary
padding: 0;
overflow: hidden; //add to correct floating elements
}
#left{
background: red; //just for my test
height: 100px; //just for my test
width: calc(100% - 300px); //readjusts based on screen size
float: left;
padding-right: 10px;
-moz-box-sizing: border-box; //if you use padding add these lines to fix issue of padding adding to width
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#right{
background: black; //just for my test
height: 100px; //just for my test
width: 300px;
/*top: 0;*/ //dont need, not doing anything
float: right;
/*padding-right: 10px;
padding-left: 10px;*/ //can condense to following:
padding: 0 10px;
-moz-box-sizing: border-box; //see padding explanation above
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
OR
If you are worried about older browsers you can do this with display: table and display: table-cell like so:
OPTION 2 FIDDLE
CSS
#main{
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: block;
padding: 0;
display: table; //add
table-layout: fixed; //add
}
#left{
display: table-cell; //use instead of float
background: red;
height: 100px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#right{
display: table-cell; //use instead of float
background: black;
height: 100px;
width: 300px;
padding: 0 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Instead of floating the divs, try display: inline-block on the left and right panes, or CSS3 flexbox (depends on how far back you support legacy browsers).
Flexbox example: http://jsfiddle.net/571k3gx2/
I want to put three divs in order as following: input, break, ouput. And thier parent div is the container. I am facing problem in applying the box-sizing for these divs, here is my css:
html {
border: groove 8px red;
margin: 20px;
}
.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height:75%;
}
.container .input {
width: 49%;
height: 100%;
border: solid 2px red;
float: left;
}
.container .break {
width: 2%;
height: 100%;
background: blue;
float: left;
}
.container .output {
width: 49%;
height: 100%;
border: solid 2px green;
float: right;
}
You have to apply box-sizing to the children as well:
.container > * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
CSS's border-box property doesn't take into account margins. You'll need to set margin of 0 and adjust padding accordingly, but this may be undesired if you're using borders. You can try using percentages for margin so they (widths plus margins) add up to 100%. Also make sure that the child divs are inheriting box-sizing; you may need to define that specifically. I usually set this in CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Lastly, get rid of that .break div. Use margins instead.
Is your output div dropping below your input and break divs? That's because your border pixels are being added onto your widths.
49% + 2% + 49% + 8px of borders (2 on each side of input and 2 more on each side of output) > 100%
You'll have to try different things to get it to work, but dropping to 48% or even 45% might work. Since your area already floating left & right the extra space will just go in the middle.
this simple three-column layout DEMO
HTML
<div class="header">header</div>
<div class="layout">
<div class="col1">column 1</div>
<div class="col2">column 2</div>
<div class="col3">clolumn 3</div>
</div>
<div class="footer">footer</div>
CSS
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.layout DIV { float: left; }
.col1 { background: #C7E3E4; width: 20%; }
.col2 { background: #E0D2C7; width: 60%; }
.col3 { background: #ECD5DE; width: 20%; }
try this (compliments of _s). when you give it a % based width and then a px based border the default is to add them together, this should fix that.
*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
-webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
-moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
box-sizing: border-box;
}
LIVE DEMO
HTML
<div class="container">
<div class="input">
</div>
<div class="break">
</div>
<div class="output">
</div>
</div>
CSS
html {
border: groove 8px red;
margin: 20px;
}
.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height:75%;
}
.container div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container .input {
width: 49%;
height: 100%;
border: solid 2px red;
float: left;
}
.container .break {
width: 2%;
height: 100%;
background: blue;
float: left;
}
.container .output {
width: 49%;
height: 100%;
border: solid 2px green;
float: right;
}
Problem
I have set my CSS with;
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin:0;
padding:0
}
Since doing so though i have inconsistencies with the height of a div that has a set height, across different browsers.
Div's CSS in question
.content.one /*inquiry form*/ {
position: absolute;
float: left;
display: none;
top: 50px;
height: 615px;
left: -255px;
width: 960px;
z-index: 5;
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 10px;
background-color: #000000;
}
You have to use non-standart properties to use (sad but code will become invalid, because of them :()
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari, Chrome */
So full style will be:
div {
width: 300px;
background: #ccc;
padding: 20px;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari, Chrome */
box-sizing: border-box; /* ie, opera */
}
Now div will be 300px width with all margins and paddings.
One cons is box-sizing property doesn't work in IE6 and IE7.
You can use nested layers instead:
Html:
<div class="block">
<div>I have 100% width</div>
</div>
Css:
.block {
width: 150;
}
.block div {
background: #fc0;
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
Source: http://htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model
I am trying to make a validation box after an input field, however, across different browsers the sizing goes wrong e.g. there is a big difference between firefox and chrome.
Is there a better way to make this box so that the sizing is equal across all browsers? Here is the code and a jsfiddle of how I am doing it at the moment : http://jsfiddle.net/wPS7t/
And here is an image of the problem:
HTML
<form id="formStyles">
<div id="inputWrapper">
<input type="text"/>
<label id="xlabel">x</label>
</div>
</form>
CSS
body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Calibri;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#formStyles{
width: 800px;
margin: 0 auto;
top: 200px;
position: relative;
}
input{
font-size: 18px;
padding: 5px;
}
#inputWrapper{
position: relative;
margin-left:auto;
margin-right:auto;
width:400px;
}
#xlabel{
background-color: red;
padding: 7.2px;
color: white;
left: -6px;
position: relative;
top:-1px;
}
Maybe try padding 7px? I'm not positive but I don't think both browsers except 7.2px as a result and probably is rounding it.