PDA

View Full Version : Rounded Corners



Mr Creeky
Jan 15th, 2009, 07:41 PM
Here is what I have made that works fine in IE7-8 and FF3 but goes all wrong in IE6<


.pagewrap {
width:960px;
}

.pagecenter {
background-color:#fff;
padding-left:10px;
padding-right:10px;
}

.topleft {
background-image:url(../images/css/topleft.gif);
background-repeat:no-repeat;
height:15px;
width:15px;
margin:0px;
}

.topright {
background-image:url(../images/css/topright.gif);
background-repeat:no-repeat;
height:15px;
width:945px;
margin-top:-15px;
margin-left:15px;
}

.bottomleft {
background-image:url(../images/css/bottomleft.gif);
background-repeat:no-repeat;
height:15px;
width:15px;
margin:0px;
}

.bottomright {
background-image:url(../images/css/bottomright.gif);
background-repeat:no-repeat;
height:15px;
width:945px;
margin-top:-15px;
margin-left:15px;
}

<div class="pagewrap">
<div class="topleft"></div>
<div class="topright"></div>
<div class="pagecenter">
Hello World
</div>
<div class="bottomleft"></div>
<div class="bottomright"></div>
</div>

I've used a lot of div's to achieve this result and it's not very browser happy. Anyone else got a better way of doing it?

Live demo: http://www.creekytowers.com/creeky/

Common
Jan 15th, 2009, 07:44 PM
Ok... I responded to your message and then released how ridiculous my response was having reread your code... so just ignore me. =)

Excavator
Jan 15th, 2009, 07:53 PM
Hello Mr Creeky,
See if doing it like this works better - demo (http://nopeople.com/CSS/rounded%20corners/index.html)

View Source to see the code, specifically the two orange boxes.



p.s. Please use code tags when posting code.

Mr Creeky
Jan 15th, 2009, 08:27 PM
Hi Excavator,

Thanks for that, the only problem with that solution is when using corners with transparent backgrounds like I'm doing, you can see the base colour behind the corner images and not the transparency like you should do. Unless (witch is very likely) I got the code wrong.

Live demo: http://www.creekytowers.com/creeky/test.html

Mr Creeky
Jan 16th, 2009, 12:25 AM
SORTED!!!

I found this: http://www.curvycorners.net/

Works a treat, and to make life even more simple there is a plug-in for Dreamweaver!

bazz
Jan 16th, 2009, 12:32 AM
just so you know, if it relies on JS, it won't work if people have JS disabled.

bazz