SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IMG between my <a> tags is screwing up my positioning

    Hi -

    I've distilled this down to a simple example. Within a div (attendeeadd) I have some text, an input and an anchor. All inline elements. If I put text between the anchor tags everything lines up just as you'd expect and I want it. If I substitute an img for the text (between the anchor tags) it pushes the leading text ("Name:") and the input down and out of the bottom of the div. I'm not sure what's going on here. If you uncomment the commented line and comment out the one below it you'll see how I'd like it to line up.

    Here is an example the img is a 24 x 24 button (attached) and I'm testing in FF3.


    /* COPY.CSS */

    body {
    background-color: #CA6D3F;
    font-family: "Trebuchet MS",Arial,Verdana;
    font-size: 12px;
    color: White;
    }

    img {
    border-style: none;
    }

    a {
    margin-top: 10px;
    text-decoration: none;
    display: inline-block;
    }

    input {
    border-style: none;
    }

    .formfield {
    background-color: #6656F8;
    padding-left: 25px;
    }

    #attendeeadd {
    height: 35px;
    width: 250px;
    margin-top: 50px;
    margin-left: 45px;
    }


    Code:
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1">
        <div>
                <div id="attendeeadd" class="formfield">
                        Name:
                        <input id="attendeeaddtextbox" type="text"/>
    <!--                    <a href="#" id="attendeeaddbtn">HI</a> -->
                        <a href="#" id="a1"><img src="Assets/add_tg_24.gif" /></a>
                </div>
        </div>
        </form>
    </body>
    </html>
    Thanks to anyone in advance for help.

    BK
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An image is by default aligned to the text baseline, thus the image will determine where that baseline is as it is larger than the input. Change the image's vertical alignment :
    Code:
    #form1 img {
    	vertical-align: middle;
    }
    Note also that it does not work in FF2 due to not recognising inline-block. Possibly better off removing the top margin from the <a> and applying it as a top padding to the div :
    Code:
    a {
    text-decoration: none;
    }
    #attendeeadd {
    	height: 25px;
    	width: 250px;
    	margin-top: 50px;
    	margin-left: 45px;
    	padding-top: 10px;
    }

  3. #3
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect - works like a charm.

    Thanks,

    BK

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note the edit to my post above - you replied while I was adding extra info.


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
  •