CSS (Cascading Style Sheets) are an ordered list of styles that create the look and layout of pages. Mostly created in an application like Dreamweaver, Coda, or CSS Edit, or manually by hand in a text editor. Both ways work, it’s really down to the user. One thing that is critical is the order in which these styles appear. The most classic example is that of the humble anchor tag A. This tag has 4 properties usually (it can have more), and that is a:link, a:visited, a:hover, and a:active. For them to work properly, they must appear in that order. LVHA is the common meme for remembering this order. They call the link, visited link, mouse over and active colours respectively.
And that’s where Lightroom breaks down. You see when Lightroom generates the layout and colours you choose, it seems to spit them out in a random order. There may be an actual order, but it’s not documented. In order for this compensate for this break to the normal layout, Lightroom inserts an ‘!important’ tag to every style created. This gives equal weight to the states, (because they’re all important), but the lack or correct order stops it from working correctly in the browser.
Is there a way around it? Well actually there is, but it’s rather tedious and long winded. You have a preview style sheet created by Lightroom, and then a publish style sheet that takes the generated css and uses the values inside a hand sorted style sheet. Why not just use the hand sorted sheet, I hear you ask? Because you need to use Live Update to see changes you make, and these don’t always show with the hand sorted sheet. There is a downside to this method though. Each new feature that makes use of CSS has to be created twice, once for the Preview, and once for the Publish version. The potential for bugs is reasonably large.
LRB Portfolio introduced this method recently. LRB Exhibition currently just uses the standard Lightroom method, but will have the workaround in a forthcoming release (not 1.2 though, which is feature complete and in testing).
So now if you see link colours not working correctly, you know why. If you’re CSS savy, you can always put the links in the correct order yourself by editing the generated CSS file.
At least we can workaround it, despite it being incredibly tedious.
This is one of my least favorite things about developing web engines for Lightroom. Web-standards psycho that I am, Lightroom’s handling of CSS just drives me mad.
Thanks for the interesting point; I’ve never realised it works that way. Is that CSS anomaly visible on all major browsers or just the usual IE culprits?
All unfortunately.