On 11/28/06, Jon Hughes <[EMAIL PROTECTED]> wrote: > We are certainly getting closer! :) > > I am not sure what you mean by "jiggle the padding" but I don't swing > that way ;) > What I meant was to remove all margins from the LI so they fill the space in-between the top and bottom curves and can each hold a bit of (fake?) border. Obviously you'll have to make some padding adjustments to keep the layout looking the same. Might cause a problem with the dotted margins (but since they're links, the a elements could hold them instead). Welcome to the wonderful world of standards-based layout!
> http://www.phazm.net/newphazm/index-abs.html > > IE: Looks like the borders are shifting down, bringing the background > with it. Something, probably an IE bug, is causing the UL, but not its contents and background(!), to drop down. Anyone know what this is? I've given up thinking I've seen every IE6 bug. I notice the UL doesn't have "layout" - an IE-only phenomenon, the lack or presence of which sometimes causes problems. To switch it on, apply zoom:1 to the UL. Might fix it. > > FF: SO close! But it's got little dingle berries hanging off the > sides. > Another solution to this would be to add a non-semantic div underneath the ul in the markup and apply the background to that. Have fun! Chris > - 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" > > > -- 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/
