I need a css detective...

Miscellaneous and Personal Stuff I Must Share
1

I am not the world’s leading expert on css, unfortunately. My homepage has a weird text size issue and I’m trying to figure out what’s doing it. What makes it hard is that my style sheet is really big and complicated and that the site is database driven and rendered with a bunch of nested templates. The first thing I need to do is figure out what css stuff is affecting the text in question, then I need to hunt down where and in which template it’s being assigned and fix it. I figured it couldn’t hurt to see if any dopers were good with css and bored enough to help me look at it.

Anyway, the style sheet is here: http://opalcat.com/textpattern/css.php?s=default and the problem is on my front page here: http://opalcat.com/

The stuff on the left under “Most Recently Added Content” is in a slightly smaller font than the stuff on the right under “Most Recent Journal Entries”. I suspect it’s due to my css using relative sizes rather than fixed sizes, and the left is inheriting an additional level of shrinkage that the right isn’t, but I haven’t been able to spot it yet.

Anybody willing to give it a shot? Massive huge thanks to anyone who is willing to help. :slight_smile:

2

I just took a quick look and would have to experiment, but one thing I find that often works is simply copying what works and pasting where it doesn’t work.

In your case, I would copy:

<blockquote><a rel=“bookmark” href=“Ann Nicholson Haralambie, Attorney, P.C. | Tucson Divorce Child Custody Child Welfare Lawyer”><img src=“/images/18.jpg” alt=“” class=“articleimage” align=“left”></a><p><img src=“/moviereviews/catstar.gif” alt=“” height=“14” width=“13”> <img src=“/moviereviews/catstar.gif” alt=“” height=“14” width=“13”> <img src=“/moviereviews/catstar.gif” alt=“” height=“14” width=“13”> I really liked this movie. I got it from NetFlix after seeing a preview for it on some other <span class=“caps”>DVD</span>. I hadn’t heard of it before and didn’t have any expectations. It was very enjoyable for a light comedy. Gray is…</p>

And then paste that at the top of the next column "Most Recent Journal Entries"and see if that cleans up the entire column. Then you can go in and change the verbiage and such after the fact if it cleans up the font size.

If your site has worked up to now with the CSS, my guess is the problem isn’t with the CSS, it is a break in code somewhere in the second column. It happens…you accidentally erase a tiny bit of the code and everything goes wacko.

Just my 2 cents. I am sure someone with more expertise will come along with a better fix, but again…I usually copy what works and put it where it doesn’t work and it usually fixes the problem.

3

I tested the first two paragraphs, right next to each other, in both columns. A paragraph from the left column has the same (smaller) font size when copied, unmodified, into the right column.

The important difference between the left and right column items, I think, is that the left column has left-floated images while the right column does not. Note that I do not know yet why this is making a difference, but I have been able to fix the problem by adding this:

**
blockquote {
font-size: 13px;
}
**

Without looking more deeply into this, I think this does support your notion that the the relative font sizes do have something to do with this, but I don’t think it has anything to do with an unclosed HTML tag or any difference between the way the two <td>'s are handled.

Hope this helps. Nice site by the way… I know how exasperating these kinds of problems can get.

4

DMark: no it’s always done this, I just haven’t had time to try to mess with it until now. What you suggest wouldn’t work, unfortunately. It doesn’t matter what content I put in, the text is always smaller on the left. But aside from that, the site content is dynamic and pulled from a database. On the left it shows the most recent articles I’ve added to the site, while on the right it’s pulling an rss stream from my LiveJournal. It’s not just an html page that I could go paste in the code and change the words and then it’s fixed. I need to find the exact problem, and then find where in the various templates I can make a change to fix how it is displaying the stuff.

For example, the code that is generating that part of the page looks like this:
<txp:article status=“sticky” form=“sticky” />
<table border=“0” cellspacing=“10”><tr valign=“top”><td width=“50%”>
<h2>Most Recently Added Content:</h2>
<txp:article limit=“5” form=“excerpt_cat” />
<h2>Highest Rated Articles:</h2><em>(This feature is in Beta testing)</em>
<ol><txp:jmd_rate_article form=“highest_rated” max_value=“10” min_value=“8” /></ol></td><td width=“50%”>
<h2>Most Recent Journal Entries:</h2>
<txp:bit_rss feed=“Minutiae: OpalCat Minute by Minute” limit=“4” form=“rss” />…etc… so there’s not a place that I would paste rendered html content directly.

Engywook thanks for checking it out. I really don’t want to set a fixed size to all blockquotes on my site, though. Or really at all, especially since the rest of the sizing is done relative it could make the display look messed up somewhere else. I don’t think it’s an unclosed tag or anything like that, I think it’s just maybe an uneven number of div tags or something? Like one is nested inside an additional set from the other? The problem is I can’t find where that is happening.

I’m not gonna freak out and die if I can’t fix it or anything–I mean it’s been doing this for a year and a half since I redesigned the layout to the current one, and I’m not sure anyone but me really notices. Heh.

5

The stuff on the left is inheriting a P tag and the stuff on the right is not.

This is the stuff on the left:
**html > body > div #mainbox > div #content > table > tbody > tr > td > blockquote > p
**

This is the stuff on the right:
html > body > div #mainbox > div #content > table > tbody > tr > td > blockquote

According to the Firefox Web Developer Plugin, this is the CSS for the stuff on the left:



blockquote, h3, p, li (line 22)
{
padding-right: 10px;
padding-left: 10px;
font-size: 0.9em;
line-height: 1.6em;
}

This is the CSS for the stuff on the right:



blockquote, h3, p, li (line 22)
{
padding-right: 10px;
padding-left: 10px;
font-size: 0.9em;
line-height: 1.6em;
}

blockquote (line 29)
{
margin-right: 0pt;
margin-left: 20px;
}

Does that help? You should totally get that plugin for Firefox. Even if you don’t use Firefox as your regular browser, it’s mighty helpful. I found that info by going to the CSS Menu, then “View Style Information.”

6

Concur - it looks like the problem text just isn’t wrapped in <p> tags like the other bits.

Also, I second the recommendation for the web developer toolbar - it’s amazing.

7

For the best cross-browser compatibility, EM’s are the only way to go. Here’s a chart that explains the issue.

Next, download this plug-in. It will let you temporarily edit the CSS and HTML in a sidebar, so that any changes you make will be reflected instantly.

On the right, you have as the HTML:

But on the left, you have:

See? On the left column, you put your text in a <p></p> , but not on the right. Simple fix!

8

I just had to style a MySpace page for someone, and used this plug-in to help locate some of the worst of the offending code and fix it up.

Unfortunately even this powerfully useful tool could not defeat the miasmic cacophony that is MySpace’s shithouse HTML. Some of the text was completely beyond reach, and here’s why: class=““btext”” - they double-double-quoted, the morons.

9

I hard-coded the p tag into the right column’s template form and it seems to be working.
Thanks everyone, and tomorrow when I’m not drag-ass tired I will play with those plugins!!

10

Maybe MySpace is planning on releasing their own browser, in an effort to take over the world (the courts say it worked for Microsoft). In this browser, double-double quotes will be the standard. When you use this browser every MySpace page will look absolutely beautiful instead of the horrendously fucked-up mishmash they currently are.

Yeah, that’s the ticket…