IE Vertical Align Troubles - V Urgent

[Van Helsing]

Hey people,

Upon viewing one of many emails I create for clients in IE, (the worlds most popular, but completely retarded browser) strange things happen.
(and yes, I'm using Windows Vista Home Premium along side Mac OS X 10.4.9. and, no it's not fun lol)

In my code, I have every possible thing pointing at the right hand column for it's table cells and images to be aligned to the TOP. Including several HTML and CSS tags.

Here is an image showing my problems:

http://ve-designs.net/uploads/VistaIEWeird.jpg

And then here is the email in question online:

http://ve-designs.net/wyse/


The problem is, no matter what I apply to the right hand column, because the content overflows in the content cell (the biggest, middle cell) IE decides to not align the right hand column to the top like i've told it to; but instead, because the content overflows it spreads out each element of the right hand column because of the sudden gain in height for the page.

Unfortunately, I can't get around the content overflowing, but why on earth can't IE see that I've told it to, in multiple cases, to align things to the top instead of spreading them around and resulting in gaps. (However even stranger, the most apparent gaps, in the top right yellow box, don't even appear at the bottom of every image. It goes IMAGE / GAP / IMAGE / IMAGE / GAP / IMAGE / IMAGE.

If any of what I say is making sense to anyone, and if you know of some type of fix to get it working,

PLEASE get in contact with me asap, this is extremely important.

Thanks,
-Van

[Fang]

img {
display:block;
vertical-align:top;
line-height: 0px;
background-position: top;
}

http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

[Van Helsing]

Thanks Fang,

That sorted out quite a bit, however gaps still persist!

Image:

http://www.ve-designs.net/uploads/VistaIEWeird2.jpg

Web:

http://www.ve-designs.net/wyse

I have read through that Mozzila doc, and have applied the rules it stated to everyone of my images and every one of my table cells (except the content cell, because display:block; would obviously make that go to hell) yet still in the right hand column there are gaps - illustrated by the highlight - the blue should be constant, no white gaps if it was working good, but alas this is not.

I shall keep going with what I have, applying more rules etc,

any other help?

Cheers,
-Van

[Fang]

Try changing the vertical-align:top; to bottom

[Van Helsing]

Hi,

Tried it before - no luck. Whilst the display:block; add-on has fixed gaps at the top right yellow container, as I've said before, it hasn't fixed the lower portion of the right hand column.

I'm thinking that the content area has something to do with it - although it is already known that making the content cell taller will result in larger gaps on the right hand side - what is making the images on the right hand side not align to the TOP of the cell that they are in?

After applying the block style to all affected images and cells and seeing no results, I'm really thinking that this is a bug within IE itself.

Thanks for your continuing help,
-Van

p.s, anyone have any other ideas at all though?

[WebJoel]

I have read through that Mozzila doc, and have applied the rules it stated to everyone of my images and every one of my.... this catches my atttention... you are padding or margin-ing things?

Try removing all margins and paddings, then re-margining and re-padding:

You first line in the CSS:

* {margin:0; padding:0}

This strips ALL margins and ALL padding from EVERY element. Different browers apply different margins & padding to their defaults. Make them be "zero" first, levels the ground for re-stating everything 'the same' and this is quite effective x-browser.

[Fang]

Look good in IE6 and IE7 on XP, although loading appears to halt after displaying half the menu. Not all images load every time the document is reloaded. Also true of Opera.

[Van Helsing]

Hey,

Thanks for the CSS tip - unfortunately nothing happened,

my gaps are still present:

Image: http://ve-designs.net/uploads/VistaIEWeird3.jpg


Still no clue as to what's going except for more solid evidence of IE being retarded, heh


Thanks again,
-Van

[Fang]

It's your table layout stretching to accommodate the text in the left 'column'.
All the browsers have it to some degree or another.
Solution is to rewrite with CSS

[Van Helsing]

Hey,

Yeah, I know the cells stretch to accommodate - but I've given all the cells fixed heights and aligned all the images inside them to the top, so that no matter how much the left content area stretches down, the right column would stay perfectly intact and aligned to the top.

This works in Safari, FireFox, Camino and Opera for the Mac,
and FireFox and Opera for the PC-

It's only the browser I despise: Internet Explorer that exhibits problems,

But anyway, I've managed to minimise the gaps to a very small, relatively unnoticeable state by reducing the content height - yet my hatred for Microsoft software grows and grows.

And believe me, I would work this as CSS - however I can't as the client wishes it to be in standard tabular HTML as some e-mail readers on the PC can't interpret CSS either not very well or not at all.

Thanks for the help,
-Van

[Fang]

If you must use tables then this is all you need:<table border="0" cellpadding="0" cellspacing="0" summary="">
<tbody>
<tr><td colspan="2">header image</td></tr>
<tr><td>main image and text</td><td>menu and images</td></tr>
</tbody>
</table>

[Van Helsing]

Hey,

Unfortunately nothing has changed when adding summary="" and <tbody> to my tables,

Link: http://ve-designs.net/wyse/

Image: (Same as the last image I posted, gaps are still present in the same places)


Thanks for the help,
-Van

[Fang]

I think you misunderstand. The code for the table is ALL you need, no other rows or cells.

[Van Helsing]

I FOUND A WAY AROUND IT!!

By re-creating the entire page, using your table as a base, making more rows and cells to fit my needs - this approach this did not work, as you can see here:

http://ve-designs.net/wyse/Untitled-1.html

There ares still gaps in between the 5 side images.

So i thought, ok, I'll do the whole thing from scratch again, and make it über basic.

I ended up with this:

http://ve-designs.net/wyse/Untitled-2.html

GREAT! I thought, problem solved!

But what had i done?

Where I talk about "This cell here should be the only one that stretches as the content grows. " I realised I had accidentally put 5 <br /> (returns) after the text.

Now, it seems that when the right column is filled with content that makes the height of it greater or equal to the height of the main content column (from the bottom of the main image downwards), the gaps are eradicated!

But instead of putting <br />'s i thought a blank spacer.gif image would do the trick.

So I went back to my original page, got the height value for how much the main content column was taller than the right hand column and made a blank <img src="spacer.gif" width="width of column" height="the height value" />

and VOILA! The blank image filled the excess space that the images above were spilling over into the last time and solved the problem!

great thing now is, I can change the height of that blank image to suit any occasion!

w00t!

Thanks for the help guys,
-Van

*is now happy he has beaten IE*