[megasad]

I'm currently working on a website and have come across the following issue:

When I hyperlinkerise an image, like so:

Code:
<a href="poop.html"><img src="poop.jpg" /></a>

When you move the cursor over the image, not only does the border colour change (which I want and have specified in the stylesheet) but also a block of the screen directly beneath the image, approximately 5 pixels in height.

I've worked out that this is due to the background colour I have set for normal, text links in my stylesheet.

At the moment, the only way I have around this block of hover colour is to give the hyperlink a class and then, in the stylesheet, cancel out the background hover colour (I make it white, the same as the background of the page, rather than blue). So, I use something like this:

Code:
<a class="poop" href="poop.html"><img src="poop.jpg" /></a>

Which kind of works, only there's still a few pixels gap beneath the image, that shouldn't be there, and I have to add the class to any linked image.

So, the reason I post about this is to ask if anyone has a solution. The website is written in XHTML 1.1.

[mania]

check the style for your image as well. you might need to make the image padding: 0px; margin: 0px to get rid of the pixels - it may not be from the a tag. throw this in style="border: 1px solid red;" for first the image and then the a (temporarily of course). it will show you which one is causing the gap.

[megasad]

Originally Posted by mania

check the style for your image as well. you might need to make the image padding: 0px; margin: 0px to get rid of the pixels - it may not be from the a tag. throw this in style="border: 1px solid red;" for first the image and then the a (temporarily of course). it will show you which one is causing the gap.

I done gone tried that little snippet of code and it confirms what I thought; the random extra pixels are on the bottom of the link, not the image. I tried adding 0px margin and padding to every element under the sun and it did no good; still with the gap.

On a side note, this is something I've seen before, on many websites, and when I've looked at the code it's always been because they were using CSS for their layout rather than tables...

Nay! I just had a hunch; perhaps it was because I was making this website in XHTML 1.1 rather than XHTML 1.0 Transitional, which is what I've been using for the last year or so. Sure enough, if I change the doctype back to transitional, this problem disappears.

Does anyone know if this "underlining"-of-linked-images is a compulsory feature of 1.1, if I'm trying to do something impossible within its rules?

[Millennium]

This has to do with the fact that images are considered to be inline elements in HTML by default, rather than block elements. Because they're inline, they get "wrapped" in a line of text, and that's where the small bit of text comes from.

Depending on your layout, you may be able to just get away by adding the following to your CSS:

Code:
img { display: block; }

This affects the way images display in the browser in a way that removes the text "wrapper", but it won't work for all layouts. You could also modify the selector to only redo some images (perhaps only images in a sidebar or with a given class) and leave others -such as images interspersed with your text- alone. A better solution would be something like this:

Code:
img { display: inline-block; }

...but unfortunately, this doesn't work in all browsers, so make sure you test it.

The other thing you could do is just keep using the XHTML 1.0 Transitional DOCTYPE. Anything that conforms to XHTML 1.1 will also conform to XHTML 1.0 Transitional, but most browsers treat it a little differently. This different treatment doesn't quite conform to the CSS standard, because it handles images a little differently, but it's enough for most purposes.

[megasad]

Originally Posted by Millennium

This has to do with the fact that images are considered to be inline elements in HTML by default, rather than block elements. Because they're inline, they get "wrapped" in a line of text, and that's where the small bit of text comes from.

Depending on your layout, you may be able to just get away by adding the following to your CSS:

Code:
img { display: block; }

This affects the way images display in the browser in a way that removes the text "wrapper", but it won't work for all layouts. You could also modify the selector to only redo some images (perhaps only images in a sidebar or with a given class) and leave others -such as images interspersed with your text- alone. A better solution would be something like this:

Code:
img { display: inline-block; }

...but unfortunately, this doesn't work in all browsers, so make sure you test it.

The other thing you could do is just keep using the XHTML 1.0 Transitional DOCTYPE. Anything that conforms to XHTML 1.1 will also conform to XHTML 1.0 Transitional, but most browsers treat it a little differently. This different treatment doesn't quite conform to the CSS standard, because it handles images a little differently, but it's enough for most purposes.

The display: block; thing worked almost in the way that I wanted, thank you.

Unfortunately, I have another problem. Here is a sample of what I've done so far. In Safari and Firefox and such, all is well. However, in Internet Explorer in Windows, the header and footer are smashed together and you can see no page content at all. I know I had this working a few days ago, so it's something I've changed in the CSS... But I have no idea what. If anyone can work it out, I'd really appreciate it. Otherwise, I go back to the source and try again.

[megasad]

Originally Posted by megasad

Unfortunately... in Internet Explorer in Windows, the header and footer are smashed together and you can see no page content at all.

I worked out the problem. In the CSS, I'd specified values in excess of 100,000 and IE seems to get confuzzled by such huge numbers. Only problem I have right now is that the Old News page is so very long that the navigation column on the right is not tall enough. I'll work on that later.

Other than that, I've remade my whole dang website so that it uses CSS for structure as well as just font styling. I also went through it all and changed all my markup so that instead of things like < div id="title" >, I simply use those ancient < h1 > tags, which I stopped using years ago.

Anyway, hoo-hah. www.megasad.com

[megasad]

Originally Posted by megasad

I worked out the problem...

Well, dang blast it.

My site works right good in Safari and Firefox and Internet Explorer 6+... But at work today I thought I'd have a look how it fared in Internet Explorer 5.0... It did not fare well. It did not work at all, the navigation bar being missing and the page not even letting me scroll to see if it was at the bottom somewhere...

So, I give up, move back to using tables for structure. This wasn't a complete loss; I'll not need to use as many nested tables as before as I now know how to use margins and padding in CSS to get what I want, so I'll probably only need to use something like:

Code:
<table>
__<tr colspan="2">
____<td id="header"></td>
__</tr>
__<tr>
____<td id="content"></td>
____<td id="navigation"></td>
__</tr>
__<tr colspan="2">
____<td="id="footer"></td>
__</tr>
</table>

Instead of:

Code:
<div id="header"></div>
<div id="container">
__<div id="content"></div>
__<div id="navigation"></div>
</div>
<div id="footer-wrapper">
__<div id="footer"></div>
</div>

Which is still a whole lot leaner than:

Code:
<table>
__<tr>
____<td>
______<table>
________<tr>
__________<td></td>
__________<td id="header"></td>
__________<td></td>
________</tr>
______</table>
____</td>
__</tr>
__<tr>
____<td></td>
__</tr>
__<tr>
____<td>
______<table>
________<tr>
__________<td>
____________<table>
______________<tr>
________________<td>
__________________<table>
____________________<tr>
______________________<td></td>
______________________<td id="content"></td>
______________________<td></td>
____________________</tr>
__________________</table>
________________</td>
______________</tr>
____________</table>
__________</td>
__________<td></td>
__________<td>
____________<table>
______________<tr>
________________<td id="navigation"></td>
______________</tr>
____________</table>
__________</td>
________</tr>
______</table>
____</td>
__</tr>
__<tr>
____<td></td>
__</tr>
__<tr>
____<td>
______<table>
________<tr>
__________<td id="footer"></td>
________</tr>
______</table>
____</td>
__</tr>
</table>

(Excuse the underscores, this here forum refuses to display spaces at the beginning of a line...)