Re: [css-d] Still having some trouble with my rounded corners...
Chris Ovenden wrote: 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 [...] 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? [...] 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 Hi folks, Nice playing, isn't it? ;-) I did also a bit playing with margins, paddings, non-semantic div's and an unwilling IE, and: * voilà testpage http://home.tiscali.nl/developerscorner/css-discuss/test-phazm-corners-1.html Tested in FF1.07, Opera8.01 and IE6 under Win98SE. Testing results: positive. :-) No idea what IE7 is doing with it. [1] Anyway, the * html's can be put in a proper cond.comment for IE. Some normal comments are in the source code, some links to background info in the pages. Cheers, francky [1] Browsershots are dripping in: * http://browsershots.org/website/http://home.tiscali.nl/developerscorner/css-discuss/test-phazm-corners-1.html Saphari on Mc seems no problem, Linux browsers are coming (not yet arrived at this moment), the IE-testing options weren't aboard at this moment. __ 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/
Re: [css-d] Still having some trouble with my rounded corners...
Chris Ovenden wrote: On 11/28/06, Jon Hughes [EMAIL PROTECTED] wrote: We are certainly getting closer! :) [...] Francky wrote: [...] Testpage http://home.tiscali.nl/developerscorner/css-discuss/test-phazm-corners-1.html No idea what IE7 is doing with it. David Laakso send me a: * screenshot IE7 on XP http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-phazm-IE7onXP.gif Thnx David! And, this time, thnx IE! ;-) francky __ 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/
Re: [css-d] Still having some trouble with my rounded corners...
[EMAIL PROTECTED] wrote: Guru to the rescue! :) You are great! Thank you! BUT! Is there ANY way you can get the same result without the empty divs?: div class=topcorners/div div class=gap-saver/div div class=floatclearer/div div class=gap-saver id=help-ie/div div class=bottomcorners/div I would much rather use CSS hacks than have CSS hooks! If not, I understand, I REALLY appreciate your help! Aha! Yes, now we understand the principles the universal model with all options, it is possible to simplify at random. :-) For instance: * We can mount the cornerbox header text as image in the #infoborder image. ( advantage: never font-size scaling problems) * We can combine this header+infoborder image with the top corners image. ( 1 hook less needed) * We can assign this new combined image to the starting #bottomlinks div. ( no more topcorner div needed) * We can forget the detail of lifting the inside of the box upwards, and pulling the bottom corners upwards ( no more gap-savers needed). * Now there is no need for a special treatment (and needed hooks) for IE, and we can use the old #bottomlinks ul:after in the css. ( no more floatclearer div needed) * If desired, even the bottomcorners div can be missed, if there is a following div (without background stuff), which can serve as hook for the bottom corners image. But then deleting this next element will cause the cornered box to be incomplete, so I shouldn't do that, and let all the corner things in the #bottomlinks box. Without the last one, I made a fresh testpage. http://home.tiscali.nl/developerscorner/css-discuss/test-phazm-corners-4.html The html is now: div id=bottomlinks div class=inside ul lia href=#./a/li lia href=#./a/li lia href=#./a/li lia href=#./a/li lia href=#./a/li /ul /div div class=bottomcorners/div /div Enough clean sweeped? [1] ;-) Greetings, francky [1] No, still some old residues in the css which can be removed... PS I see some fixed font-sizes here and there. If you are intending to make them scalable for IE too (em-based; strong advise, if you didn't plan already!), I should do it ASAP. If you are some steps ahead in designing, it will be way more difficult to adapt the existing styles. __ 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/
Re: [css-d] Still having some trouble with my rounded corners...
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=firsta href=#Search Engine Optimization/a/li
lia href=#CSS/a/li
...
lia href=#Dreamweaver/a/li
li class=lasta 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
__
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/
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=firsta href=#Search Engine Optimization/a/li
lia href=#CSS/a/li
...
lia href=#Dreamweaver/a/li
li class=lasta 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/
Re: [css-d] Still having some trouble with my rounded corners...
I also changed the overlow:hidden clearfix on the ul, which is a bit
problematic, to:
#bottomlinks ul:after { content:.; clear:both; display:block;
visibility:hidden }
--
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/
Re: [css-d] Still having some trouble with my rounded corners...
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=firsta href=#Search Engine Optimization/a/li
lia href=#CSS/a/li
...
lia href=#Dreamweaver/a/li
li class=lasta 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/
Re: [css-d] Still having some trouble with my rounded corners...
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=firsta href=#Search Engine Optimization/a/li
lia href=#CSS/a/li
...
lia href=#Dreamweaver/a/li
li class=lasta 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
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=firsta href=#Search Engine Optimization/a/li
lia href=#CSS/a/li
...
lia href=#Dreamweaver/a/li
li class=lasta 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
__
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/
[css-d] Still having some trouble with my rounded corners...
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=firsta href=#Search Engine Optimization/a/li lia href=#CSS/a/li ... lia href=#Dreamweaver/a/li li class=lasta 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. Thanks, Jon Andrew __ 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/
