|
Posted by David Housman on February 9, 2007, 6:45 pm
Please log in for more thread options
Almost forgot: I'm trying to put teh text to the right of the image.
Thanks again,
Dave
> Hi,
> Thanks for your help. Your advice has been helpful in helping me
> understand what is going on. I"m not sure if my reply didn't get
> through or was moderated, but I'll be more concise. and hope it was
> teh former.
> I have text inside a span inside an anchor. While I set teh box
> attributes of the span
> .regular{
> float:none !important;
> background-color:blue !important;
> padding:40px 40px 4px 10px !important;
> margin:0px 0px 10px 0px !important;
> height:25px !important;
>
> }
>
> the text is potitioned at the baseline of the anchor (orangish)
> element, (http://www.discovertheuser.com/images/img1.gif) and I can't
> figure out why. Isn't the box around the text determined by the
> attributes of the span? Why does the baseline of the text have any
> bearing on the position of the span or teh text within the span?
>
> Another question: Should the #nav box stretch to contain its objects,
> if its set to height:auto? In the picture, its float:left. If i make
> it float:none, the height collapses, I can make it big enough with a
> div clear element or by manually setting the height. I would have
> thought that if on auto, a containing block would stretch to fit its
> child objects? Why does float have an effect on this?
>
> Thanks,
> Dave
>
> \ ApparWhy does the position of the text matter from the perspective
> of the enclosing anch
>
>
> > > Hello,
>
> > > I'm trying to implement a navigation bar with a ul in css. The code is
> > > a template, but i'm customizing. I can handle just text in each block,
> > > but i want the first block to have an image and then text, which I'm
> > > doing with a span element. I think i need it that way to handle text
> > > positioning of the text.
>
> > > So there's an anchor block, and inside4 that i'm putting an image and
> > > a span block.
> > > Except. It. Doesn't. Work.http://www.discovertheuser.com/images/img1.gif
> > > You can see the span sticking out of its ancestor blocks, and the text
> > > padding screwed up. And some of the anchor block padding is stretching
> > > below the img.
> > > I can get the span to show up below the img if i float
> > > it left, and if I take my vertical-align to bottom, the span shows up
> > > above the ul block.
>
> > Do you want the span below the image, or to the right of it?
>
> > > I think there's some funky block/block/span quirkiness going on, and
> > > I'd appreciate it if someone could steer me toward an explanation.
>
> > .regular is an inline box. The exact dimensions of its background box is
> > not defined by the spec, and in this case, it extends below the
> > characters of "Home" to make room for the descenders in the current
> > font. If you look closely at your gif image, you will see that the
> > bottom of the image is aligned with the baseline of the text.
>
> > Basically I would say setting backgrounds, borders etc. on inline boxes
> > is not going to be a good way to do toolbars like this. Save it for
> > highlighting portions of text in a paragraph and things like that.
>
> > You need to work with block boxes and probably floats since inline-block
> > is not well supported.
>
> > > The css:
> > > #nav {
> > > margin-left:10%;
> > > margin-right:10%;
> > > margin-top:0;
> > > margin-bottom:0;
> > > padding:0;
> > > background:#7A95FF url(nav_bg.jpg) 0 0 repeat-x;
> > > float:left;
> > > width:100%;
>
> > margin-left:10% and width:100% means a horizontal scrollbar is
> > inevitable. Does #nav need to be floated?
>
> > [...]
>
> > > #nav #a-home{
> > > display:inline-block;
>
> > I can't see much reason for display: inline-block here, and it isn't
> > supported in Firefox.
| 
XML Sitemap