[WSG] Rounded corner and IE Win help needed
Ok, so this is driving me crazy! http://cpanz.signify.co.nz/test/national-pod-template.html I have an unordered list being used for navigation. The bottom item on the list needs to have a rounded corner. I figure: - make the last li position: relative - add a span inside the last li the exact size of the corner image - position it absolute to bottom and right of the last li - have the corner image set as a background for the span - give the last li height: 1%; as if I don't IE Win positions the span further down the page cf: http://www.positioniseverything.net/abs_relbugs.html It all looks fine in Mozilla, Safari and Opera, but the span is being positioned wrongly in IE Win - ie, not at right and bottom of the last li. Any ideas? I've spent way too long trying to figure this out, so no doubt have missed something basic! Thanks. Mike ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
MESSAGE NOT DELIVERED: [WSG] Rounded corner and IE Win help needed
Your message could not be delivered. The User is out of space. Please try to send your message again at a later time. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Rounded corner and IE Win help needed
Well if you put a border on the span you see that the image is in the wrong
place within the span;
Doing background-position: bottom right; within the ul#subnav li.last
span { certainly gets you most the way there; had you done that?
Siggy
- Original Message -
From: Mike Brown [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, March 29, 2005 3:12 PM
Subject: [WSG] Rounded corner and IE Win help needed
Ok, so this is driving me crazy!
http://cpanz.signify.co.nz/test/national-pod-template.html
I have an unordered list being used for navigation. The bottom item on the
list needs to have a rounded corner. I figure:
- make the last li position: relative
- add a span inside the last li the exact size of the corner image
- position it absolute to bottom and right of the last li
- have the corner image set as a background for the span
- give the last li height: 1%; as if I don't IE Win positions the
span further down the page cf:
http://www.positioniseverything.net/abs_relbugs.html
It all looks fine in Mozilla, Safari and Opera, but the span is being
positioned wrongly in IE Win - ie, not at right and bottom of the last
li.
Any ideas? I've spent way too long trying to figure this out, so no doubt
have missed something basic!
Thanks.
Mike
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Rounded corner and IE Win help needed
G'day
http://cpanz.signify.co.nz/test/national-pod-template.html
I have an unordered list being used for navigation. The bottom item on
the list needs to have a rounded corner. I figure:
Any ideas? I've spent way too long trying to figure this out, so no
doubt have missed something basic!
Why not just make a background image for the last li instead of
fiddling with spans, absolute and relative positioning etc?
ul#subnav li.last {
background: #url(subnav-corner.gif) no-repeat right bottom;
}
If that (as I suspect) interferes with the links (corner
disappears, particularly on hover), put a background image on
li.last a
...and...
li.last a:hover
Incidentally, you might ass more contrast - there's not enough of
it, especially on hover, making the (tiny) link text very hard to
read.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
MESSAGE NOT DELIVERED: Re: [WSG] Rounded corner and IE Win help needed
Your message could not be delivered. The User is out of space. Please try to send your message again at a later time. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
MESSAGE NOT DELIVERED: Re: [WSG] Rounded corner and IE Win help needed
Your message could not be delivered. The User is out of space. Please try to send your message again at a later time. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Rounded corner and IE Win help needed
Sigurd Magnusson wrote:
Well if you put a border on the span you see that the image is in the
wrong place within the span;
Doing background-position: bottom right; within the ul#subnav li.last
span { certainly gets you most the way there; had you done that?
No! I hadn't thought it necessay because the span was given a width and
height the same size as the background image. Your suggestion does help.
It's still not quite right, but getting closer :)
Thanks!
Bert Doorn wrote:
http://cpanz.signify.co.nz/test/national-pod-template.html
I have an unordered list being used for navigation. The bottom item on
the list needs to have a rounded corner. I figure:
Any ideas? I've spent way too long trying to figure this out, so no
doubt have missed something basic!
Why not just make a background image for the last li instead of fiddling
with spans, absolute and relative positioning etc?
ul#subnav li.last {
background: #url(subnav-corner.gif) no-repeat right bottom;
}
If that (as I suspect) interferes with the links (corner disappears,
particularly on hover), put a background image on
li.last a
...and...
li.last a:hover
I had thought of that, but the li.last a:hover does interfere with the
corner:
http://cpanz.signify.co.nz/test/national-pod-template2.html
I can't put the corner as a background image on the a as you suggest
as it already has the little box with the arrow as a background image.
And I can't combime that with the bottom right corner as I don't know
how high the link will be - eg whether it's 1 or 2 lines.
Incidentally, you might ass more contrast - there's not enough of it,
especially on hover, making the (tiny) link text very hard to read.
Agreed, but I didn't design it, am just building it!
Thanks.
Mike
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
MESSAGE NOT DELIVERED: Re: [WSG] Rounded corner and IE Win help needed
Your message could not be delivered. The User is out of space. Please try to send your message again at a later time. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Rounded corner and IE Win help needed
Alternatively, fast forward to the the future, and use
border-bottom-right-radius :P
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius
Someone here mentioned that this is already implemented in FireFox with a
different name.
Siggy
- Original Message -
From: Mike Brown [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, March 29, 2005 4:09 PM
Subject: Re: [WSG] Rounded corner and IE Win help needed
Sigurd Magnusson wrote:
Well if you put a border on the span you see that the image is in the
wrong place within the span;
Doing background-position: bottom right; within the ul#subnav li.last
span { certainly gets you most the way there; had you done that?
No! I hadn't thought it necessay because the span was given a width and
height the same size as the background image. Your suggestion does help.
It's still not quite right, but getting closer :)
Thanks!
Bert Doorn wrote:
http://cpanz.signify.co.nz/test/national-pod-template.html
I have an unordered list being used for navigation. The bottom item on
the list needs to have a rounded corner. I figure:
Any ideas? I've spent way too long trying to figure this out, so no
doubt have missed something basic!
Why not just make a background image for the last li instead of fiddling
with spans, absolute and relative positioning etc?
ul#subnav li.last {
background: #url(subnav-corner.gif) no-repeat right bottom;
}
If that (as I suspect) interferes with the links (corner disappears,
particularly on hover), put a background image on
li.last a
...and...
li.last a:hover
I had thought of that, but the li.last a:hover does interfere with the
corner:
http://cpanz.signify.co.nz/test/national-pod-template2.html
I can't put the corner as a background image on the a as you suggest as
it already has the little box with the arrow as a background image. And I
can't combime that with the bottom right corner as I don't know how high
the link will be - eg whether it's 1 or 2 lines.
Incidentally, you might ass more contrast - there's not enough of it,
especially on hover, making the (tiny) link text very hard to read.
Agreed, but I didn't design it, am just building it!
Thanks.
Mike
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Rounded corner and IE Win help needed
more details www.blooberry.com/indexdot/css/properties/extensions/nsextensions.htm http://www.webreference.com/dhtml/column70/ -moz-border-radius, -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomleft, -moz-border-radius-bottomright Support: Netscape 7+, Mozilla 0.95+ Inherited: No Allowed Values: - Inherit: Use the value of this property from the parent element. - [Length]: Specifies a length and unit of the border/corner radius. - [Percentage]: Specifies a percentage. Not sure of what the percentage relates to. Purpose: This property controls the curve radius of borders at the corners, allowing corners to be rounded (otherwise, borders are usually squared off.) The '-moz-border-radius' property is a shorthand method for controlling this effect for each corner. If one value is specified, it applies to all corners. If only two values exist, the first applies to the top-left and bottom-right, while the second value applies to the top-right and bottom-left. If all four values are specified, they control, in order: [top-left] [top-right] [bottom-right] [bottom-left] -- Neerav Bhatt http://www.bhatt.id.au Web Development IT consultancy http://www.bhatt.id.au/blog/ - Ramblings Thoughts http://www.bhatt.id.au/photos/ http://www.bookcrossing.com/mybookshelf/neerav Sigurd Magnusson wrote: Alternatively, fast forward to the the future, and use border-bottom-right-radius :P http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius Someone here mentioned that this is already implemented in FireFox with a different name. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
