I am using CSS rounded corners for firefox and I have the following problem with content boundaries:
Code
<html>
<head>
<style>
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
}
#inner {
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="outter">
<div id="inner">text</div>
</div>
</body>
</html>
Effect
alt text http://img256.imageshack.us/img256/2108/testew.png
I can avoid this problem by defining -moz-border-radius for each outter's child. There is any other way I am missing?
Edit
A harder test with multiple inner divs with different background-color for each one:
<div id="outter">
<div id="inner1" style="background: blue">text</div>
<div id="inner2" style="background: gray">text</div>
...
<div id="innerN" style="background: yellow">text</div>
</div>
You can also do this:
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
background: red;
}
#inner {
opacity: 0.5;
}
Moving the background to the rounded parent will render correctly, see here for an example: http://jsfiddle.net/mE8En/ (only works in firefox!) add the webkit border radius if you want to support other webkit based browsers as well, like this:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Update for edit: To handle the inner divs in firefox subtract a pixel on the inner div to compensate for the border, resulting in this:
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: red;
}
#outter > div:first-child {
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-webkit-border-top-left-radius: 14px;
-webkit-border-top-right-radius: 14px;
}
#outter > div:last-child {
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-left-radius: 14px;
-webkit-border-bottom-right-radius: 14px;
}
#inner {
opacity: 0.5;
}
Note: the radii aren't perfect on the inner divs in webkit, adjust as desired...this is because the rendering isn't pixel perfect between browsers.
Also, if you want these rounded corners in IE without images, check out DDRoundies.
Related
I am using bootstrap to preview the mobile device as follows:
It works perfectly fine in Chrome. But not on edge :(
My HTML/CSS code is as follows:
.frame {
border-radius: 15px;
background-color: #b3b6b9;
height: 400px;
padding: 50px 10px 75px 10px;
}
.screen {
border-radius: 10px;
background-color: #ffffff;
height: -webkit-fill-available;
padding: 20px 15px 150px 15px;
}
.circle {
border: 1px solid;
border-color: #ffffff;
border-radius: 50px;
height: 50px;
width: 50px;
margin: 10px auto;
position: relative;
}
.preview {
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 0px;
background-color: #dee0e2;
height: -webkit-fill-available;
}
<div class="col-4">
<div class="row">
<div class="col-12">
<p>Preview</p>
<div class="frame">
<div class="screen">
<div class="preview"></div>
</div>
<div class="circle">
</div>
</div>
</div>
</div>
</div>
But the layout is not working fine in Edge. I guess there is something to do with the CSS statement height: -webkit-fill-available;
The layout of the mobile device in Edge is shown below for your reference.
Notice that the preview div also not displayed in Edge:
I think you can simply declare height twice:
height: 100%;
height: -moz-available; /* WebKit-based browsers will ignore this. */
height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
height: fill-available;
Need to set the height:100% for .screen container.
sample code
Use min-height for IE to fill the available space
min-height: 100%; in IE
In my case, min-height did the trick
min-height: -moz-available;
min-height: -webkit-fill-available;
min-height: fill-available;
I am currently trying to render various circles on a page. I am currently drawing the circles using modified CSS from the following web page:
https://css-tricks.com/examples/ShapesOfCSS/
The CSS for circles in the link above draws the circles, but I am running into a couple of problems:
I need the circles to be spaced apart from one another (maybe 3px?)
I need the circles to be in the same horizontal line
I can't seem to do 1 and 2 at the same time
I am using the following HTML and CSS:
.circle-blue {
width: 10px;
height: 10px;
background: deepskyblue;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.circle-gray {
width: 10px;
height: 10px;
background: gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cell {
display: table-cell;
font-size: 6px;
}
<div class="circle-blue cell"></div>
<div class="circle-gray cell"></div>
<div class="circle-blue cell"></div>
My circle divs in my HTML implement the circle and the cell classes.
The Plunker link below will lead you to my example:
http://plnkr.co/edit/SPHmKyOjF6GbTtjEFPrd?p=preview
NOTE: The circles are small, so you have to look at the very top left corner of the Plunker preview mode to find them.
The issue is that you are setting the div to display: table-cell;. margin does not apply to elements when their display property is set to table-cell. http://www.w3.org/TR/CSS2/box.html#margin-properties states that margin:
Applies to: all elements except elements with table display types other than table-caption, table and inline-table
One way to get the desired result would be to remove display: table-cell; and add float: left; and margin-right: 3px; to the circles instead.
.circle-blue {
width: 10px;
height: 10px;
background: deepskyblue;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.circle-gray {
width: 10px;
height: 10px;
background: gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cell {
/*display:table-cell; Remove this*/
font-size: 6px;
float: left; /*Add this*/
margin-right: 3px; /*Add this*/
}
<div class="circle-blue cell"></div>
<div class="circle-gray cell"></div>
<div class="circle-blue cell"></div>
Use this
.cell{
margin-left: 5px;
display: inline-block;
font-size: 6px;
}
Instead of
.cell{
display: table-cell;
font-size: 6px;
}
when using table don't put content in them like images etc like that put a new div inside the cell specifically for content then use padding on your cell's to give spacing like below.
this way you get to keep cell's fluidity when doing responsive deign and it wont push down like float or inline-block would which I'm assuming you are doing since your using table for display.
.circle-blue {
width: 10px;
height: 10px;
background: deepskyblue;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.circle-gray {
width: 10px;
height: 10px;
background: gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cell {
display: table-cell;
font-size: 6px;
padding: 10px;
}
<div class="cell">
<div class="circle-blue"></div>
</div>
<div class="cell">
<div class="circle-gray"></div>
</div>
<div class="cell">
<div class="circle-blue"></div>
</div>
add this to the class 'cell'.
display: inline-block;
margin: 0 3px;
vertical-align: top;
plunker
I think if you change display: table-cell to inline-block, you will get your expected result. of course you need margin too.
Hope this help !
Would this be a viable solution?
https://hdcs.cz/?q=node/26
The code:
<style>
.circle-blue {
width: 10px;
height: 10px;
background: deepskyblue;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.circle-gray {
width: 10px;
height: 10px;
background: gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cell {
display: table-cell;
font-size: 6px;
}
</style>
<table>
<tr>
<td style="padding: 5px"><div class="circle-blue cell"></div></td>
<td style="padding: 5px"><div class="circle-gray cell"></div></td>
<td style="padding: 5px"><div class="circle-blue cell"></div></td>
</tr>
</table>
Regards,
Tomas Tudja
I want that every second line is grey. It works almost, but on the left and the right side, there are a few Pixels white.
Does anybody knows why?
HTML
<div class="recent">
<h1>Recent Downloads:</h1>
<div class="row">test</div>
<div class="row">test</div>
<div class="row">test</div>
<div class="row">test</div>
<div class="row">test</div>
</div>
CSS
.recent {
position: absolute;
bottom: 0;
right: 0;
height: 30%;
width: 35%;
background-color: white;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
border-style: solid;
border-color: white;
}
.recent h1 {
font-size: 16px;
font-weight: normal;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 20px;
}
.row {
background-color: white;
}
.row:nth-child(odd) {
background: #e0e0e0;
}
http://jsfiddle.net/C8drX/4/
You should remove borders from .recent:
.recent {
border: 0px;
}
and maybe add some padding to .row:
.row {
padding: 3px;
}
Here is a JSFiddle
The height of the .recent div is to small. The way I see it, you can do one of four things:
Remove the height property from .recent
increase the height property on .recent
remove a child div from the .recent-div
Like Wil93 sugested, you can remove borders from .recent and add padding to .row
Here is a fiddle where I just removed the height all together:
(/*height:30%;*/)
JSFiddle
It is because you have set
border-color: white;
in
.recent {
position: absolute;
bottom: 0;
right: 0;
height: 30%;
width: 35%;
background-color: white;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
border-style: solid;
border-color: white;
}
Check Fiddle you will understand
You can simply remove it using
border:none;
You should also use this, replacing the current css rules:
background-color: white;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
Your .recent div has a border from your user agent stylesheet because you're setting a border-style. Set it to 0 and use padding in your .row divs instead.
this is my first post here. I don't know how to explain my problem because I don't really know what is causing my CSS code to break. It would be easier to show you in a photo.
So I have a div tag and input and div child elements inslide. One of the div is static 32px x 32px and I am calculating its width with calc(100% - 32px), but when scaling some pixels aren't filled with the input.
Here's a photo of the problem: http://imgur.com/TkRFLde
This occurs when the zoom is not divisible by 100. For example it breaks on 110%, 150% and 175%. But it is right when the zoom is 100%, 200%, 300%...
Heres my code:
<div class="search">
<input type="text" value="Search" class="search-text" />
<div class="search-icon" ></div>
</div>
CSS:
.search {
height: 32px;
width: 250px;
}
.search-text{
float:left;
width: calc(100% - 55px) !important;
display: inline-block !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin: 0;width: 196px;
}
.search-icon{
display: inline-block !important;
background-color: #ACB6BE;
height: 30px;
width: 31px;
float:right;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
}
input[type=text] {
border-radius: 5px;
border: 1px solid #acb6be;
min-width: 180px;
color: #acb6be;
padding: 0 10px;
height: 30px;
background-color: #fff;
font-weight: 600;
}
Or jsfiddle: http://jsfiddle.net/39VDR/1/
The problem happens because when you zoom, your values will not be integer anymore. This means that rounding will take place and the outer container (.search) will be 1px larger than you would expect.
You can remove the float:right on the .search-icon and it will work ok.
You can see it here:
http://jsfiddle.net/39VDR/4/
.search-icon{
display: inline-block;
background-color: #ACB6BE;
height: 30px;
width: 31px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
font-size:12px;
vertical-align: top;
}
Still, as mentioned, you can remove the !important if you just add more specificity to your selectors.
when I zoom out on Google Chrome, my right div goes on the next line, I'm trying to figure out what it is that I'm doing wrong. Could it be a display inline block? I'm confused here, but look:
I don't have anything in latest new id
#latestnews {
}
My Left & Right columns
.left {
width: 70px;
float: left;
margin: 3px;
height: 60px;
padding-bottom: 5px;
border: 1px solid #C2C2C2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #E9E9E9;
}
.right{
float: left;
padding-left: 5px;
margin-left: 10px;
margin: 3px;
width: 491px;
height: 60px;
border: thin solid #CCC;
background: #E9E9E9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding-bottom: 5px;
}
What it shows:
<div class="left" style="clear:both;">
<div class="date">
<span class="day">17</span>
<span class="month">Feb</span>
<span class="year">2014</span>
</div>
</div><!-- End Left Column -->
<div class="right">right</div>
When I zoom out, it shows this:
but on normal view, it shows this:
is it possible that I didn't include anything in my container for #latestnews ? Thanks for all help!
My guess is that the float: left style on the div you are trying to put on the right, is why you are having that problem.
Why don't you try getting rid of both float: left styles, and replace them with display: inline-block.
Then your only problem should be zooming in.