SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anchor won't stay same height when float

    Hi all,

    I have a class named .button, so I can make certain anchors look like buttons

    Code:
    a.button
    {
    	background-color:#EFEFEF;
    	color:#333333;
    	padding:5px;
    	border:none;
    	height:20px;
    }
    This is fine, however - if I attempt to use one of these buttons and float it, the height changes, about 5, 10 pixels taller. So the result of this is that I have a load of different size buttons on my site..

    This happens in IE 6.0 and Firefox 1.0

    Any ideas why this happens, and how I can fix it?

    Thanks,
    Matt.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    might want to turn it into a block-level element first. display: block;

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mstwntd,

    That fixed the height issues, however, the buttons that aren't floated are now taking 100% width..

    How shall I fix this? set 1% width and let the padding make the size?

    Thanks,
    Matt.

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    That is an issue yes. You could give your idea a shot, or go with a fixed width if it doesn't help.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Anchors are inline elements and inline elements do not observe dimensions applied to them. You can turn them onto block level (or float them) and then they can accept dimensions.

    If you don't want dimensions to be applied but have some height and wifdth then you can use padding to create the extra dimensions although this will leave the elements at content width plus padding. (for ie you will need to add position:relative otherwise all the padding may not take effect.)

    Setting 1% width will have no effect on ie as it will expand automatically (however 1% is often used to create layout as in the height:1% hack). Other browsers will restrict the width to 1%.

    Paul

    If you want use the block level method then apply the class just to the elements you require and leave the others alone. Or alternatively set domesnions for all.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •