Comments on: css in blogger

Question: css in blogger

stupidsexyFlanders — Wed, 02 Mar 2005 07:20:57 -0800

I'm seeing weird stuff when I try to make some css changes to my Blogger index page.

I clipped all the code from the "template" view under the blogger control panel, threw it into notepad, and started playing with the formatting of one element. (Created a few new classes and added some php, all applied to a very limited part of the page.) To test my changes I named my textfile indextest.php and uploaded it to my webserver, then viewed in firefox. Rinse, repeat, until everything looked right. Then I went back to the blogger control panel and pasted in all the modified code, changed the settings so that my index page ends in .php, and viewed live. The php worked, but none of the css changes were applied! Why would things look OK within indextest.php, but when the same code is viewed through index.php, everything's gone?

By: jnthnjng

jnthnjng — Wed, 02 Mar 2005 08:52:14 -0800

have you tried clearing the cache and reloading? (or simply reloading?) Firefox caches css I believe.

By: carter

carter — Wed, 02 Mar 2005 08:53:41 -0800

Uhm, totally not an expert, but is the original CSS file still cached somewhere and being loaded?

By: stupidsexyFlanders

stupidsexyFlanders — Wed, 02 Mar 2005 09:31:45 -0800

I flushed the cache, and there's no change. All the css is on the page, no external stylesheets are being referenced.

To see what I'm talking about, here are the two urls. They have the exact same source code, but render the css differently (just talking about the four digit number at the top of the right column.)

blogger's feed, incorrect.
my test page, correct.
Note the blogger feeds don't show up in the test page, because it's got a different URL than blogger looks for.

By: carter

carter — Wed, 02 Mar 2005 09:57:41 -0800

*Really* not sure if this is relevant, but running both pages through W3C validator, the blogger feed looks okay (although there's bad syntax), but the parsing of the test page barfs at the meta-information tags, where it says blogencoding. I'm not sure what this means, but maybe that's where it's tripping up?

By: stupidsexyFlanders

stupidsexyFlanders — Wed, 02 Mar 2005 10:08:16 -0800

blogencoding is a blogger tag that exists only on the test page, along with all the other blogger tags on that page, because blogger isn't feeding that page, it's set up to feed the index.php page. On index.php the tag is replaced with the char encoding specified on the blogger control panel page, the same way the blogger post tags are replaced, on index.php, with the actual posts, again, fed from the control panel.

By: jnthnjng

jnthnjng — Wed, 02 Mar 2005 10:33:57 -0800

I think I've found the issue. On your main page, your [div id="oiflink"] is not using regular quotes. Therefore, it treats that as #"oiflink", whereas the template page treats it as #oiflink. Try messing around the quotes around oiflink.

By: jnthnjng

jnthnjng — Wed, 02 Mar 2005 10:37:31 -0800

err. 'messing with the quotes...'
To expand a bit, if you view source, you'll notice that the quotes around oiflink in the main page are (in my font) slanted to the left slightly, whereas the normal quotes are straight vertical ticks, i.e. " (curly / slanted) versus " (normal).

By: stupidsexyFlanders

stupidsexyFlanders — Wed, 02 Mar 2005 10:41:47 -0800

That fixed it. I don't know why I edited the file in Word, even saving as txt it came back to bite me.

Thanks for your help.

By: jnthnjng

jnthnjng — Wed, 02 Mar 2005 10:54:28 -0800

no problem. I figured it was something like Word. Those little tiny things are the most frustrating and the hardest to find. I probably wouldn't have noticed it without the Firefox "Web Developer toolbar" extension. It's got a handy feature that you can activate with ctrl+shift+s (View style information) that turns your cursor into a crosshair and displays the full CSS selector info in the status bar for any element you're hovering over.

By: fixedgear

fixedgear — Wed, 02 Mar 2005 14:22:55 -0800

StupidsexyFlanders is my neighbor? Wow, small world. We'll have to have a meetup at that kooky antiques joint next to the movie theater.

By: stupidsexyFlanders

stupidsexyFlanders — Wed, 02 Mar 2005 14:46:03 -0800

fixedgear is my neighbor? well, there does need to be a philly meetup but I'm not sure that little store is the place for it ;)

By: mecran01

mecran01 — Wed, 02 Mar 2005 15:02:56 -0800

Not to be snarky, but

I'm seeing weird stuff when I try to make some css changes to my Blogger index page.

could be its own category!

CSS is the mind killer. CSS is the little death...