That is probably a float or clear being (or not being) applied somewhere. If you have floated elements inside a non-floated block margins don't work.
Why don't you try one of the existent 'rounded corners' implementations? I haven't had much success with them, but who knows :) http://www.html.it/articoli/nifty/index.html http://www.curvycorners.net/ http://www.editsite.net/blog/rounded_corners.html http://www.phatfusion.net/roundedcorners/ - Ricardo On Sep 29, 7:45 am, thelemondropkid <[EMAIL PROTECTED]> wrote: > Thanks for the reply. > > What I would like to do is to reduce the page´s mark-up in general > because there are going to be more-or-less 7-8 of these boxes on the > home page (excluding the other content. These boxes have rounded > corners, hence the empty tr, tl, bl, br divs. What I would like to do > is to just add <div class="box"> and it´s content and have jQuery take > care of inserting the necessary mark-up to complete the box. I know it > seems silly but I want to keep the code as clean as possible without > repeating the same thing over and over in the mark-up. > > Like this: > > <div class="box"> > <h3>Some header</h3> > <img name="Image" src="photo.jpg" width="268" height="122" > alt="" / > <p>Lorem ipsum dolor sit amet.</p> > </div> > > As apposed to this: > > <div class="box-two"> > <div class="inside"> > <h3>Some header</h3> > <img name="Image" src="photo.jpg" width="268" height="122" > alt="" / > <p>Lorem ipsum dolor sit amet.</p> > </div> > <div class="tl"></div> > <div class="tr"></div> > <div class="bl"></div> > <div class="br"></div> > </div> > > As you can see, it is less cluttered. > > I have managed to get jQuery to apply the mark-up to all the divs with > class of "box" by swapping the order of the code from this: > > $(document).ready(function(){ > $("div.box").each(function() { > $("div.box> *").wrapAll('<div class="inside"></div>'); > $("div.box").append('<div class="tl"></div>'+'<div > class="tr"></div>'+'<div class="bl"></div>'+'<div class="br"></div>'); > }); > > }); > > to this: > > $(document).ready(function(){ > $("div.box").each(function() { > $("div.box").append('<div class="tl"></div>'+'<div > class="tr"></div>'+'<div class="bl"></div>'+'<div class="br"></div>'); > $("div.box> *").wrapAll('<div class="inside"></div>'); > }); > > }); > > For some reason when the wrap function is placed after the append > function it works. > > The only problem I have now is that the css does not hook into the > mark-up properly. Now when I have a 2nd instance of "box" directly > after the other, they overlap each other slightly ignoring the bottom- > margin of 1em of "box". If I remove the jQuery from the page and place > the mark-up into the page itself, the css is properly applied and > works the way it should. Very odd! > > On Sep 27, 4:20 pm, Jonathan <[EMAIL PROTECTED]> wrote: > > > If you used each then it should repeat for each DIV with the class of > > box on the page. > > > $(document).ready(function(){ > > $("div.box").each(function() { > > $("div.box> *").wrapAll('<div class="inside"></div>'); > > $("div.box").append('<div class="tl"></div>'+'<div > > class="tr"></div>'+'<div class="bl"></div>'+'<div class="br"></ > > div>'); > > }); > > > }); > > > What exactly are you trying to achieve though? Couldn't you just have > > all the DIVs laid out already and then style them with CSS to make > > them look the same? > > > On Sep 26, 2:17 pm,thelemondropkid<[EMAIL PROTECTED]> wrote: > > > > Thanks to the help I have received on this group, I am making > > > progress. > > > But now that all is working fine, the question beckons: Can jQuery do > > > it all over again? > > > > This is my code: > > > > <div class="box"> > > > <h3>some header</h3> > > > <img name="Image" src="photo.jpg" width="268" height="122" alt="" / > > > > <p>Lorem ipsum dolor sit amet.</p> > > > </div> > > > > And the jQuery: > > > > $(document).ready(function(){ > > > $("div.box> *").wrapAll('<div class="inside"></div>'); > > > $("div.box").append('<div class="tl"></div>'+'<div class="tr"></ > > > div>'+'<div class="bl"></div>'+'<div class="br"></div>'); > > > > }); > > > > The problem: > > > > I would have thought that jQuery would repeat the above process if I > > > created another div with a class of "box" below the previous one. I > > > was wrong! > > > > Is there a way to do that because I would like to create various boxes > > > with a class of "box" and have them all look the same. > > > > Thanks folks
