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;
Related
I have a problem in IE and Edge when I use border-style: dashed; and border-radius: .375rem; on the same element:
div {
padding: 5rem;
margin: 1rem;
border: 1px dashed gray;
border-radius: .375rem;
}
The following is what I get (those weird things in the corners).
For the reason unknown to me I cannot reproduce this in jsfiddle or anywhere outside my document. Would be greatful for any advice on what this can be at all cause I am out of ideas (I am talking about those weird things in the corners).
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:
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!
in internet explorer 10 (mobile version), a selectbox () gets highlighted blue as soon as it gets focused, (it´s the blue of the whole Modern UI surface of the phone). the styles for the select tag:
border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 25px;
letter-spacing: -1px;
float: left;
font-weight: 400;
padding: 0 5px 0 5px;
-webkit-appearance: none;
-ms-user-select: none;
background-origin: content-box, content-box;
background-repeat: no-repeat, repeat;
background-size: 11px 6px, 1px 160px;
background-position: right center, 0 -1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMAQMAAACz9bS7AAAABlBMV…vQuZgJjsYojkBJQf75i4cGzcXt5HJQ/Djs7L5sApGeVNPJDzbGEbOb/85rAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAlgCAIAAADGR8ryAAACZ0lEQ…tDzV5P+JnOAzg9qR2Xlg+a8jAvtyK/P5fSI6Sf3c3NhwADAJ0Rj8qbukvYAAAAAElFTkSuQmCC);
border: 1px solid #CCCCCC;
I was hoping the "-ms-user-select: none" would fix it, but didnt.. Has anyone experience similar?
I've encountered a similar problem on WP7 an WP8, the solution is to move focus from select box to fake input on click event.
jQuery:
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
CSS:
.fakeInput {
display: block;
width:0;
height:0;
top: -999rem;
position: absolute;
}
Note: do not forget to add this code only for mobile device, on desktop browsers it will work not as expected.
IE has its own CSS pseudo-element to deal with this highlight.
CSS:
select::-ms-value{ background-color: transparent; color: black; }
You may read more about this on this page.
it´s interesting but since I add this line to my style sheet, it keeps highlighting blue, but doesn´t stay that way after you select something from the selectbox.
Thought I add it as an answer if somebody comes back with the issue.
:focus{outline: none;}
I'm looking at the buttons used on twitter's home page, specifically the big orange 'signup' button. I see it is defined like this:
<p id="signup-btn">
<a id="signup_submit" href="/signup">
<span>Sign Up</span>
</a>
</p>
are they just using css to give the orange button appearance (which may just be a jpg), and also using css to specify the roll-over appearance (another jpg), and finally a third state for mouse-click (another jpg) to give the impression of a real clickable button?
If that's how it works, what should I look for to do the same thing? In my case I just want to make a button I guess, like:
<div class='mybutton'>Hello!</div>
.mybutton {
bgcolor: red;
bgcolor-mouseover: yellow;
bgcolor-mousedown: green;
}
yeah something like that would be great,
Thanks
Look at their CSS:
background: #FA2 url(http://s.twimg.com/a/1275412898/images/fronts/bg-btn-signup.png) repeat-x 0px 0px;
border: 1px solid #FA2;
border-bottom-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #333;
display: block;
font: normal normal bold 18px/normal Arial, sans-serif;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-shadow: #FE6 0px 1px 0px;
Haven't looked at it specifically, but that is entirely possible with CSS; they probably have a named style using the #signup-btn designation in CSS. To find out, you can use IE or FireFox with FireBug to examine the CSS and see exactly what they do for the button style. I would highly recommend that.
HTH.
I'd use a BUTTON element and CSS sprites. That way, you can style it however you like, and don't have to screw around with click() events in JS. Just use it wherever you'd use a regular button in a form.
EDIT: Coronatus, you should probably read this: Rediscovering the Button Element. They're remarkably easy to make visually consistent across browsers using a little CSS.