[Brown]

ii'm having issues with mozilla when its running in a compliant mode. i get gaps round images which means that they won't lie neatly on top of each other.

the fix i've found is to get the browser to render that page in quirks mode and then it all fits fine.

anyone experienced this and know of a compliant fix?

[lucidcreations]

have you tried just zeroing the <img /> tag borders and margins?

[Brown]

in the compliant environment i'm working the img tag does not have a border attribute.

[lucidcreations]

no in CSS :-

img
{
border : 0px;
margin : 0px;
}

[Brown]

yes. everything has been set to 0 that could possibly have a 0 set - it did nothing so i took them all out.

i've found references to this being an issue when using images in tables using mozilla - i've been there before and a 'vertical-align: bottom' brought everything into line, but these images are notin a table. ie and opera have no issues with it.

[Stickman]

How are the images positioned?

Give us a look, brown. You big tease.

[lucidcreations]

bloody browsers........

[Brown]

http://dev.flark.net/temp/temp2/pageTeaser.html

like i said above, force mozilla into quirks mode and all is fine

[Brown]

Originally Posted by Stickman

Give us a look, brown. You big tease.

css porn...

[Stickman]

@import url(jwTopNav.css);
@import url(jwLinks.css);
@import url(contentMenu.css);
@import url(pageTeaser.css);
@import url(imageHeader.css);...........

Porn overload.

[Stickman]

Too much to wade through. Try image {display: block} on something. If you've set the margins and padding to 0, that's what it will probably be. Or maybe your floats are wonky.

[Brown]

Originally Posted by Stickman

Try image {display: block} on something

...well it made the dog sit.

[Brown]

Originally Posted by Stickman

@import url(jwTopNav.css);
@import url(jwLinks.css);
@import url(contentMenu.css);
@import url(pageTeaser.css);
@import url(imageHeader.css);...........

Porn overload.

the only one currently applied to this page is:

@import url(pageTeaser.css);

all other have been removed for the sake of this example.

[Luke Redpath]

Originally Posted by Brown

...well it made the dog sit.

Images are inline by default, and therefore rest on the baseline, hence the gap underneath. This is why v-aligning it to the bottom removes it, and also why changing to display as a block element also works.