HTML Help

[Graham.J]

Hi guys,

I'm having a bit of trouble with some browser compatibility issues with regards to HTML.

I've split up a picture into five sections, three of those are links.

I've placed them in one cell of a table which has a height and width the same as the entire picture (made up of all five sections). They all fit in the table fine and in firefox it looks absolutely perfect, each section is flush with the next.

In IE however, the pics are stacked vertically - as they should be - but there is a few pixel gap between each one. I don't know how to get around this.

The HTML is as follows....



Thanks in advance,

Graham

[dilbert]

I'm not an expert at this, so there may be an easier way.

In the past, I've either just used a single image and included it as an image map, for the dynamic stuff. Alternatively, you can do the following, if you wish to position a picture precisely, anywhere on the page.

Replace curly braces with tag delimiters......

{span style="position: absolute; left: ??; top: ??; visibility: visible"}
{img id=?? border="0" src="??" width="??" height="??"}
{/span}

[Graham.J]

I really need the image to stay in the table as there's some text on the right which is in another column and is set up to be directly alongside each link.

In FireFox and when viewed in DreamWeaver, it looks like this...



But for some reason, in IE it looks like this...




The coding is exactly the same, I just don't understand why there are gaps in IE and no gaps in FireFox

Would an 'image map' work with that picture?

>> Edited by Graham.J on Wednesday 22 February 02:54

[dilbert]

There's allsorts of wierdness in there.
I'd venture to say that no two browsers are the same.
It's unfortunate, but just the way it is.

Edited to add, you may find that things improve if you put each picture in a separate cell with the cellpadding, cellspacing and border values set to 0. I'd not hold your breath though!!!

Further edited to add, there may be another property (still set to default) of any of the tags you've used that defines additional padding. The only way to find out yourself is to have a look at the definitions, but I can't find them on MSDN, although I know they're there somewhere.

All I know is that I've been here before myself, and the above were my solutions.

Someone who actually knows will be along in a minute!


HTH

>> Edited by dilbert on Wednesday 22 February 03:04

[Graham.J]

Bu**er

Back to the drawing board methinks. Unless someone can come up with a magical solution.

Strangely, it ALWAYS seems to be IE that causes the problems when I design a site

[zaktoo]

As dilbert says, you' probably be better off with an imagemap. You could then use absolutely positioned and sized divs next to it to provide the text in the place you need it. Be sure to allow for overflow when it's displayed with a font bigger than you expect.

Also, for my 2 cents' worth and not wanting to sound like a boring cnut, could you imagine your page without a fiddly graphical menu? Sorry, had to ask

Ciao

Zak

[Graham.J]

I think I'll have a look into this imagemap stuff. Failing that I'll just have to have a rethink.

Haha, no boring cnut-ishness there, the site isn't personally for me, I'm designing it for a client, it was the clients idea, I just tried to do it as I didn't think it'd be that complex. If everyone used FireFox it wouldn't be complex in the slightest

[SlidingSideways]

Add a line break (< b r / > but without the extra spaces) after the closing tag for each hyperlink.
Don't ask me why, but it seems to cure it.

[anonymous-user]

SlidingSideways said:

Add a line break (< b r / > but without the extra spaces) after the closing tag for each hyperlink. Don't ask me why, but it seems to cure it.

My thinking was similar, but to remove the line breaks in the HTML so that the < td>< a>< img/>< a>< td> are all on one line with no whitespace between the tags.

>> Edited by anonymous-user on Wednesday 22 February 10:17

>> Edited by anonymous-user on Wednesday 22 February 10:18

[dr bob]

Yeah, replace the linebreak between the closing 'a' tag of one image and the opening of the next... bish, bash, bosh!
CH

[Andrew Noakes]

Try setting a stylesheet for links, something like:

a img {border: none}

IIRC IE defaults to adding a border on pics with links, even if you tell it border=0. But it's been a while since I went through this in any detail so it might not help at all...

[dilbert]

Andrew Noakes said:

Try setting a stylesheet for links, something like: a img {border: none} IIRC IE defaults to adding a border on pics with links, even if you tell it border=0. But it's been a while since I went through this in any detail so it might not help at all...

That's the badger I was trying to find last night on MSDN! Now you've said it, I think that border is so that the browser can indicate that a picture based link can indicate weather the link has been visited. Default blue/purple wotsit. Obviously it been yonks since that sort of stuff has been common for pictures.

[slapmatt]

OK - without the actual code I can't prove that it works, but try putting all the code on one line - ie. removing the carrage returns at the end of each link/image.

Also, make sure in your table you have cellpadding="0" and cellspacing="0".

I hope that works!

[slapmatt]

Yes, just done it - definitely put everything on the same line, starting at the opening td tag all the way through to the end td.

Who says browsers ignore whitespace in HTML???

[Graham.J]

slapmatt said:

Yes, just done it - definitely put everything on the same line, starting at the opening td tag all the way through to the end td. Who says browsers ignore whitespace in HTML???

I did try that originally but IE seemed to ignore the table width and the pics were all horizontal, which is what me put them on each individual line. Although on trying it again - just to see - it's worked fine. I must've had a piece of code in the wrong place when I tried it first time around.

Thanks for all your help everyone

>> Edited by Graham.J on Wednesday 22 February 13:00