How can you get CSS3 to also round the corners of an image?
It doesn't work on
http://mybbfaq.com
I have added in the appropriate coding for the Header and the Logo CSS areas.... but still nothing.
Any advice would be greatly appreciated
They don't round the image, just the CSS. :/
Because it's rounding the BG IMAGE.
You have to put a border. It's called border radius not corner radius.
NOTE: NOT GUARANTEED TO WORK. MAY NEED TO BE ADJUSTED.
I did this by referencing your HTML and CSS, so I haven't actually tried it out.
In style.css find this:
#header {
width: 100%;
}
And replace with this:
#header
{
width: 100%;
height: 91px;
background: #fffff url('http://mybbfaq.com/wp-content/themes/mybbfaq/images/header.jpg') no-repeat;
border: 0;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
}
Then remove this from the header:
<a href="http://mybbfaq.com"><img src="http://mybbfaq.com/wp-content/themes/mybbfaq/images/header.jpg" border="0" alt="MyBB FAQ Header" /></a>
So the only thing left is:
<div id="header"></div>
Again, can't guarantee this'll work so back up your CSS file and the header file before applying these changes.
If it doesn't work then it should, at least, get you pointed in the right direction.
Why are people so into css that's barely even supported?
It's just asking for trouble. Don't you want the same experience for members across all sorts of browsers?
(2010-08-11, 01:06 AM)Lyndon D. Wrote: [ -> ]You have to put a border. It's called border radius not corner radius.
That would explain it! I'll need to do that.
(2010-08-11, 01:32 AM)Ryan Ashbrook Wrote: [ -> ]NOTE: NOT GUARANTEED TO WORK. MAY NEED TO BE ADJUSTED.
I did this by referencing your HTML and CSS, so I haven't actually tried it out.
In style.css find this:
#header {
width: 100%;
}
And replace with this:
#header
{
width: 100%;
height: 91px;
background: #fffff url('http://mybbfaq.com/wp-content/themes/mybbfaq/images/header.jpg') no-repeat;
border: 0;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
}
Then remove this from the header:
<a href="http://mybbfaq.com"><img src="http://mybbfaq.com/wp-content/themes/mybbfaq/images/header.jpg" border="0" alt="MyBB FAQ Header" /></a>
So the only thing left is:
<div id="header"></div>
Again, can't guarantee this'll work so back up your CSS file and the header file before applying these changes.
If it doesn't work then it should, at least, get you pointed in the right direction.
That would work, but it wouldn't work effective because when people click on the header (which i do a lot), nothing will happen, but thanks for trying anyway
(2010-08-11, 02:42 AM)labrocca Wrote: [ -> ]Why are people so into css that's barely even supported?
It's just asking for trouble. Don't you want the same experience for members across all sorts of browsers?
Most of the my target users are using Chrome or Firefox. There are a lot of people using alternate browsers.
Add a transparent image over it? Only ie6 is bad then.
Really, the code I gave you will work, and it'll get rid of that design flaw. It's an unnecessary link anyway, considering you have the "Home" link right there which takes you to the same place.
Or you could do...
<div id="header" onclick="window.location = 'index.php';"></div>
Or you could do a Transparent GIF, like Mark.M suggested. Just make it 1x1 and use width and height to expand it. Even IE6 supports that.
Or you could actually open the image in Photoshop and give it rounded corners yourself.
(2010-08-11, 02:42 AM)labrocca Wrote: [ -> ]Why are people so into css that's barely even supported?
It's just asking for trouble. Don't you want the same experience for members across all sorts of browsers?
I wouldn't call CSS that's supported in all major browsers barely supported. Even IE9 will have CSS3.