Hello I am trying to get a rounded corner around #mainWrapper, have been working on it all day being very unsucessful, I would prefer it to be css but if there is a easier way I will do it images, but not sure how to divide the images top/header middle and then the footer, not sure were to place the div id if that what you would do, recommendations? I have tried nifty template, not what I am looking for to much I would have to alter.
Results 1 to 4 of 4
-
3 Jul 2009, 03:11 AM #1
Totally Zenned
- Join Date
- Feb 2008
- Posts
- 569
- Plugin Contributions
- 0
Rounded Corner Border mainWrapper
-
3 Jul 2009, 10:23 PM #2
Deceased
- Join Date
- Nov 2005
- Location
- Colorado Springs, CO USA
- Posts
- 7,033
- Plugin Contributions
- 31
Re: Rounded Corner Border mainWrapper
You could add the following to your #mainWrapper declaration:
Originally Posted by ryanb4614
border:2px solid #DEDFDF;
border-width: 2px 2px 0 2px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius:10px;
border-top-left-radius:10px;
This will provide rounded corners in FF Safari and Chrome; but will render as square cornered in IE7/8 and Opera.
-
4 Jul 2009, 12:01 AM #3
Totally Zenned
- Join Date
- Jan 2009
- Posts
- 2,123
- Plugin Contributions
- 0
Re: Rounded Corner Border mainWrapper
Yes, Dr. Byte's code works like a dream in Mozilla based browsers, but in IE it's not so easy....
Try messing with this html though, it's quite good:
PHP Code:<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<style>
v\:* { behavior: url(#default#VML); }
</style>
<!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
<link rel="File-List" href="new_page_1_files/filelist.xml">
</head>
<body>
<p><!--[if gte vml 1]><v:roundrect id="_x0000_s1025"
alt="" style='position:absolute;left:75pt;top:112.5pt;width:561pt;height:712.5pt;
z-index:0' arcsize="13107f" fillcolor="#fcfcfc" strokeweight="2.46856mm">
<v:shadow on="t" color="#b3b3b3" offset="3.75pt,3.75pt"/>
</v:roundrect><![endif]--><![if !vml]><span style='mso-ignore:vglayout;
position:absolute;z-index:0;left:95px;top:145px;width:763px;height:965px'><img
width=763 height=965 src="new_page_18_files/image001.gif" v:shapes="_x0000_s1025"></span><![endif]></p>
</body>
</html>
-
4 Jul 2009, 01:43 AM #4
Totally Zenned
- Join Date
- Jul 2006
- Location
- SF Bay Area
- Posts
- 867
- Plugin Contributions
- 1
Re: Rounded Corner Border mainWrapper
In this post:
http://www.zen-cart.com/forum/showthread.php?t=131285
There is an example of doing it with graphics (works with all browsers) and a links to example and example files to get effect.
Similar Threads
-
Rounded MainWrapper in stylesheet
By honrheart in forum Templates, Stylesheets, Page LayoutReplies: 3Last Post: 9 Oct 2011, 07:59 PM -
Rounded Corner Borders
By BeautyHealth.com.cy in forum Templates, Stylesheets, Page LayoutReplies: 2Last Post: 4 Nov 2010, 02:13 PM -
How to make box header rounded corner
By rockwellhuang in forum Templates, Stylesheets, Page LayoutReplies: 2Last Post: 5 Aug 2008, 07:51 AM -
Rounded corner sidebox issue
By davidc304 in forum Templates, Stylesheets, Page LayoutReplies: 11Last Post: 12 Jan 2008, 03:11 AM -
rounded corner borders for sideboxes
By sparkyclark in forum Templates, Stylesheets, Page LayoutReplies: 2Last Post: 19 Jul 2006, 04:41 AM
