Problem with <IMG> tags used for banners

S

Sir Ben

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.
 
J

Jan Faerber

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" ...?
 
E

Els

Jan said:
Sir Ben ... 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 http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Temptations - Just My Imagination (Running Away
With Me)
 
S

Sir Ben

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.
 
R

Richard

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.
 
M

mscir

Richard said:
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
 
S

Sir Ben

mscir said:
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!
 
J

Jan Faerber

Els ... output:
Not in Firefox, in IE there is.


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
 
E

Els

Jan said:
Els ... output:


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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top