IE6 inline img problems (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

martinjgriffiths -> IE6 inline img problems (2/11/2004 6:10:46)

ARGGGH! Please help! losing my hair!

Please go to the following link...

http://www.markcain.info/rjb

You will see some right aligned text which forms the basis of a pop-up menu, i have a column of very small blocks which are simply inline img's as part of each para block.

The problem is in IE PC the line-height is trashed by these small img's, not a problem in IE5MAC or Safari or Mozilla!

Here's an excerpt of my styles...

form, input, p {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
}

body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: #E4E8E9;
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
}

p.body1 {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
color: #666666;
text-align: left;
}

p.body2 {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
color: #666666;
text-align: right;
}

p.head1 {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
font-weight: bold;
color: #223D8A;
}

Many thanks



bobby -> RE: IE6 inline img problems (2/11/2004 17:27:16)

I had a similar problem recently, where IE was adding a margin around four images in a table.

None of the other images on the page were affected, and the problem only showed up in IE...

It was very frustrating, never found an answer... I had to redesign to make the flaw look like it was part of the page.

[:'(]



Giomanach -> RE: IE6 inline img problems (2/12/2004 3:57:39)

Try inserting the following into your CSS stylesheet:

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

And Also, your style sheet re-arranged:

body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: #E4E8E9;
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
}

form, input, p {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
}

p.body1 {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
color: #666666;
text-align: left;
}

p.body2 {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
color: #666666;
text-align: right;
}

p.head1 {
font-family: Arial, Helvetica, Sans-serif;
font-size: 11px;
line-height: 16px;
font-weight: bold;
color: #223D8A;
}

It's just a personla preference of mine, but don't use <p> within Div Layers, try using the <br> instead, this way you don't get so many line breaks so easy.

Dan



gorilla -> RE: IE6 inline img problems (2/12/2004 9:55:40)

Your problem lies with how line height is interpeted. you also need to remember that IMG is an inline element.


For example in Mozilla in 'standards (i.e. non-quirks) mode', the line-height of a parent block level element specifies a 'minimal' line height for any inline content. Ergo IMG will have a line-height of at least that of it's parent.

If the image is smaller than the line-height, then there will be space above the image. However, this is normally only a problem for very small images, and can be got round by specifying a line-height of zero on the parent element. Moreoever inline elements are (by default) vertically aligned on the baseline of a line box.

On the other paw, IE, when rendering a block level elememt will, if the block element contains only inline replaced elements such as IMGs will (by default) align them with the bottom of the line box.

You can try explicitly specifying 'vertical-align:bottom;' on the IMG it should lose any bottom space. I don't guarantee this will work as I've had variable results to put it mildly.

Some reading material for you:

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

Of course you can then have the problem of what do you to allow space for descender strokes to be rendered correctly for example in a <td> or <layer> one possible solution is this:

{ vertical-align: bottom; }

But that can lead to huge cross browser problems. You have to remember that layers were a proprietary "extension" dreamed up by some whizz kid in Netscape who should have (IMO) been immediately defenestrated before word got around about them. Alas that didn't happen, what also didn't happen is that support for has never really been fully integratred into the spec. Where line-height is greater than image height you may have to use

display: block;


To conclude try messing with this (done off top of my head so no guarantees:)

display: block;
margin: 0;
border: 0;
padding: 0;


Eric Meyer has done some work on this, and written one of his usual very clear articles about how this particular box model works, link to it is here:

http://www.meyerweb.com/eric/css/inline-format.html

Finally I have to ask - In the interests of avoiding weeping, wailiing, gnashing of teeth, and loud utterings of naughty words, why not just use lists and set the bullet type?

Mhaircaish



gorilla -> RE: IE6 inline img problems (2/12/2004 10:06:22)

Oops I forgot to say "Welcome to Outfront" and do please let us know how you got on.

M



Giomanach -> RE: IE6 inline img problems (2/12/2004 10:07:22)

quote:

To conclude try messing with this (done off top of my head so no guarantees:)

display: block;
margin: 0;
border: 0;
padding: 0;


Mhaircaish, you are almost right my furry friend[:)], you missed the px off, and for total lack of margins you need:

margin: 0px 0px 0px 0px;

Dan



gorilla -> RE: IE6 inline img problems (2/12/2004 10:16:27)

quote:

ORIGINAL: Giomanach

Mhaircaish, you are almost right my furry friend[:)], you missed the px off, and for total lack of margins you need:

margin: 0px 0px 0px 0px;

Dan


Yes its nice being furry again dan even if I do get waterloggwed on a daily basis [:D] - it is example code only, however I will point out that when you set margins you can do it in shorthand by

margin: 0;

The UA will then apply that to all four margins. Handy when you want to shave bandwidth. Very handy when running client side code as the UA doesn't have to worry about sticking those values into an array. Worth remembering. As a coding stylistic point I often do it as you've done it above - depends on circumstances and who'll be maintaining it.

Note to martinjgriffiths: Integrate Giomanach's suggestion into your code you can always edit it after testing. After thinking about it you may have to fiddle a bit with the margins to get IE to play nice.

Also don't forget to define the html element with the same code as you've done for your body to avoid inheritance and future compatibility problems. (XHTML 2.0 and XML.)


M



c1sissy -> RE: IE6 inline img problems (2/12/2004 17:53:28)

quote:

ORIGINAL: gorilla

Your problem lies with how line height is interpeted. you also need to remember that IMG is an inline element.


For example in Mozilla in 'standards (i.e. non-quirks) mode', the line-height of a parent block level element specifies a 'minimal' line height for any inline content. Ergo IMG will have a line-height of at least that of it's parent.

If the image is smaller than the line-height, then there will be space above the image. However, this is normally only a problem for very small images, and can be got round by specifying a line-height of zero on the parent element. Moreoever inline elements are (by default) vertically aligned on the baseline of a line box.

On the other paw, IE, when rendering a block level elememt will, if the block element contains only inline replaced elements such as IMGs will (by default) align them with the bottom of the line box.

You can try explicitly specifying 'vertical-align:bottom;' on the IMG it should lose any bottom space. I don't guarantee this will work as I've had variable results to put it mildly.

Some reading material for you:

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-line-height

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

Of course you can then have the problem of what do you to allow space for descender strokes to be rendered correctly for example in a <td> or <layer> one possible solution is this:

{ vertical-align: bottom; }

But that can lead to huge cross browser problems. You have to remember that layers were a proprietary "extension" dreamed up by some whizz kid in Netscape who should have (IMO) been immediately defenestrated before word got around about them. Alas that didn't happen, what also didn't happen is that support for has never really been fully integratred into the spec. Where line-height is greater than image height you may have to use

display: block;


To conclude try messing with this (done off top of my head so no guarantees:)

display: block;
margin: 0;
border: 0;
padding: 0;


Eric Meyer has done some work on this, and written one of his usual very clear articles about how this particular box model works, link to it is here:

http://www.meyerweb.com/eric/css/inline-format.html

Finally I have to ask - In the interests of avoiding weeping, wailiing, gnashing of teeth, and loud utterings of naughty words, why not just use lists and set the bullet type?

Mhaircaish



Mhaircaish:
Thanks so much for the links that you have provided. I'm always looking for new links to learn from for CSS, but you always manage to provide some that I have never come across!

How are you? Making those laps around the pool ok?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625