<note>
Sorry to revive a thread that was last used in MArch, however most forums like you to re-use threads whose titles apply provided they are not ancient. If that is not the case here and a new topic is preferred, please tell me.
</end note>
I have looked at several round corner borders how-to's and have tried a few. The one that has brought me closest to a real rounded border is one named "Snazzy Borders" by Stu Nicholls at:
http://www.cssplay.co.uk/boxes/snazzy.html
The css and code are in his source file. I will post them here for reference:
styles to add (I put them in skin1.css)
Code:
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ffffff; border-left:1px solid #c0c0c0; border-right:1px solid #c0c0c0;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#ffffff; border:0 solid #08c; border-width:0 1px;}
The code to add the borders:
Code:
<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">
content here</p>
</div>
<b class="xbottom"><b class="xb4">[/b]<b class="xb3">[/b]<b class="xb2">[/b]<b class="xb1">[/b][/b]
</div>
I am trying to add borders only around specific menus (which means I can't just use the menu.tpl file). So am trying to put them around individual menus, plus items like the search box, specials, etc.
Regardless of what I've tried, the top looks fine, however the border on the bottom is awful. The left and right borders hang down longer than the corners. I have tried changing all the heights and margins in the css to no avail.
The search box has the problems with the side borders being longer than where the bottom corners and border are.
However the side menu boxes have that issue, plus the right margin being way out to the right. I have tried adding a specific size to every combination in the skin1.css, main.tpl, and search.tpl. Nothing will change it.
I took a print screen to show what I am talking about
:
http://www.dmozeditors.com/corners.jpg
the code I am using is:
Code:
<div id="xsnazzy" align="left" width="160">
<b class="xtop"><b class="xb1">[/b]<b class="xb2">[/b]<b class="xb3">[/b]<b class="xb4">[/b][/b]
<div class="xboxcontent">
{ include file="help.tpl" }
<b class="xbottom"><b class="xb4">[/b]<b class="xb3">[/b]<b class="xb2">[/b]<b class="xb1">[/b]
[/b]
</div></div>
I'm sorry for the length of the message, however I thought the more facts I include, the better someone may be able to see what I am doing wrong.
Any ideas?
Thank You,
Alex