We are certainly getting closer! :) I am not sure what you mean by "jiggle the padding" but I don't swing that way ;)
http://www.phazm.net/newphazm/index-abs.html IE: Looks like the borders are shifting down, bringing the background with it. FF: SO close! But it's got little dingle berries hanging off the sides. - Jon -----Original Message----- From: Chris Ovenden [mailto:[EMAIL PROTECTED] Sent: Tuesday, November 28, 2006 4:28 AM To: Jon Hughes Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Still having some trouble with my rounded corners... Oops - The upper element - ie the UL - should (obviously) be the one with the transparent background. Sorry about that. That border is annoying, isn't it? You might need to add a non-semantic element to hold the bottom curve so that the border on the UL (sides only) doesn't overlap it; or you could perhaps jiggle the padding on the li so that the left hand ones each contribute a bit of the left border, and the right ones likewise with the right border. Also the .inround DIV is too wide currently. I made a few changes to these parts of the CSS which gets us a bit nearer: #bottomlinks ul { overflow:hidden; /*width: 520px;*/ background-color:#303b3c; margin:0 0 12px 0; padding:7px; /*border:5px solid #242c2d;*/ } ... .inround { background:url(http://www.phazm.net/newphazm/Growth/images/in_top.gif) top left no-repeat #303B3C; width:544px; padding:20px 0 0 } .inround ul { background:url(http://www.phazm.net/newphazm/Growth/images/in_bottom.gif ) -5px 100% no-repeat transparent; margin:0; padding:0 0 20px; border-left:5px solid #242c2d; border-right:5px solid #242c2d } Good luck! Chris On 11/28/06, Jon Hughes <[EMAIL PROTECTED]> wrote: > I'm not sure what I'm doing wrong, but this is not right :) > http://www.phazm.net/newphazm/index-abs.html > > The top one isn't even showing up, and the bottom one isn't where it is > supposed to be. > > Any idea why? > > -----Original Message----- > From: Chris Ovenden [mailto:[EMAIL PROTECTED] > Sent: Monday, November 27, 2006 6:03 AM > To: Jon Hughes > Cc: css-d@lists.css-discuss.org > Subject: Re: [css-d] Still having some trouble with my rounded > corners... > > Since your page is fixed-width, you already have two nested block > level elements - div and ul - filling the rounded corners area, and a > plain background, it should be fairly easy. I'd use two images only: > one for the top left and right corners, the other for the bottom two. > They will need to be fully opaque for this to work. Put the top image > on the DIV like this: > > .inround { background:url(topimage.gif) top left no-repeat transparent } > > and the bottom one on the UL like this: > > .inround ul { background:url(bottomimage.gif) bottom left no-repeat > #303B3C } > > Don't add any padding to the div, but pad the ul however you like. > > Hope this helps, > > Chris > > On 11/27/06, Jon Hughes <[EMAIL PROTECTED]> wrote: > > http://www.phazm.net/newphazm/index-abs.html > > > > At the bottom, with the list, I want to have a rounded border, like: > > http://www.phazm.net/newphazm/index.gif > > > > I should already have the neccisary hooks while maintaining structural > > markup. > > > > <div class="inround"> > > <ul> > > <li class="first"><a href="#">Search Engine Optimization</a></li> > > <li><a href="#">CSS</a></li> > > ... > > <li><a href="#">Dreamweaver</a></li> > > <li class="last"><a href="#">Hosting</a></li> > > </ul> > > </div> > > > > If you need it, the whole thing is enclosed in this: > > > > <div id="bottomlinks"> > > ... > > </div> > > > > I have the necessary images (I think all that are needed) uploaded > > already: > > > > http://www.phazm.net/newphazm/Growth/images/in_br.gif > > http://www.phazm.net/newphazm/Growth/images/in_bl.gif > > http://www.phazm.net/newphazm/Growth/images/in_tr.gif > > http://www.phazm.net/newphazm/Growth/images/in_tl.gif > > > > Can someone guide me through the positioning and css needed for this? > I > > have been trying unsuccessfully for 4 days now, and haven't gotten > > anywhere. > > > > -- > Chris Ovenden > > http://thepeer.blogspot.com > "Imagine all the people / Sharing all the world" > > > -- Chris Ovenden http://thepeer.blogspot.com "Imagine all the people / Sharing all the world" ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
