Problem with <IMG> tags used for banners

Discussion in 'HTML' started by Sir Ben, Mar 5, 2005.

  1. Sir Ben

    Sir Ben Guest

    Hi,

    I'm trying to stick some adverts on my blog using text links.
    Unfortunately, whenever I ad a text link from Tradedoubler in a <li> within
    a <ul> I get an ugly gap between the current <li> and the next one. I
    believe this is because of the <img> tag that's part of the link.

    Is there a way to get rid of these unsightly gaps? My blog is at
    http://www.financialcharting.com/poker/blog/ and the affected links are
    those for Coral Poker and Pacific Poker on the left hand side of the page.

    Thanks,

    Ben.
    Sir Ben, Mar 5, 2005
    #1
    1. Advertising

  2. Sir Ben

    Jan Faerber Guest

    Sir Ben ... output:

    > Hi,
    >
    > I'm trying to stick some adverts on my blog using text links.
    > Unfortunately, whenever I ad a text link from Tradedoubler in a <li>
    > within
    > a <ul> I get an ugly gap between the current <li> and the next one. I
    > believe this is because of the <img> tag that's part of the link.
    >
    > Is there a way to get rid of these unsightly gaps? My blog is at
    > http://www.financialcharting.com/poker/blog/ and the affected links are
    > those for Coral Poker and Pacific Poker on the left hand side of the page.


    http://img.tradedoubler.com/images/inv.gif
    This is only a 1x1 px gif and there is no gap.

    Can you use something like
    <img style="margin-top:-2px" ...?




    --
    Jan

    http://html.janfaerber.com
    Jan Faerber, Mar 5, 2005
    #2
    1. Advertising

  3. Sir Ben

    Els Guest

    Jan Faerber wrote:

    > Sir Ben ... output:
    >
    >> Hi,
    >>
    >> I'm trying to stick some adverts on my blog using text
    >> links. Unfortunately, whenever I ad a text link from
    >> Tradedoubler in a <li> within
    >> a <ul> I get an ugly gap between the current <li> and the
    >> next one. I believe this is because of the <img> tag
    >> that's part of the link.
    >>
    >> Is there a way to get rid of these unsightly gaps? My
    >> blog is at http://www.financialcharting.com/poker/blog/
    >> and the affected links are those for Coral Poker and
    >> Pacific Poker on the left hand side of the page.

    >
    > http://img.tradedoubler.com/images/inv.gif
    > This is only a 1x1 px gif and there is no gap.


    Not in Firefox, in IE there is.

    > Can you use something like
    > <img style="margin-top:-2px" ...?


    That won't help, if you highlight the links in IE, you can see
    it's pushed to the next line.
    I'd make it <img style="width:0;height:0">
    Also I'd put it inside the <a> element instead of between </a>
    and </li> This might already help, even without the height and
    width set to 0.



    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Temptations - Just My Imagination (Running Away
    With Me)
    Els, Mar 5, 2005
    #3
  4. Sir Ben

    Sir Ben Guest

    Thanks for the help Els. Using the <img style="width:0;height:0"> works,
    though inserting the IMG into the <a> turns it into a blue dot so I didn't
    use that bit.

    "Els" <> wrote in message
    news:Xns9610A173D528FEls@130.133.1.4...
    > Jan Faerber wrote:
    >
    >> Sir Ben ... output:
    >>
    >>> Hi,
    >>>
    >>> I'm trying to stick some adverts on my blog using text
    >>> links. Unfortunately, whenever I ad a text link from
    >>> Tradedoubler in a <li> within
    >>> a <ul> I get an ugly gap between the current <li> and the
    >>> next one. I believe this is because of the <img> tag
    >>> that's part of the link.
    >>>
    >>> Is there a way to get rid of these unsightly gaps? My
    >>> blog is at http://www.financialcharting.com/poker/blog/
    >>> and the affected links are those for Coral Poker and
    >>> Pacific Poker on the left hand side of the page.

    >>
    >> http://img.tradedoubler.com/images/inv.gif
    >> This is only a 1x1 px gif and there is no gap.

    >
    > Not in Firefox, in IE there is.
    >
    >> Can you use something like
    >> <img style="margin-top:-2px" ...?

    >
    > That won't help, if you highlight the links in IE, you can see
    > it's pushed to the next line.
    > I'd make it <img style="width:0;height:0">
    > Also I'd put it inside the <a> element instead of between </a>
    > and </li> This might already help, even without the height and
    > width set to 0.
    >
    >
    >
    > --
    > Els http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
    > Now playing: Temptations - Just My Imagination (Running Away
    > With Me)
    Sir Ben, Mar 5, 2005
    #4
  5. Sir Ben

    Richard Guest

    On Sat, 05 Mar 2005 13:50:16 GMT Sir Ben wrote:

    > Hi,
    >
    > I'm trying to stick some adverts on my blog using text links.
    > Unfortunately, whenever I ad a text link from Tradedoubler in a <li>
    > within a <ul> I get an ugly gap between the current <li> and the next one.
    > I believe this is because of the <img> tag that's part of the link.
    >
    > Is there a way to get rid of these unsightly gaps? My blog is at
    > http://www.financialcharting.com/poker/blog/ and the affected links are
    > those for Coral Poker and Pacific Poker on the left hand side of the page.
    >
    > Thanks,
    >
    > Ben.
    >



    use this instead <ul><li><div>
    An img tag within is a li tag is not a good idea to begin with. As the image
    for the li is generally small like an arrow or bullet thing.
    For the gap problem, try using margin:0px and see if that helps.
    Richard, Mar 6, 2005
    #5
  6. Sir Ben

    mscir Guest

    Richard wrote:
    > On Sat, 05 Mar 2005 13:50:16 GMT Sir Ben wrote:
    >>Hi,
    >>I'm trying to stick some adverts on my blog using text links.
    >>Unfortunately, whenever I ad a text link from Tradedoubler in a <li>
    >>within a <ul> I get an ugly gap between the current <li> and the next one.
    >>I believe this is because of the <img> tag that's part of the link.
    >>Is there a way to get rid of these unsightly gaps? My blog is at
    >>http://www.financialcharting.com/poker/blog/ and the affected links are
    >>those for Coral Poker and Pacific Poker on the left hand side of the page.
    >>Thanks,
    >>Ben.

    >
    > use this instead <ul><li><div>
    > An img tag within is a li tag is not a good idea to begin with. As the image
    > for the li is generally small like an arrow or bullet thing.
    > For the gap problem, try using margin:0px and see if that helps.


    On my 1024x768 in IE6 the column of links on the left appears after the
    last graphic (bloggerbutton1.gif) at the bottom of the page. It appears
    under the orange/yellow header (where I assume it belongs) in my
    Netscape 7.2 and Firefox 1.0.1.

    Mike
    mscir, Mar 6, 2005
    #6
  7. Sir Ben

    Sir Ben Guest

    "mscir" <> wrote in message
    news:...
    > Richard wrote:
    >> On Sat, 05 Mar 2005 13:50:16 GMT Sir Ben wrote:
    >>>Hi,
    >>>I'm trying to stick some adverts on my blog using text links.
    >>>Unfortunately, whenever I ad a text link from Tradedoubler in a <li>
    >>>within a <ul> I get an ugly gap between the current <li> and the next
    >>>one.
    >>>I believe this is because of the <img> tag that's part of the link.
    >>>Is there a way to get rid of these unsightly gaps? My blog is at
    >>>http://www.financialcharting.com/poker/blog/ and the affected links are
    >>>those for Coral Poker and Pacific Poker on the left hand side of the
    >>>page.
    >>>Thanks,
    >>>Ben.

    >>
    >> use this instead <ul><li><div>
    >> An img tag within is a li tag is not a good idea to begin with. As the
    >> image
    >> for the li is generally small like an arrow or bullet thing.
    >> For the gap problem, try using margin:0px and see if that helps.

    >
    > On my 1024x768 in IE6 the column of links on the left appears after the
    > last graphic (bloggerbutton1.gif) at the bottom of the page. It appears
    > under the orange/yellow header (where I assume it belongs) in my Netscape
    > 7.2 and Firefox 1.0.1.
    >
    > Mike


    I seem to get that as well in IE6 if the screen's too narrow. I guess it's
    because I'm mixing and matching <div>s and <table>s. I'll have to make it
    more consistent in the future!
    Sir Ben, Mar 6, 2005
    #7
  8. Sir Ben

    Jan Faerber Guest

    Els ... output:

    >> http://img.tradedoubler.com/images/inv.gif
    >> This is only a 1x1 px gif and there is no gap.

    >
    > Not in Firefox, in IE there is.
    >
    >> Can you use something like
    >> <img style="margin-top:-2px" ...?

    >
    > That won't help, if you highlight the links in IE, you can see
    > it's pushed to the next line.
    > I'd make it <img style="width:0;height:0">
    > Also I'd put it inside the <a> element instead of between </a>
    > and </li> This might already help, even without the height and
    > width set to 0.


    Els = Xpert!
    But I don't want to hide my poor html I wrote to explain myself what
    happens:
    http://html.janfaerber.com/files/gap_li_<img>.lsd



    --
    Jan

    http://html.janfaerber.com
    Jan Faerber, Mar 6, 2005
    #8
  9. Sir Ben

    Els Guest

    Jan Faerber wrote:

    > Els ... output:
    >
    >>> http://img.tradedoubler.com/images/inv.gif
    >>> This is only a 1x1 px gif and there is no gap.

    >>
    >> Not in Firefox, in IE there is.
    >>
    >>> Can you use something like
    >>> <img style="margin-top:-2px" ...?

    >>
    >> That won't help, if you highlight the links in IE, you can
    >> see it's pushed to the next line.
    >> I'd make it <img style="width:0;height:0">
    >> Also I'd put it inside the <a> element instead of between
    >> </a> and </li> This might already help, even without the
    >> height and width set to 0.

    >
    > Els = Xpert!
    > But I don't want to hide my poor html I wrote to explain
    > myself what happens:
    > http://html.janfaerber.com/files/gap_li_<img>.lsd


    You do realize though that that's not what happened in the
    OP's example?
    What happened there was that the a element had a certain width
    (didn't check, but I'm guessing 100%), and the img of only 1px
    came after the a element. But, as the a element already had
    100% width of the li element, the picture got pushed to the
    next line. In IE that is. I guess Firefox just reckons that
    100% needs to be of the available width, which is the width of
    the li element minus the width of the picture. Hence, picture
    doesn't get pushed to the next line.

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Mar 7, 2005
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    502
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  2. Ian

    Dynamic banners

    Ian, Oct 1, 2003, in forum: HTML
    Replies:
    5
    Views:
    1,938
    Dylan Parry
    Oct 3, 2003
  3. Philipp Lenssen

    Problem: <img></img>

    Philipp Lenssen, Jun 27, 2005, in forum: XML
    Replies:
    15
    Views:
    745
    David Håsäther
    Jul 3, 2005
  4. Jopek
    Replies:
    7
    Views:
    388
    dorayme
    Apr 26, 2009
  5. Replies:
    7
    Views:
    169
    Tad McClellan
    Jun 22, 2006
Loading...

Share This Page