Just wanted to report that the solution that worked multi browsers: IE6, IE7,
FF2, Mac Safar & Mac FF ended up being a combo of both suggestions without any
hacks/conditional comments. I wrapped a p tag around the a href:
p {position: absolute; left: 0; right: 0; bottom: 50px; margin: 5px 0 0;
text-align: center; width: 100%;}
Adam - your suggestion left out the left and right property values which didn't
allow for the p to get centered in IE.
Bill your suggestion was right on but I didn't even need the conditional
comments are the display: inline-block declaration.
Again thank you both!!
Elli
--- On Wed, 7/9/08, Bill Brown <[EMAIL PROTECTED]> wrote:
> From: Bill Brown <[EMAIL PROTECTED]>
> Subject: Re: [css-d] Centering Element W Absolute Positioning?
> To: "Adam Ducker" <[EMAIL PROTECTED]>
> Cc: [EMAIL PROTECTED], "CSS Discuss" <[email protected]>
> Date: Wednesday, July 9, 2008, 3:32 PM
> Adam Ducker wrote:
> > Elli Vizcaino wrote:
> >> I have a link that I've absolutely positioned
> in a relatively
> >> positioned container so that it sits 50px up from
> bottom of
> >> container. In order for me to get the link to look
> centered I had
> >> to style it like so:
> >>
> >> #jobad {position: relative; width: 298px; height:
> 250px; border:
> >> 1px solid #000;} a {position: absolute; left:
> 76px; bottom: 50px;}
> >>
> >> I wanted to give the left property a value of 50%
> but that didn't
> >> exactly center it. So I resorted to using a pixel
> value. Can
> >> someone explain why declaring "left:
> 50%" didn't work?
> >>
> > Elli:
> >
> > It appears that "left: 50%" is putting the
> link's left most position
> > at 149px, which is 50% of 298px. This is using the
> leftmost edge of
> > the link, not the center of the link like you want,
> which is why it
> > looks funny.
> >
> > There are other options you can explore for centering
> your link other
> > than absolute positioning if you have other options
> available...
> >
> > -Adam Ducker
>
> Hi Ellie,
>
> Adam's explanation is dead-on. I've included a code
> snippet which should
> give you the effect I think you want in most browsers
> (except FF2 which
> I think lacks support for display:inline-block). It
> requires a wrapper
> element, but should do what ya need.
>
> Here's the code. Hope it helps.
> --Bill
>
> PS to Ellie: CSS-D has been working fine for me over the
> past week. In
> fact, you've missed some good messages if you've
> not been receiving
> these last seven days or so. More soon (I promise).
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
> 4.01//EN"
>
> "http://www.w3.org/TR/html4/strict.dtd";>
> <html><head>
> <title>style{position:absolute;center:horizontal;}</title>
> <style type="text/css">
> div.spach {
> position: absolute;
> text-align: center;
> left: 0;
> right: 0;
> }
> h1 {
> background: #dedede;
> border: 1px solid #999999;
> color: #666666;
> display: inline-block;
> font-family: sans-serif;
> padding: 10px;
> }
> </style>
> <!--[if IE]><style type="text/css">
> div {width: 100%;}
> h1 {display: inline;
> zoom: 1;}
> </style><![endif]-->
> </head><body>
> <div
> class="spach"><h1>TheHolierGrail:active{version:2.0}</h1></div>
> </body></html>
>
> --
> /**
> * Bill Brown
> * TheHolierGrail.com & MacNimble.com
> * From dot concept...to dot com...since 1999.
> ***********************************************/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
