[thelist] CSS positioning variances

[shawn allen]

quoth Rob Whitener:
> Versions are IE 6 and Opera 6.02
>
> The CSS is declared using the style atribute of the <ul> tag:
>
> <ul style="position:absolute; top:450px; left:230px; " >
> 	<li style="text-align:left;">Adapting . . </li>
> 	<li><img src="images/designopt_cr1_210.jpg"></li>
> </ul>

Sorry to change focus a bit, but why are you using an unordered list in
this bit of markup? The rendering's just screwed up in both Safari and
Chimera (OS X; the first is uses KHTML, the latter is a Gecko
implementation), so I can't tell what it's really supposed to look like.
Semantically, though, an unordered list where the first list item is the
title of the second is /not/ correct. I can't infer the relationship
between the text and the image, but I'd say you'd be better off with a
definition list:

<dl>
	<dt>Title</dt>
	<dd><img src="image" /></dd>
	...
</dl>

> I have 3 lists down one side of the page with some text and an image,
> then there are 2 more I want to layout horizontally, with the tops
> lined up with the lowest vertically aligned list. (take a look:
> http://www.designoptions.com/newsite/gallery.htm )

I'm just not seeing it... sorry. Can you illustrate it with a little
ASCII diagram or something? Maybe a comp you're working off of?

> I am not sure what the strict or quirks modes are, and I don't know
> how to switch them on or off.

IE5/win, among other things, incorrectly interprets the CSS box model,
which determines how positioned elements should be placed according to
their left, top, padding and margin properties. IE6 fixed this problem,
but in order to assure compatibility with older sites that depended on
IE5's flaws, they introduced a "quirks" mode that reverts to the old
behavior. This mode is used for HTML documents without a document type
declaration (DTD), or those with a DTD lacking a URI. For more
information on the HTML4 DTDs, check out:

<http://www.w3.org/TR/html4/struct/global.html#version-info> and
<http://www.alistapart.com/stories/doctype/>

> I am having the same kind of problem on another page, a map of the us
> (http://www.designoptions.com/newsite/replocator.htm) where rollover
> images are not lining up the way I expect them in Opera.

In Safari, I'm not even seeing anything (I get a 404 on the map image).
In Chimera, I get a bunch of broken image icons (probably because there
aren't any alt attributes on your area elements).

--
shawn allen
  mailto://shawn@alterior.net
  phone://415.577.3961
  http://alterior.net
  aim://shawnpallen