How to get perfect border radius on images in all browsers? - css

Currently I'm getting like this in Chrome, Safari, Mobile Safari and Opera. edges are rough.
img {border-radius: 10px; border:3px solid red}
See this example in Google Chrome or Opera or iPad http://jsfiddle.net/4PLUG/2/show/
Borders are fine in Firefox.
and in IE9 border edges are fine but it has a different problem. it shows some space between border and images
How to get the result like Firefox in all other browser?

You can give extra div to your img tag like this:
body {padding:100px}
img {
vertical-align:bottom;
position:relative;
z-index:-1;
}
div{
overflow:hidden;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:3px solid red;
display:inline-block;
}
http://jsfiddle.net/4PLUG/4/

/* just make sure you're including border radius for all browsers rendering engines */
.img-border{
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border:3px solid red;
}

all browsers have different CSS capabilities, and handle them differently.
if you want the corners to look exactly the same in all browsers, you'll just have to put the curves in the actual image, and not rely on CSS.
An alternative is to use a background image on a div instead, which may get better clipping.

You might want to try wrapping the images in a block element and floating 4 divs in all four corners with border images as a background. Make sure the image itself has an border as well, this makes using radius borders in images quite a lot easier if you have more than one size of images that needs 'm.

I've done this effect with two divs using z-index.
<div class="picture-wrapper">
<div class="mask">
</div><!-- end mask -->
<div class="picture">
<img src="" />
</div><!-- end picture -->
</div><!-- end picture-wrapper -->
Set your background image on mask to the red borders with the middle cut out (png), then use z-index to stack it above the picture div.
Should work cross browser, the only thing is it doesn't account for dynamic widths/height in the images, it assumes all images are the same. AND you're doing a request for that extra mask image.
Up to you.

for img tags , percent border radius work perfectly:
.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>

link the image in the body:
<img src="image.jpg">
add your sizing to the image:
<img src="image.jpg" width="100%" height="30%">
Then add in the inline CSS.
<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">
By adding in the inline CSS, the border and border radius will take effect on the image. Just dont style this particular image in the stylesheet because specificity may mess with the inline CSS.

Related

Having an issue with a repeating bg image

I am trying to have a header image with a border at the top of my page above my content area but for some reason my bg image is repeating. Do you know what is causing the image to repeat? Any help is greatly appreciated!
Here is my code:
<div class="container_12">
<div class="subheader">
<img src="images/subheader_1.png" alt="Subheader" width="940px" height="240px" />
</div>
</div>
here is my CSS:
.subheader{background:url(../images/subheader_1.png);background-repeat:no-repeat; min-height:300px; width:940px}
.subheader img {border:1px solid #ccc;padding:5px;background:#efefef}
You've only specified the background attribute in your css. This is a global attribute expecting all settings defined there. To couple the background-repeat with an image you have to use background-image:
Edit:
Based on your edit and posted screen shot, it looks like you don't have a repeating image so much as you've included the image in both the background AND an image tag. You should pick one or the other, but to get it to line up right, you need to remove the padding and margin:
.subheader img {
border:1px solid #ccc;
padding:5px; <--- TAKE THIS OUT
margin: 0px; <--- ADD THIS
background:#efefef
}

IE and Chrome calculating CSS padding differently

I have the following CSS and HTML:
.TestPadding{
width:29px;
text-align:center;
height:18px;
padding:3px 0px 2px 0px;
margin:2px 1px;
font-family:Trebuchet MS;
font-weight:bold;
font-size:13px;
border:2px solid black;
float:left;}
<div class="TestPadding">1</div>
<div class="TestPadding">2</div>
<div class="TestPadding">3</div>
<div class="TestPadding">4</div>
<div class="TestPadding">5</div>
<div class="TestPadding">6</div>
<div class="TestPadding">7</div>
<div class="TestPadding">8</div>
<div class="TestPadding">9</div>
<div class="TestPadding">10</div>
The problem is that the rendering is different in IE and Chrome. Here's what it looks like:
Chrome is on top and IE on the bottom. On IE, the numbers don't look vertically aligned. I tried making all sorts of combinations on the CSS but none have given me a consistent vertical alignment and sizing.
If you want to try it out, there's a **fiddle here.**
Thanks.
Try using line-height:18px; and no vertical padding (padding:0 2px;).
You could always use a little IE hack:
_padding-top:4px (for example)
If you do choose to go down the IE hack root, here's how to apply to the different versions of IE:
padding-top:4px\9; - IE8 and below
*padding-top:4px; - IE7 and below
_padding-top:4px; - IE6
Al
Do not use padding but use line-height (preferable use the unit em) on the divs.
By the way, I suggest that you even don't use divs but a list (ul width lis).
They are correctly middle-aligned in IE. Try adding a q in one of the boxes, and you'll see exactly what I mean.
You can "fix" this and get Chrome's look by adding: line-height: 18px;.
It's because Chrome and IE have different values for default line-height.
Set the line-height to 19px and it should vertically align in both browsers

Why there is a padding between image and border at the bottom?

I have an image inside a div, and I'm setting 1 pixel border to the div but there is a padding at the bottom between the border and the image. Can anyone please explain why?
Here is my html code:
<div id="border"><img src="example.png" /></div>
Here is my css:
#border {
border: 1px solid #000;
float: left;
}
use vertical-align:top for image
Browsers apply their default styles unless specified by your css, try explicitly setting padding in your css.
Firebug has a useful feature to let you see which styles have been applied to the elements on a page.
Hope this helps
Make sure the image has both padding and margin set to 0, e.g.:
img{padding:0;margin:0}
Or, to change just that image, apply a class to that particular image and set the style for that class, e.g.
<img class="foo">
.foo {padding:0;margin:0}
You are double closing your img tag:
You have
<div id="border"><img src="example.png" /></img></div>
Should be:
<div id="border"><img src="example.png" /></div>

Different Links CSS Hover change a picture

I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.

issue with a background image in IE8

I've tried various fixes but I'm still unable to solve this rather irritating issue in IE8. I have a container Div containing two child Divs, one floated left and the other floated right. There is a background image applied to the container DIV and this renders as it should in ie6 and ie7, however in ie8 it just will not appear. I think the issue is that the top padding applied to both child elements is not being respected/applied by ie8, and since the background image has a height of only 11px, the two child elements are sitting flush up against the parent DIV and therefore the background image is not displaying.
Here's my code and CSS:
<div id="bottom">
<div class="moduletable_footermenu">
<ul class="menu"><li class="item56"><span>Class Schedule</span></li><li class="item57"><span>Testimonials</span></li><li class="item58"><span>Contact</span></li><li id="current" class="active item59"><span>Sitemap</span></li></ul> </div>
<div class="moduletable">
Copyright © -2010 sitename </div>
</div><!--end of bottom -->
CSS:
div#bottom {
clear:both;
width:1014px;
margin:0px auto;
background:url(../images/footer-shadow.gif) top no-repeat;
}
div#bottom div.moduletable {
width:400px;
float:left;
font-size:0.9em;
color:#ccc;
padding:15px 0px 15px 0px;
}
div .moduletable_footermenu{
float:right;
padding:15px 30px 15px 0px;
}
It must be something specific to IE8 and probably something quite small causing the issue here - can anyone please spot the problem ? I just can't seem to solve it no matter what I try.
Grateful for any help.
Thanks in advance.
Have you tried Firefox and Chrome/Safari? Did you use standard DOCTYPE? They should behave the same way as IE8 did.
In standard CSS, container's height will not be adjusted to the height of the floated boxes; I will expect IE8 to not showing the container (height=0px) being the fact it's a more standard-compatible browser.
If you are looking for effects in IE6/7 in a standard-compatible browser, search for 'clearfix' solutions.

Resources