Image Gap in IE

I tried to look at this, but the first link is broken.

Sorry the page url is http://www.lamanga4u.com/index-new.html
:bigoops:

Have a look at my post on conditional styles here: http://csscreator.com/node/28011.

IE vs. Firefox/Safari/etc. will always bring some minor differences. Instead of trying to find the perfect CSS to make those differences go away, I correct it specifically for each browser with these conditional styles.

Thanks Aequitas.
Thats an approach I find interesting. I will pop off and learn how to write conditional statements in HTML (didn't know you could). Do you have a code snippet to give me a running start?

However, in this case I can't get rid of the gap in IE even when formatting solely for IE without consideration of other browsers.

Well, I use that technique at my clan's site http://www.damnneardoomed.com as well as http://www.teamserenity.com/IYTYGIB%20Final/ - visit either of these pages to see a working model of the conditional statements.

As far as your second statement, I'm not sure I understand, please clarify. A conditional style will apply only to the browser you specify. Since IE is the only browser that needs "special" consideration, you need not worry about any "other browsers' considerations." But, maybe I'm just misinterpreting what you're saying.

Aequitas, Thanks for the examples! Thats much simpler than I dared hope and I will certainly take this approach in future.

I understand your point of only needing to give IE special consideration - BUT - I still don't know how to get rid of the gap below the top image in the right-hand column when styling for IE.

I don't recall the specific example, but either
a) reduce the amount of padding and/or margin/padding-bottom on the element / the margin/padding-top of the following element
b) use negative values for margin/padding-top/bottom

Edit: In your case you could assign an ID to the top part of the right column's img tag. Then, style the ID appropriately with a negative margin-bottom in the IE-specific stylesheet. This would, with tweaking, remove the space below it.

Thanks to Aequitas for his/her advice! In this case I could not assign an id directly because the right column contained 2 images. So I enclosed the top one in its own div to achieve the same.

STILL COULD NOT MOVE IT.

A friend just came by and told me about an explorer bug. You cannot have any white space in your code between the img tag and the enclosing tag.

As soon as you put just one space after the end of the image tag, the annoying gap reappeared.

Curses Microsoft!

Hmm, interesting. Was it a true space? Or whitespace? It shouldn't matter if you had a carriage return or tab.

I tried inserting a space( in the code with the Space Bar and with a carriage return. All had the same effect. Did not try the tab.

What editor are you using? I always tab and carriage return such as below:



Some text here

Without problem...

I mostly use Dreamweaver 8. I also use tabs and carriage returns to try and keep the code neat.
However, the problem only occurs (or is only obvious/visible) in certain situations.

For example, the bottom image in that column was no problem (or did not show) maybe because there was nothing immediately below it.

Maybe it has something to do with nesting???

Not really sure. I looked at your code a little bit. I have a couple questions for you.
1) Why define text that is a paragraph in a div tag? The p tag is semantically correct for the two paragraphs in the right column.
2) Why put an image in a plain old div? You can define all that you need to for the image by styling the image with an ID.

Edit: Whoops, I didn't notice you had an align="center" on this tag. You should give it an ID ( or class, if that suits ) and define margin: 0 auto 10px auto; in your CSS for it. This will center the images, and you can get rid of your line breaks ( see # 3)

3) Why put two line breaks in and not use one margin-bottom?

The answer to most of your points below is that I am still learning
Not really sure. I looked at your code a little bit. I have a couple questions for you.
1) Why define text that is a paragraph in a div tag? The p tag is semantically correct for the two paragraphs in the right column. Never really twigged the difference - I know I should, but often these get by me in the rush to complete a project
2) Why put an image in a plain old div? You can define all that you need to for the image by styling the image with an ID. I did not know you could do this until this pm. I just did this with a new image I added today.

Edit: Whoops, I didn't notice you had an align="center" on this tag. You should give it an ID ( or class, if that suits ) and define margin: 0 auto 10px auto; in your CSS for it. This will center the images, and you can get rid of your line breaks ( see # 3) Thanks for this . Its only since reading this forum that I realised you could centre stuff this way. I alway struggled to find a neat way to centre a web page not using the html tag.

3) Why put two line breaks in and not use one margin-bottom? Will do. The line breaks were just an expedient while sorted the problem bits out.

Thanks for your help, always very much appreciated.

Ah, understandable. I was frustrated when I found out about semantic markup because I was taught HTML by someone who didn't know what semantic markup was, nor did they give a *beep* once I told them. Just thought you might be unaware, as I once was, and thought you could use the heads up.

can you re-post the thread please? I think you accidentally posted to this one.

Can I repost what thread?

Sorry I misread the email. I thought you had posted a link to a thread concerning correct syntax.

That Mysterious Gap under Images

See if that doesn't explain what's going on.

It is a not-good idea to jigger the html formatting to rid yourself of the white space.

cheers,

gary

Thanks Gary that worked nicely. Have been able to unjigger my html

"The bottom of the object lines up with the baseline of the parent element (implicit) text"

I assume the above is generally true and not just for IE, so why does the mysterious gap only show in IE?

I have forgot most of what I knew about just when an inline box is created. Most browsers don't create one unless there's an explicit bit of text, even if only a white space. IE, though, always creates the anonymous inline box. I may have a detail or three wrong—my memory being bad—but it's a working hypothesis.

Allowing for the image's vertical alignment is now just automagical.

cheers,

gary