justsomeguy Posted September 20, 2006 Share Posted September 20, 2006 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? Link to comment Share on other sites More sharing options...
skym Posted September 20, 2006 Share Posted September 20, 2006 Coudln't find an answer...Only that setting display:block to img will resolve the problem. Link to comment Share on other sites More sharing options...
Jonas Posted September 20, 2006 Share Posted September 20, 2006 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> Link to comment Share on other sites More sharing options...
aspnetguy Posted September 20, 2006 Share Posted September 20, 2006 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 Link to comment Share on other sites More sharing options...
Jonas Posted September 20, 2006 Share Posted September 20, 2006 I suppose Strict doctype is stricter about these things. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 20, 2006 Author Share Posted September 20, 2006 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 20, 2006 Author Share Posted September 20, 2006 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? Link to comment Share on other sites More sharing options...
aspnetguy Posted September 20, 2006 Share Posted September 20, 2006 I am guessing a simple margin:0 didn't work? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 20, 2006 Author Share Posted September 20, 2006 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. Link to comment Share on other sites More sharing options...
Jonas Posted September 20, 2006 Share Posted September 20, 2006 How about "display: inline-block;", have you tried that? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 20, 2006 Author Share Posted September 20, 2006 Hmm, no go. I also tried "display: work-damnit;" and that didn't have much effect either. Link to comment Share on other sites More sharing options...
Jonas Posted September 21, 2006 Share Posted September 21, 2006 Hmm, no go. I also tried "display: work-damnit;" and that didn't have much effect either.Not even in IE? Link to comment Share on other sites More sharing options...
aspnetguy Posted September 21, 2006 Share Posted September 21, 2006 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()) Link to comment Share on other sites More sharing options...
justsomeguy Posted September 21, 2006 Author Share Posted September 21, 2006 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? Link to comment Share on other sites More sharing options...
aspnetguy Posted September 21, 2006 Share Posted September 21, 2006 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 21, 2006 Author Share Posted September 21, 2006 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. Link to comment Share on other sites More sharing options...
Jonas Posted September 21, 2006 Share Posted September 21, 2006 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 21, 2006 Author Share Posted September 21, 2006 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now