Never come across this issue before, and I cant see any other references to it. Basically, I have a website with rounded corners on the top and bottom containers. Now, these were working perfectly but have suddenly stopped since I started having issues with IMG DECODING FAILED. I've since resolved these (I think) but now, my rounded corners aren't working properly on the bottom of the container.
My CSS is as follows:
.sub_footer {
background: url(/uploads/images/blue_footer_bg.jpg)repeat-x;
color: #fff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
text-shadow: 0px 1px 10px rgba(1, 1, 1, 1);
overflow: hidden;
}
I've used the css to make the rounded corner rather than images as I feel its a more dynamic technique.
This css is identical to the top container (except its top right and top left corners that are being rounded).
You can view the website here if you want to see it in action: http://1074796728.1071867011.temp.prositehosting.co.uk/ (this site wont let me post images)
The bottom corners are slightly rounded but to a different degree than the top, eventhough both declarations are for 15px.
Can someone help?
Hi now remove padded class you define in your sub_footer child and now
define your .sub_footer height: 30px; padding-top: 15px;
as like this
.sub_footer
{height: 30px;
padding-top: 15px;
}
Than Result is this
There is nothing wrong with the CSS You shold change the height of the Footer Div See
Thanks
Udit Bhardwaj
Try changing this one:
.sub_footer {
background: url(/uploads/images/blue_footer_bg.jpg)repeat-x;
color: #fff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
text-shadow: 0px 1px 10px rgba(1, 1, 1, 1);
overflow: hidden;
}
To this one:
.sub_footer {
background: url(/uploads/images/blue_footer_bg.jpg)repeat;
color: #fff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
text-shadow: 0px 1px 10px rgba(1, 1, 1, 1);
overflow: hidden;
}
Simpler solution is to
Just add padding:15px; to class col12 under sub_footer class
.sub_footer .col12{
padding:15px;
}
put webkit's on your border radius statements.
-webkit-border-radius:
-moz-border-radius:
Related
When I use the border-radius property on modal divs (divs that pop up over my normal content), the four corners do not all round themselves. One or two corners will round, but not all four.
Here is a link to the image, I can't yet post images on Stack Overflow (Note the top left corner in the image) https://raw.githubusercontent.com/Randall-Coding/misc/master/border_round_err.png
I have tried using all the different cross-browser attributes for border rounding
-moz-border-radius: 20px; /* Also tried 20px 20px */
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
Here is my CSS code using the mixin (note it looks the same with or without the mixin).
div.contact_window{
background-color: white;
/*border-radius: 20px 20px; */ /*other way I have tried it */
-moz-border-radius: 20px; /* Also tried 20px 20px */
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border: 3px solid black;
position:absolute;
width: 60%;
min-width:700px;
max-width:800px;
height: 520px;
overflow:scroll;
left:20%;
top: 130px;
z-index:10;
display: none;
display: block; /*DEBUG */
}
div.mask{
background-color: black;
opacity: 0.6;
position:fixed;
height:100%;
width: 100%;
z-index: 1;
top: 0px;
left: 0px;
display:none;
display:block; /*DEBUG */
}
And HTML code is as follows
<div class="contact_window" id='#contact_window'>
<%= render 'contact' %>
</div> <!-- end div.contact_form -->
<div class="mask">
I am rounding the corners of my other divs without any issue.
So I'm wondering if anyone has encountered this issue and/or has some idea what is going on here?
*I'm using Firefox, but this also holds true on my Chromium browser. My operating system is Ubuntu Linux 18.04.
*Here are the links to the SCSS and HTML files.
HTML https://github.com/Randall-Coding/misc/raw/master/index.html
CSS (SCSS) https://github.com/Randall-Coding/misc/raw/master/main.scss
edit* When I inspect the element it still shows border-radius:20px
Have you tried to achieve the rounding without the mixin by simply passing the border radius directly?
Unless you intend on changing the radius of each corner individually, it's probably best that you just pass one value to border-radius that will be applied to each corner. This can be done by doing:
border-radius: 20px;
instead of:
border-radius: 20px 20px;
Try this as your mixin instead (clearer naming):
#mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
and pass one value
#include border-radius(20px);
Ok I broke this down attribute by attribute and it turns out the issue is with the setting
overflow:scroll
Which forces the window to have sharp corners where the scrollbars would be located be.
So the answer is to remove overflow:scroll from the CSS
Try border-radius in % like
border-radius:100%;
As shown above, can I give a radius to the top parts only and not to bottom or sometimes to bottom not to top?
And is there any idea to give border radius to one corner only?
Like border-radius:top-left top-right bottom-right bottom-left,
div{
width: 100px;
height: 30px;
background: black;
border-radius: 8px 8px 0 0
}
DEMO
Either use border-radius, such as:
border-radius: 5px 5px 5px 5px;
Or, for the top left border, you can be more specific with:
border-top-left-radius: 5px;
Here's the CSS for the rounded corners only on a div with a class of box:
.box {
border-radius: 5px 5px 0px 0px;
}
You may also find this helpful: http://css3generator.com/
Edit: Apparently you don't need the webkit prefix anymore!
I'm trying to move the "likes" gray bar right above the signature, to the left of the "like" link found on top right w/ tiny icon.
Example:
http://www.talkjesus.com/bible-study-hall/44722-antimonianism.html#post220422
The css code now
.vbseo_buttons .vbseo_liked {
background: rgba(46, 53, 57, .8);
color: #fff;
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear: both;
display: block;
padding: 12px;
margin: 5px 30px;
<vb:if condition="$stylevar['textdirection'] == 'rtl'">
background-position: right;
</vb:if>
}
If I change display: block to display: inline, it'll move it to the same row, like this:
http://i49.tinypic.com/348lonc.png
However, it loses the margin property and width property. I tried fixing the width by adding width: 50%; but that changed nothing. How can I keep it inline while fixing margin and width?
Do you mean your want the gray bar at the far top right where it shows the quantity of likes the thread has with the heart? To keep the margin you should just float the gray box
Floated left
.vbseo_buttons .vbseo_liked {
background: rgba(46,53,57,.8);
color: #fff;
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear: both;
padding: 12px;
margin: 5px 30px;
float: left;
}
To move this all the way to the top right you would need to modify the template and it would end up looking something like this but you need to move the entire after_content div or restyle it as needed if only moving the vbseo_liked container. And also remove the clear:both style.
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
I have a div with rounded corners at the bottom and normal corners at the top. This div also has a border along the top. However this border seems to 'seep through' down to the rounded corners at the bottom. This issue is only present in Safari (I'm using 5.1.3) and not Chrome or Firefox.
The CSS related to this bug is:
.info {
float: left;
width: 272px;
height: 200px;
background: #222222;
border-top: 5px solid #6fcbe4;
-webkit-border-bottom-right-radius: 18px;
-webkit-border-bottom-left-radius: 18px;
-moz-border-radius-bottomright: 18px;
-moz-border-radius-bottomleft: 18px;
border-bottom-right-radius: 18px;
border-bottom-left-radius: 18px;
padding: 0 14px 0 14px;
}
And the html is:
<div class="info left">
<h3>new<span class="pink">server</span></h3>
</div>
And this results in the image seen below:
Where as you can see the bottom corners have a blue edge to them.
Does anyone know a work around to this or is it a mistake I'm making?
Thanks.
It's a bug, but you can prevent it by adding a bottom-border:
border-bottom: 1px solid #222;
I think this is a bug in Safari. I noticed a similar effect in a slightly order version of Chrome, which suggests this is a Webkit bug that Google has fixed but has not yet been implemented in Apple's version.
Have you tried defining the border for bottom, left, and right?
border-left: solid 0px none;
border-right: solid 0px none;
border-bottom: solid 0px none;