Forum Moderators: open
<img src="blank.gif" height="5" width="1" alt="" /><br />
<img src="blah.gif" height="10" width="500" border="1" alt="" /><br />
<img src="blank.gif" height="5" width="1" alt="" /><br />
<img src="blah.gif" height="10" width="500" border="1" alt="" /><br />
<img src="blank.gif" height="5" width="1" alt="" /><br />
<img src="blah.gif" height="10" width="500" border="1" alt="" /><br />
This looks nice in all the other browsers, but not Mozilla. Mozilla displays the images with some "air", whereas the other browsers display them tightly.
So, in Mozilla I have to use a CSS class:
.m {
display: block;
line-height: .1px;
}
The image section is wrapped in a SPAN tag with the assigned m class. Now it is tighter, but still not good.
I've tried to set margin, padding, and anything else I can think of to '0px', but it doesn't make any difference.
Any suggestions?
Line height is the height of the 'text container' .. That's why a <br /> leaves a space, even though you really don't have any text or white space characters ..
(That's not the official explanation, and I'm sure someone else can give you a better and more accurate answer.)
It was a good idea though ..
I setup a test page to see what was what... lol! I tested with Opera 6.03, IE 6 and Mozilla 1.03rc - for control, I added a body style of {margin:0; padding:10px;} since IE adds some extra room at the top. All things now being equal, I could not see any difference in display between the three browsers.
I measured the placement using Screen Calipers, and came up with identical results. The border of the second image (blah.gif) was exactly 15px. down from the top of the display (10px padding + 5px blank.gif)- the total height of the "visible" grouping (img#2 through img#6) totalled 46px.
What version of Mozilla are you testing with? I tried to do a screen capture (twice!) but as is my usual method of operation, I had too many programs opened and crashed.
I had all three browsers lined up and measured using the screen caliper utility. Again, all three were identical.
I could not see any difference in display between the three browsers
I couldn't either, until I added the XHTML Strict DOCTYPE to the document.
DrDoc, put the make the images display as block-level elements and take out the line breaks, like so:
<html> <body>
<head>
<title>Untitled</title>
<style type="text/css">
.m img {
display: block;
}
</style>
</head>
<span class="m">
<img src="blank.gif" height="5" width="1" alt="" />
<img src="blah.gif" height="10" width="500" border="1" alt="" />
<img src="blank.gif" height="5" width="1" alt="" />
<img src="blah.gif" height="10" width="500" border="1" alt="" />
<img src="blank.gif" height="5" width="1" alt="" />
<img src="blah.gif" height="10" width="500" border="1" alt="" />
</span>
</body>
</html>
Note that you can also drop the line-height on the declaration.
This should solve your problem (I'm testing in the same browsers Papabaer is).
Problem is that I have tons of images on the page, and I need to find something that will fix the Mozilla layout, but not mess it up in Opera/IE/NN
And, by the way, I'm testing in Mozilla 1.0 rc2
I am setting the "display: block" directly on the images that are children of the m-classed span, and not relying on the display property to cascade. None of the other images in the document should be affected by the style declaration, since it is specific to those images in m-classed elements. It's a subtle difference, so I just thought I'd ask.
It seems to work for me, but as you noted I am testing on a different version of Mozilla.
Anyway, I tested .. and it works! ;)
However, this is what the style looks like:
.m, .m img {
display: block;
}
Then, for that block of images I did exactly what you suggested .. For the other images (they are all single ones, but spread out across the page) I simply added the m class to the IMG tag ..
Now it works .. and now it looks the same in all browsers. Plus I saved a few bytes worth of code!
Thanks for your help!
