Any web designers here?
 

Ok so I get about two clients a year for a website design (literally about two per year!). I don't advertise it but somehow they find out...weird huh?

Anyhow I have a simple question. If you click this link

All In It Entertainment

you will see the homepage image. I split the image into 3 separate files, and the second image (reading "enter site") is a link. There is a small space between each image. How do I get rid of these spaces?
Thanks

JS

Admittedly I'm a bit out of practice, but after having a look I couldn't seem to figure out how to sort it. Still, I'd recommend that you ditch the tables anyway and move to solely using DIVs in combination with CSS. You'll probably run into fewer hassles in the long run, and using tables for layout is an archaic technique as far as I'm concerned.

I've viewed it in both MSIE and Chrome and I can't see any gaps between the images.

Andrew

Craig,

You are right. Tables is the old school way of doing things and CSS is much more versatile. However when I use CSS I always run into problems with positioning showing up different in multiple browsers. The ultimate solution is for me to just figure out the CSS and do it right. I think that's what I will do.

Andrew,

With the background the same color, the only noticeable gap is a horizontal line above the 'Enter' button. Do you see it?

JS

John,

The only browser I can see the horizontal line in is Firefox. In MSIE 6.0 (yeah, I know) there is a blue box around the hyperlinked area. Possibly a rogue issue with the border width specification on a linked image.

Looking in to your code, you don't have it specified as to what width the border line is, which would then leave it up to the browser's default setting as to how this is then handled. BTW, that blue colour is also a browser default for hyperlinks.

I would suggest specifying a border width of zero so that *definitely* no border is applied by a browser.

Your code snippet should be updated from:

<img src="images/splash_02.gif" alt="&lt;click to enter&gt;" width="500" height="37">

to:

<img src="images/splash_02.gif" alt="&lt;click to enter&gt;" width="500" height="37" border="0">

Andrew

I know this is an old thread, but just wanted to update and say thanks for the help. BTW Andrew you were right, it was the border!

Thanks again,

JS

Much appreciated for the update. Thanks.

Andrew

Forget about tables being "dead" ... I think they're fine if that's what you want to use ...

More of an issue is ... using a splash page altogether ... does the client really want to use one? Hopefully they understand that they are more of an annoyance for users and ... not the best option if they want to rank well in the engines.

Old thread, but I have to agree with Matthew, though for that particular instance (assuming the splash page is neccessary) it would have probably been easier to use a basic image map.

Greg