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

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