Browser Width Redux

[foxgrrl]

Ok, let's figure out the best layout for my posts, by empirical test.

How many columns of photos do you see?

---

---

[Poll #881906]

Comments

[digitalsidhe.livejournal.com]

Using Firefox 2.0 on Windows XP...

On my friends page, I get pretty much the worst of both worlds. One row of 23 photos, then a second row with the last photo, plus a nasty horizontal scroll-bar.

On the entry-and-comments page (using Xcolibur), it looks pretty good; I see rows that automatically re-group themselves for my browser's width. (By default, 8x3.)

[arethinn]

"Using Firefox 2.0 on Windows XP... On my friends page, I get pretty much the worst of both worlds."

Odd! Under the same conditions I see 9x3 in both places.

P.S. I saw in Julia's appointment calendar (ha) the other day that you folks are having a housewarming on the 16th. Would it be OK if I swing by to say hi? There are probably some other folks I know there besides you and fey and Julia.

[digitalsidhe.livejournal.com]

Odd! Under the same conditions I see 9x3 in both places.

Then it must not be truly "the same conditions" — my guess is that you use a different friends-page layout than I do. (Ha! foxgrrl, take note! People can customize their layouts quite a bit in LJ... I say this in a sympathetic tone, because it's something I've also confronted when trying to do layout in my posts.)

So, yeah... my friends-page layout is based on one of the old S1 styles... I think it's "Tabular Indent", but then I've tweaked it some...

Sure, swing by the housewarming. It's actually a mixed housewarming and "wishmas"; I tell you what, go here for details.

[arethinn]

"Then it must not be truly "the same conditions""

Well, true, obviously. But under the same two particular conditions that you mentioned, anyway.

[digitalsidhe.livejournal.com]

Yeah. I was just trying to segue into exactly what the difference (probably) was.

[digitalsidhe.livejournal.com]

Let's hear it for cross-platform compatibility and consistency!

[foxgrrl]

I see what you mean† That's unexpected. It must be something with the StyleSheet

I commented out most of the photos, and reloaded your friends page several times. (Resizing browser window too.) It seems that only the very last floating photo is wrapped to the next line; Nothing else.

[Time passes…]

Eureka! I found the problem. All of my images were posted inside of <a href="foo"></a> anchors, so that you can click on them, and load the big image. If I remove all of those, and just leave the images bare, floating, then your friends page wraps them correctly.

So, the issue is probably buried somewhere in this:

<style>

   <!--
    body,td,p { color:#00FF99; font-family:Verdana, Arial, Helvetica, Sans-Serif; font-size:8pt }
    h1,h2,h3,h4 { color:#CCCCFF; font-family:Verdana, Arial, Helvetica, Sans-Serif }
    h1 { font-size:18pt; font-weight: bold }
    h2 { font-size:16pt; font-style: italic }
    h3 { font-size:12pt }
    h4 { font-size:10pt }
    a { color:#AA77FF; font-family:Verdana, Arial, Helvetica, Sans-Serif; font-size:8pt; text-decoration:none }
    a:visited { color:#CCCCCC; font-family:Verdana, Arial, Helvetica, Sans-Serif; font-size:8pt; text-decoration:none }
    a:active { color:#FF00C0; font-family:Verdana, Arial, Helvetica, Sans-Serif; font-size:8pt; text-decoration:none }
    a:hover { color:#FF00C0; font-family:Verdana, Arial, Helvetica, Sans-Serif; font-size:8pt; text-decoration:underline }
   -->
  </style>

[…]
<link rel="stylesheet" type="text/css" href="http://stat.livejournal.com/??lj_base.css,contextualhover.css,controlstrip.css,controlstrip-dark.css,controlstrip-dark-local.css,controlstrip-local.css?v=1162588119" />

Also, an unrelated footnote. When you use LJ-Poll tags in a posting, apparently the LJ HTML engine re-mangles all of the rest of your post in the rewrite. My image tags changed from this:
<IMG SRC="http://www.arclight.net/~julia/lj/2006_Dec/Demo/5p100/dsc_2793_99x150.png" width=99 height=150 alt=""/>
to this:
<img width="99" /="/" alt="" src="http://www.arclight.net/~julia/lj/2006_Dec/Demo/5p100/dsc_2793_99x150.png" height="150">

---

† http://digitalsidhe.livejournal.com/friends?skip=16 (out of date by the time anyone reads this)

[digitalsidhe.livejournal.com]

Regarding the changed image tags at the end:

Awww, that parsing bug with the final XHTML slash is almost cute. I mean, the parser is trying so hard to maintain every attribute you entered, and the poor innocent little thing just doesn't realize that there's more SGML in heaven and earth than is dreamt of in a strict HTML-only spec.