Problem with <IMG> tags used for banners

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

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 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)

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)

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 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" <> 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!

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_%3Cimg%3E.lsd



--
Jan

http://html.janfaerber.com

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_%3Cimg%3E.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 -