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

[alisx]

Can I possibly grab a screenshot of what you're seeing in the header? I actually use Firefox on OSX as my primary browser, so I'm surprised I've missed something!

[tree]

i was about to comment with what i think is probably the same issue, so i've grabbed it from your journal:



the space in between the header nav module at the top and the title, is where it's funky. given that it doesn't appear on your screenshots i wonder what's missing. i'm using 10.5.6 and firefox 3.0.9.

apart from that, though, thank you so much for the layout. it's gorgeous.

[alisx]

Guh! Margin collapse, I think.

Firefox must've made some small change in the way it renders that stuff between 3.0.9 and 3.0.10. o_O

[tree]

i'm so glad i came back to look here, because dw didn't send me a notification of your reply. i added the extra bit to #header and it works perfectly. thanks so much. :)

[blackbird_song]

Sure. Shall I email it to you? (Bit of a n00b at taking and sending screenshots, though I've managed the 'taking'.)

This may be perfectly normal, though, as what I'm seeing is a sort of 'keystone' effect on the MacBook Pro 15" screen. The bottom line of the header is dropping a bit below that of the header repeats. It looks fine, but I didn't see it on your screenshot, which is why I mentioned it. Sorry if I made a mistake.

Catherine

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