SitePoint Sponsor

User Tag List

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

    images are not aligned properly using margin-left

    Can any one please tell me what is wrong with this code.I want to place "printer" and "acrobat" images next to each other in the same line, but it is folling in different lines.

    Is there any better way of coding this?



    <html>
    <head>
    <title>Reports Available in repository.</title>
    <link rel='stylesheet' type='text/css' href='tree.css'>
    </head>
    <body bgcolor="#FFFFFF" >
    <div class='oddreport'>
    <span class='evenreport'>&nbsp;&nbsp;&nbsp;ad
    <a target=_blank><img width=20px height=20px src="images/printer.gif" class='printer' /></a>
    <a target=_blank><img width=20px height=20px src="images/acrobat.gif" class='acrobat' /></a>
    </span>
    </div>
    <div class='evenreport'>
    <span class='oddreport'>&nbsp;&nbsp;&nbsp;ad1
    <a target=_blank><img width=20px height=20px src="images/printer.gif" class='printer' /></a>
    <a target=_blank><img width=20px height=20px src="images/acrobat.gif" class='acrobat' /></a>
    </span>
    </body>
    </html>



    tree.css file

    div {
    width:640px;
    }


    .evenreport {
    background-color:#f1eacc;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:9pt;
    }

    .oddreport {
    background-color:#e3d599;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:9pt;
    }

    .printer {
    margin-left:471;
    vertical-align:absmiddle;
    }
    .acrobat {
    margin-left:550;
    vertical-align:absmiddle;
    }




    I tried to use "position:absolute;leftno_of_pixels", this is working fine in IE 5.5 but not on NS6.2. In Netscape 6.2 both the images are following in the next line.

    Any help would be great.

    Thanks

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're going to kick yourself when you find out how easy it is. It doesn't have anything to do with CSS (although you can manipulate it from there):
    Code:
    <a target=_blank><img src="images/printer.gif"/></a><a target=_blank><img src="images/acrobat.gif"/></a>
    That's it. All you have to do is make sure there's no space or line break and it won't wrap. BTW, I removed the extra code to keep the length reasonable on the forums, you can add it back if you want. :-)

    ~~Hope This Helps

  3. #3
    SitePoint Member
    Join Date
    Jan 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ian Glass for the reply.

    But the problem is not to display both the images very next to each other, I want to display "printer" at pixel 471 and "acrobat" at pixel 550.

    I changed according to your suggestion, still it is displaying in the next line. Looks like margin-left of "acrobat" always takes from the "printer" image.

    Here is the snippet of code(with your changes). I am still using css because I want to specify position from the left.


    <div class='oddreport'>
    <span class='evenreport'>&nbsp;&nbsp;&nbsp;ad
    <a target=_blank><img width=20px height=20px src="images/printer.gif" class='printer' /></a><a target=_blank><img width=20px height=20px src="images/acrobat.gif" class='acrobat' /></a>
    </span>
    </div>


    Thanks

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but I'm lost on what you want to accomplish. Can you link to a working copy?

  5. #5
    SitePoint Member
    Join Date
    Jan 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the .html and .css file.
    You can do cut and paste of this code and run on your browser.

    This html has two rows, each row should display 2 images. images in the first row should align with the images on the next row.

    But following code displaying 4 rows. That is my problem.


    test.html


    <html>
    <head>
    <title>Reports Available in repository.</title>
    <link rel='stylesheet' type='text/css' href='tree.css'>
    </head>
    <body bgcolor="#FFFFFF" >
    <div class='oddreport'>
    <span class='evenreport'>&nbsp;&nbsp;&nbsp;ad
    <a target=_blank><img width=20px height=20px src="images/printer.gif" class='printer' /></a><a target=_blank><img width=20px height=20px src="images/acrobat.gif" class='acrobat' /></a>
    </span>
    </div>
    <div class='evenreport'>
    <span class='oddreport'>&nbsp;&nbsp;&nbsp;ad1
    <a target=_blank><img width=20px height=20px src="images/printer.gif" class='printer' /></a><a target=_blank><img width=20px height=20px src="images/acrobat.gif" class='acrobat' /></a>
    </span>
    </body>
    </html>



    tree5.css file

    div {
    width:640px;
    }


    .evenreport {
    background-color:#f1eacc;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:9pt;
    }

    .oddreport {
    background-color:#e3d599;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:9pt;
    }
    .printer {
    margin-left:471;
    z-index:1;
    vertical-align:absmiddle;
    }
    .acrobat {
    margin-left:550;
    z-index:2;
    vertical-align:absmiddle;
    }

  6. #6
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using left:440px instead of margin-left in conjunction w/ position:absolute or relative.

    Also, class names in your tags should be in double quotes not single ones: class="oddreport". I'm not positive but I believe <img> is a block-level element & can't be nested within a inline <span>.

  7. #7
    SitePoint Member
    Join Date
    Jan 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried with position:absolute/relative with left attribute. But it is not of much use.
    position:absolute is causing problems on Netscape 6.2. Please see my main posting and responses in following link:


    http://www.siteexperts.com/forums/vi...id=7756&Sort=0


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
  •