WTF, DOCTYPE?

[justsomeguy]

I was pulling my hair out over this for a while until I decided to try changing the doctype. Can anyone explain why this behavior occurs in Opera or Firefox:http://manchine.net/w3/loose.htmlhttp://manchine.net/w3/strict.htmlI had several images on the page, and all of them had 4 pixels padding underneath them. Some were links, some weren't. Why are the browsers compelled to add 4 pixels underneath the images if the doctype is strict? Am I missing something?

[skym]

Coudln't find an answer...Only that setting display:block to img will resolve the problem.

[Jonas]

I seem to recall Skemcin mentioning something like this once, and it has to do with the tables, not the images. Try putting a line break after the images.

<tr><td><a href="home.php" style="display: block;"><img src="images/home.gif" alt="Home" onmouseover="this.src='images/home_over.gif';" onmouseout="this.src='images/home.gif';"></a><br /></td></tr>

[aspnetguy]

Ah yes I remember that...it has been a long time since I used tables but I rememeber that being an issue from time to time. I didn't realise it was effected by what doctype you use since I always use XHTML strict

[Jonas]

I suppose Strict doctype is stricter about these things.

[justsomeguy]

Actually, I put the table there as a test after everything else wasn't working. I originally just had 7 images in a single td, but added the nested table to try and force it. I'll minimize the code and see what I can do, I'm also nearly positive I tried display: block on the images. I know I tried it on the anchors, I'll try it on the images as well.

[justsomeguy]

Alright, I updated the examples online. It looks like the display: block on the images did the trick, I guess I didn't try that one. Adding the br didn't do anything, I did try that one. I updated online with that as well.So.. if an image is displayed inline, under strict, it gets a margin under it? That's the rule? What if you want an inline image with no margin?

[aspnetguy]

I am guessing a simple margin:0 didn't work?

[justsomeguy]

No, I added that on there as well. Padding too. The three different versions on the pages include a table on top with br tags at the end, then a div with block-level <a> elements and no margin or padding, then a div with block-level <img> elements. I stripped the javascript on the last two as well.

[Jonas]

How about "display: inline-block;", have you tried that?

[justsomeguy]

Hmm, no go. I also tried "display: work-damnit;" and that didn't have much effect either.

[Jonas]

Hmm, no go. I also tried "display: work-damnit;" and that didn't have much effect either.

Not even in IE?

[aspnetguy]

Hmm, no go. I also tried "display: work-damnit;" and that didn't have much effect either.

ROTF, that is hilarious

Not even in IE?

Surprising since IE will execute this,

background:url(java\nscript:alert())

[justsomeguy]

Here's an explanation of why it happens:http://developer.mozilla.org/en/docs/Image...Mysterious_GapsWhich still leaves the question, what do you do if you want inline images with no margins?

[aspnetguy]

Here's an explanation of why it happens:http://developer.mozilla.org/en/docs/Image...Mysterious_GapsWhich still leaves the question, what do you do if you want inline images with no margins?

I guess you couldn't use tables.

[justsomeguy]

Yeah. Apparently, the answer is "wait for CSS3". This is my major issue with most standards bodies - they just don't take into account a lot of (most?) situations that are very commonly used. A 3-column layout is a great example.

[Jonas]

Couldn't you use list items instead of tables though?http://www.cssplay.co.uk/menus/menutwelve.htmlhttp://www.cssplay.co.uk/menus/example_flyout.html

[justsomeguy]

That's a good looking menu, but a little overkill for this situation. I don't even want or need the table (I removed it on the examples), I was just trying to use the table to try and force the positioning. All I wanted was 7 images on top of each other with no margins between them. Setting the images to be block elements removed the margin.