Mobile Friendly Website

CSSPLAY

Doing it with style

Snazzy borders COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Justin Adie:-
Hi Stu,
I'm having trouble getting the curved borders to work with IE7 and nested floats.
it works if i include a "spacer" div with clear:both.
it works if I include a height in the div containing the floats (even a percentage height),
but it does not work if I use the :after solution, which is by far the most elegant.
example can be seen at www.caeltgallery.no3.co.uk/Untitled-1.html

i'd be very grateful for your guidance on what i'm doing wrong!!

thanks
Justin
(04.08.2006, 10:59)

Justin Adie:-
Please ignore my earlier post. i was young and confused in my earlier post and had forgotten that IE of course does not acknowledge the pseudo class.
(04.08.2006, 21:57)

Nora:-
Stu - or anyone,

I've posted on the main board before, thanks so much for your help there.

I'm trying to recreate your snazzy border here but having trouble because my border is dashed. This, of course, causes problems because of the way the top and bottom border are displayed (as a background).

Could you please help me out with that? Thanks a lot.
(22.08.2006, 16:03)

Nora:-
Never mind - I figured it out. Thanks for the technique, though, Stu!
(23.08.2006, 14:45)

Fahed:-
Hey Stu,

I searched all over to find a solution which allows for a curved *border* as opposed to (or in addition to) a cruved *corner* and your's does the trick very well in both instances.

One question... how would one go about making the entire border thicker (e.g. 2px)?

One suggestion... it took me a really long time to get the technique into my thick/overworked skull. Maybe it might be worth adding some kind of imagery to the explanation for a fast and appreciative understanding of how it works.
(21.09.2006, 13:46)

Spectre:-
Sorry if I'm missing something, but if you set the background color in .xsnazzy to something other than transparent, you will see this color bleed over the rounded corners...
(27.09.2006, 20:09)

Stu:-
Spectre, .xsnazzy is just the containing div that holds it all together. This should be set to transparent so that any 'outside' color occupies the outside of the rounded corners.
The background color of the rounded corner box is set using the .xboxcontent and the .xb1 to .xb4
(27.09.2006, 20:35)

khangtoh:-
Stu,

I'm getting a transparent line when I use <ul><li> in the content box. Any idea how to resolve this?

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent" id="errorExplanation"><h2>2 errors prohibited this user from being saved</h2><p>There were problems with the following fields:</p><ul><li>Password is too short (minimum is 5 characters)</li><li>Password can't be blank</li></ul></div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
(13.10.2006, 07:07)

Stu:-
khangtoh, any gaps are normally due to default paddings of margins or the enclosed elements.
Try setting the style od the <ul> to padding-top:0; padding-bottom:0; margin-top:0; margin:bottom:0;}
(13.10.2006, 08:31)

Khang Toh:-
Hi stu
I would appreciate if you can try this out.. Many thanks!

.xboxcontent ul li {padding: 0}

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent" id="errorExplanation"><ul><li>Password is too short (minimum is 5 characters)</li><li>Password can't be blank</li></ul></div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
(14.10.2006, 19:48)

10 of 76 comments (part 3). [ « ] [ » ] [ * ]



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page