Transmogrified: Elegant Grunge v1.0

[alisx]

Style: Transmogrified
Version: 1.0
Browsers Tested: The latest Gecko and Webkit browsers on OSX, Windows and the iPhone. Also looks "acceptable" in IE7.
Notes: Based on the WordPress theme of the same name.

( Fake Cut to Instructionsville )

Comments

[blackbird_song]

Mine's showing the same thick line as Tree's screen shot, but in addition to the keystone problem. I also find that the top of the footer is considerably higher than those of the footer repeats. Sort of a pedestal effect. I'm running OSX 10.4.11 and Firefox 3.0.9.

When I look at your journal, I only get the thick white line, not the alignment issues, so I think this might be an issue either with my machine or a coding glitch that I typoed in. I'll try redoing it and see what happens.

It's still gorgeous, though!

Catherine

[blackbird_song]

And sorry, but no luck with redoing and checking for typos. Still the same result.

[alisx]

Well, the good/bad news is that if I view your journal with ?style=mine, the "stepping" effect you've described (which I can see normally) vanishes.

If I had to take a stab, I'd say it's because Photobucket has incorrectly resized your banners. See yours (1024x160) versus mine (1382x216).

The "strip" between the header elements I think is a margin collapse issue (I hate that damn thing; they must've changed something in the Gecko CSS renderer between 3.0.9 and .10). The fix would be to add padding: 1px 0; to... some element. Either #container, #header or #title... I'm not sure which one, sorry!

It'll also "suck up" the padding of the elements around it, so you may need to space out the gap between the header strips and the main content. I really need to find something that will render with an older version of Firefox so I can test it out. >_O

(The other option would be a "hidden" border element in a similar sort of place... like I said, I really need to install an old browser or something and test this.)

[blackbird_song]

Thank you so much for looking into this and giving me so many details! I'll take a stab at editing the banner sizes in Photobucket and see what happens there. (I've only used that service for the mood-theme icons to date, and so had not encountered that problem before.)

If I get really ambitious (i.e., once the ibuprofen kicks in and gets rid of my headache), I may try some of those other fixes, as well. However, if you do come up with something I'll clearly trust your version much more than my own!

Thank you again for your work and your thoughts. I love the layout and am very willing to tweak as best I can. :)

Catherine

Edit: Resetting PB's limiting size and re-uploading the header and footer pictures worked. I was a real twit not to take a look at the sizes of the images or that little feature of PB's in the first place.

[alisx]

Good to hear that it worked. ^_^

Damn PB. *shakes fist*

[owca]

The "strip" between the header elements I think is a margin collapse issue (I hate that damn thing; they must've changed something in the Gecko CSS renderer between 3.0.9 and .10). The fix would be to add padding: 1px 0; to... some element. Either #container, #header or #title.

Adding the "padding: 1px 0;" line to #header worked like a charm :).