Absolute positioning problem, IE drops 1 graphic 12 px (using css absolute pos) Options

[chris_p]

Hi. I've used Image Ready to whip up some html using cascading style sheets. I have all my graphics laid out with absolute positioning, except the last graphic (undershadow.jpg) is 12 pixels lower in IE. Firefox puts it in the right spot.

www.homeostatic.org/problem/check.html

Can anyone tell me how this is possible? The layer id for the graphic is #undershadow. It's a small page, so the code's simple. How could one graphic go astray when it is set up like all the rest?

-Chris

[pandy]

Hi. I've used Image Ready to whip up some html using cascading style sheets. I have all my graphics laid out with absolute positioning,

Bad tool and bad method. Sorry, but I speak the thruth.

except the last graphic (undershadow.jpg) is 12 pixels lower in IE. Firefox puts it in the right spot.

http://htmlhelp.com/faq/html/images.html#image-nospace
TD or DIV - matters not.

Also, you use no doctype. That will put browsers in quirks mode which is when they display the most rendering differences.
http://hsivonen.iki.fi/doctype/

[chris_p]

Bad tool and bad method. Sorry, but I speak the truth.

Why bad tool, and especially why bad method?

Also, you use no doctype. That will put browsers in quirks mode which is when they display the most rendering differences.

I read through all the links you posted, Pandy, but I'm still at a loss. From my point of view, the code is so simple and straightforward - I couldn't see where there was any room for misinterpretation by IE on that last graphic.

If apply strict DTD it is worse, and loose or transitional DTD makes no difference.
So, DTD or no DTD, I still end up with a problem.

[pandy]

Why bad tool, and especially why bad method?

Simply put because it generates shitty HTML.

I read through all the links you posted, Pandy, but I'm still at a loss. From my point of view, the code is so simple and straightforward - I couldn't see where there was any room for misinterpretation by IE on that last graphic.

It doesn't have to do with Strict and Transitional. Browser use how the doctype is written as a trigger for their rendering modes. It's unlucky it is this way, but it is. In the long run you'll get the most consistent result with Standards (AKA Strict) Mode. You can have this with both Strict and Transitional doctypes.

So, DTD or no DTD, I still end up with a problem.

I think you missed this link.
http://htmlhelp.com/faq/html/images.html#image-nospace

[chris_p]

Thanks. I re-read that last link (at first I thought it only applied to tables), and removed the last tab before the </div> on that last <img>. All fixed! I can get Image Ready to leave out the tabs, but now you have me worrying about using Image Ready at all. (Dreamweaver's out of the question until I have a spare $500 (AUD) lying around.) The big question I have though is what is wrong with the method - i.e., using absolute positioning? I though this would be ideal.

Thanks again.

p.s. I will use the Transitional (loose) doctype. At least that didn't screw it up.

[pandy]

Thanks. I re-read that last link (at first I thought it only applied to tables), and removed the last tab before the </div> on that last <img>. All fixed!

There you go!

I can get Image Ready to leave out the tabs, but now you have me worrying about using Image Ready at all. (Dreamweaver's out of the question until I have a spare $500 (AUD) lying around.)

And it ain't worth it. Not for its CSS skills anyway.

The big question I have though is what is wrong with the method - i.e., using absolute positioning? I though this would be ideal.

Yar. If you are going to print a poster. Absolute positioning is very powerful and can be very useful. It can be used in many different ways. I admit I didn't look closely at your CSS but what GoLive (and DW and most other WYSIWYGs) usually do is this. They basically position every item on the page relative the top left corner. What you get is a totally rigid layout. The page can't adopt to different window sizes. If the user changes the text size the layout often breaks to pieces. Text overflows in all directions, overlapping occurs.... Armageddon in layout land. To work optimally a page needs to have a flow. If you try to lock everything down it becomes brittle. The key is to allow sections to resize if needed and to move around if needed but still work together as a whole.

There are many good text editors. Most are free or very cheap compared to DW.

[chris_p]

Thanks for the tips. I'll definitely keep flexibility in mind for future sites. For this project I'll include overflow:auto on all the text, so it should be safe.

[Frederiek]

Read upon Liquid design.