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

[lokifox.livejournal.com]

On my friends page I see one row of 22 and one row of 2, on the page for commenting I see 2 rows of 12.

[lokifox.livejournal.com]

Oh yeah, and using Firefox 2 in Windows XP I get a scrollbar and it not resizing properly under my own style, but with IE it does.

[tastyeagle.livejournal.com]

When looking at my friends page, I see a 6 column, 4 row grid of photos.

When looking at the comment page, I see a grid 5x5 (mostly).

Firefox 1.5.0.8 on a Windoze box.

[heron61.livejournal.com]

Friends page: 9x3, comments page 7x4

[hummingwolf.livejournal.com]

I was going to say "I see the same thing as tastyeagle till my brain kicked in and I realized that on my friends page I see a 6 row, 4 column grid. Comment page is still 5x5 (mostly).

Using IE 6 on Windows 98 SE.

[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.

[centauress.livejournal.com]

Once again, you have a poll with a ambiguous answer. Is it columns, then rows, or rows, then columns? ^-^

I see eight columns.

[panorphelia.livejournal.com]

Well done! :) Safari crashed and that *never* happens ...

I get variable columns but the whole thing resizes very nicely.

-- Allie

Date/Time: 2006-12-04 14:37:51.349 -0800
OS Version: 10.4.8 (Build 8L2127)
Report Version: 4

Command: Safari
Path: /Applications/Safari.app/Contents/MacOS/Safari
Parent: WindowServer [61]

Version: 2.0.4 (419.3)
Build Version: 7
Project Name: WebBrowser
Source Version: 4190300

PID: 211
Thread: 0

Exception: EXC_BAD_ACCESS (0x0001)
Codes: KERN_INVALID_ADDRESS (0x0001) at 0x1db2a834

Thread 0 Crashed:
0 <<00000000>> 0x08083fff 0 + 134758399
1 com.apple.WebCore 0x953e4f64 khtml::InlineFlowBox::extractLine() + 44
2 com.apple.WebCore 0x953e4f64 khtml::InlineFlowBox::extractLine() + 44
3 com.apple.WebCore 0x9536df98 khtml::RenderBlock::determineEndPosition(khtml::RootInlineBox*, khtml::BidiIterator&, int&) + 92
4 com.apple.WebCore 0x9534ca31 khtml::RenderBlock::layoutInlineChildren(bool) + 1469
5 com.apple.WebCore 0x95349c3a khtml::RenderBlock::layoutBlock(bool) + 568
6 com.apple.WebCore 0x953499fe khtml::RenderBlock::layout() + 28

[arethinn]

"I get variable columns but the whole thing resizes very nicely."

Oh, this is supposed to flow when you resize? *fiddles around with the window* Well then! I should amend my original comment that I see 9x3 when the window is maxed (1280x1024). If I make it smaller, the table smallers too (I got various numbers of columns and rows, 5x5 I know I saw at one point, but they were all even and handled properly AFACT).

[wingedelf.livejournal.com]

7x4 on my friend's page, 10x3 on yours, 9x3 on your comment page. Weirdness abounds.

[bovil.livejournal.com]

Wrapping is working fine for me on Safari, 11x2 (+2) on my-style (default format, actually) comment page, 10x2 (+4) on my "friends" page.

[wolphin.livejournal.com]

I need a "none of the above" checkbox - On my friends page I get 22 and then 2. On your LJ page I get 3 rows of 7, then 3.

[gaelfling.livejournal.com]

on my friends page view it's two rows of 11 plus a third row - when posting a reply it is two solid rows of 12

that help?

[gaelfling.livejournal.com]

ah yes- as well: Firefox 2.0 on XP sp1-

[solarbird]

Safari on OSX 10.3.9, direct view: six columns, four rows.
Safari on OSX 10.3.9, friendslist view: five columns, five rows.
Firefox at school on Windows 2000, friends view: 22 columns, two rows. (One row of 22 pictures, one of 2.)
Firefox at school on Windows 2000, direct view: five columns, five rows.

[arethinn]

Oh, fun. I see 10x3 if I load just your journal (vs. on my friends page or the comments page). But what I was meaning to comment in this one is that pictures like this make me figure I should probably just put down my own camera and back away slowly.

[idea-fairy.livejournal.com]

On the Friends page I see 5 x 5 with a corner missing because there are only 24 photos. This with one of the default styles or something.

If I hit the link to view the comments or to post a comment I see 6 wide by 4 high. This with your style (the pictures of the mushrooms).

If I maximize the browser on the comments page I get 7 wide by about 3 1/2 rows high.

This with (from the Help menu)

Mozilla 1.7.8
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.8) Gecko/20060926 Debian/1.7.8-1sarge7.3.1

Now I'm wondering whether to fire up the laptop (Firefox on Kubuntu 6.10) to see if it's different there.

[anaisdjuna.livejournal.com]

5x5 with Windows XP
9x3 with Safari

I think your geek obsession with El J photo layout perfection is very cute/endearing. I'm in awe of your geek powers. *bows tibetan thai style*

[oygevalte.livejournal.com]

On your page I got 7 by (mostly) 4; on my friends page I got 6x4.

[kengr]

With my normal "style=mine" I got the 8x3 on the laptop, and 10x2 (and a bit) on the desktop.

But when viewing in your style, the rows are 7x3+ on the laptop and 9x3- on the desktop.

[glitterychaos.livejournal.com]

7x4 mostly, while in the computer lab at school, using firefox. First time I've been online in what seems like weeks :/ The layout looks good here, the pics are big enough to get a sense of the picture, but small enough to load fast and not take up tremendous amounts of space.