Saturday, 16th June, 2007

A Strange Little Safari/CSS Anomaly-Type Thing

CSS code WTF

I'm scratching my head this morning, at an odd little Safari rendering bug-type thing, and I'm wondering if anyone on the internets can explain it...

I've been working on a bit of a massive redesign of My Big Site Wot Is Quite Good™ for the past week or two, and I'm trying to get the links that used to be down the side to appear across the top, in inline <li>s.

Well, I say "trying" — what I mean is that I've got the links that used to be... (etc)

But I am trying to be a bit clever, and have little indicator thingies show up when you have new message and comments. Within each relevant 'menu item', I have an absolutely positioned <div> that either shows how many new comments/messages you have with its background as a orange starburst, or it's just empty.

I'll share the HTML/CSS in a second, but this is what it should look like:

Cute huh?

In Firefox and Camino, everything works as expected. I have no idea about IE7, but I'm just crossing my fingers on that one.

In Safari though, I get this:

No background image

Now normally, I'd just put it down to my usual hacky/bodgey approach to CSS etc, and thrash my way through Google until I found out what I was doing wrong. It's just that — quite by accident — I discovered that if I flip Safari to another tab, then flip back, the background shows like it should.

Here's the HTML...

<div id="main_links">
    <ul>

        [...]

        <li><a href="#">Comments</a><div id="comment_count">1</div></li>

        [...]
    </ul>
</div>

...and here's the CSS...

#message_count {
    display: block ;
    position: absolute ;
    left: 106px ;
    top: -16px ;
    z-index: 100 ;
    width: 24px ;
    height: 24px ;
    background-position: left top;
    background-image: url(../image/star.gif);
    background-repeat: no-repeat ;
}

#main_links li {
    margin-right: 59px;
    display: inline;
    position: relative ;
}

/me confused

Blindside

photo tranny red big-fuckoff-dress

There will mostly be random photographs today. A friend just rang me to see if I had any photos of Lancaster she could use for a project she's working on, and while I was trawling through my iPhoto Library, a few jumped out and shouted "Upload me!"

Ah, yes. Sorry — the two message_count and comment_count divs are identical, apart from a slight difference in their position (which is a terrible way of doing things, I know. But hey)

the new page has no 'back' / 'home' link

[...]

B.T.W. I didn't see any 'tabs', but I guess that's because I'm a 'guest'?

Yes, and that page that I linked to — I forgot — it's just a quick and dirty temporary thing that I put in place for the exhibitions. This whole site is taking on a life of its own. It's a bit messy at the moment, but trust me, it's going to be sweet as fuck

Intrusion

photo tranny black&white

Hmm. Not really liking that empty space in the top left of that one...

Insomnia

photo tranny headphones

Summer 06

photo boy backyard summer

Whenever I scroll through my iPhoto Library, there's one or two clumps of photos that I try and skim past really quickly — for one reason or another.

That was a weird time — one of beauty, but impenetrability.

But Never

photo tranny wedding-dress birdcage

I'm led to believe that I'm the only person to ever manage to fit into this dress. If you've been to The Birdcage and squeezed into this one also, please email me and let me know.

So that I can kill you.

Sadoku

photo black&white

Have it work dynamically, and it, well, refuses to do anything.

This isn't dynamic though — it's just a standard (I thought) positioned <div> with a gif as its background image. What I don't understand is why it shows after I've flipped back to the tab. I'm not reloading the page, just shifting to a previously opened tab, then shifting back.

It's as if it's drawn it, but it needs just a little manual 'kick' to display it.

In a similar way that Safari sometimes (for me, anyway) renders things twice on the screen and makes a complete mess of it?

It is, I have to say, my browser of choice — I find Firefox too kludgey and bloated, and Camino just ain't pretty (sorry). There's something beautifully elegant about Safari, and I adore being able to load bookmarks from my bookmark-bar with a keystroke.

But I have to say, I'm going off it

Thanks for these guys To be honest though, I'm going to save research into what's going on here for a later date. I'm in a pretty fortunate position of not having too many users of the site, and can encourage them to use alternative browsers if needs be.

In fact, I tend to recommend they use Firefox anyway — the word-processing side of the site doesn't work too well in Safari already, and (up until recently¹) the entire thing didn't display in IE7.

"I can't get on to the site"

"You're using Internet Explorer 7 aren't you?"

"Yes, how did you kn..."

"Use Firefox FFS"

...

Actually, all that aside (and my 'teh ugly' flippancies above), I'm going to give Camino a run at it. I've just made a drag'n'drop interface for something on it, and even though Safari does it properly, it's bloody slow.

Laggy in fact.

I'm going to install the rather beautiful theme for Camino by Jon , then see how it copes.

Browser loyalty is a funny thing isn't it? It's the kind of conversation that can go on for ages, meandering between the pros and cons of one particular piece of software over another, taking in the various extensions and addons that we all couldn't live without. It's the kind of thing I could ramble about all ni...

OMG. Doctor Who!

¹ Who'd have thought that setting the margin on the body element to -500000px would bork an entire site, eh?

OMFG

doctorwho

My hands are shaking

I need a drink

Warning: Spoilers below...

Oi! Spoilers!

Thank you. That's good to know

@Phoenix — I like you

@Rachel — Yeah, but I was rather pleased to see that Mr Simm had a goatee when he first regenerated

I thought that too Right up until the voice started coming from the watch, and I figured from the tone who he really was.

I'm now wondering (a) if The Master still has his TARDIS, and (b) If so, is its chameleon circuit still working?