I have long enjoyed creating text links that invert in color when you mouse over them. You know the kind, they appear as normal underlined text normally, and then when you mouse-over, the underline vanishes and the text becomes white and sites atop a colored rectangular background.
Recently, I’ve been visiting actionsforge.com more and more. I must say that Walter Davis has done an outstanding job on this, and I especially love his implementation of padded text links. I wrote him an email to learn more how he did it. Walter kindly replied with some very detailed steps, as follows:
1) Click once on the HTML box where you want to affect the links.
In the Inspector, find the Link Style segment of the Appearance tab. Click on the More button at the bottom.
‘link’ will be highlighted. Press the Extended button, and in the sub-dialog that appears, press New.
In the Name field, enter ‘padding’ (without the quotes).
In the Value field, enter ‘3px 6px’ and okay the dialog.
Press New again, in the Name field, enter ‘margin’.
In the Value field enter ‘-3px -6px’ and okay the dialog.
Okay all the way out of Extended to the Edit Link Styles dialog.
Click on ‘hover’ in the left pane of the ELS dialog.
Click on the (+) on the right of Character and select Background Color. Enter something cheerful.
Click on the (+) and select Color, enter a contrasting color.
This should get you a nice color box around links when you hover over them.
Unfortunately, I must being doing something wrong because it’s not working as expected. It works wonderfully in Freeway’s Preview, but the padding and margin settings are broken in Safari and FireFox for some reason. I’ve applied it to two text links shown on this site:
Interestingly, the the padding and margin on my “Copyright” link (bottom right corner of my web page) looks fine in FireFox, which doesn’t make much sense.
I created this full-screen video (6.8MB) so you can see clearly what I am seeing in Freeway, FireFox and Safari:
Blasted caches! Thank you, gentlemen for pointing that out.
I retested in Safari 3 in WinXP & OS 10.4(PPC) and in FireFox 3 (OS 10.4), and I see the padding now in all its glory.
Sadly though, in WinXP running MSIE 6.x or 7.x, I am not seeing the padding. These are not browsers I use personally, but unfortunately most of the world still does. I would therefore appreciate thoughts on the technical reasons why MSIE for Windows is not showing the padding (and I would love to hear any code tweaks that could make it work).
I must say that “the little things” eat on me until I find a solution. The padding issue I mention above is actually not a browser cache problem. It is a padding & margin implementation problem. For after I made my last post above, I found that the padding/margin was again lost in Safari, even though I had restart the browser and my computer!
The issue centers on Steps 3-7 in my 11 step method above. When I first did that, it made no sense at all to me as to why putting the margin and padding ONLY on “link” would do the trick. Today, I applied the same padding and margin settings to “Hover” to see what would happen. Boom! The proper amount of padding/margin around my links appeared perfectly and reliably in Safari! It even works if I delete out padding/margin from “link” and keep those extended attributes only on “hover.”
But despite my success in applying the attributes to “hover,” MSIE 6 & 7 still look the same – padding/margin is just not showing up. I even applied padding/margin to all 4 states: link, hover, active, & visited. But that did not fix anything in MSIE. I must therefore assume that these browsers ignore the padding on text links, or a bug prevents those bloatware browsers from recognizing the settings. I honestly don’t want to give a hoot about this, but the only reason I even dwell on it that the majority of the world continues to use these nutty browsers.
In any case, the main point here (for those of you following this thread), is that you need to apply your padding & margin attributes to the “hover” state if you want to see it reliably in Safari, Firefox and other OS X browsers. And if anyone has suggestions on fixing the padding/margin for MSIE browsers, I’m all ears.
Do you have that issue with this site (FreewayTalk) in any of your
target browsers? On your signed-in home page, the links in the main
section of the page should have padding top and bottom, none left and
right. I haven’t tested it all that much in the distaff browsers,
since our stats lean pretty heavily into the Mac end.
Walter
On Jan 26, 2009, at 9:36 PM, JDW wrote:
In any case, the main point here (for those of you following this
thread), is that you need to apply your padding & margin attributes
to the “hover” state if you want to see it reliably in Safari,
Firefox and other OS X browsers. And if anyone has suggestions on
fixing the padding/margin for MSIE browsers, I’m all ears.
If you do mean either of those pages, then no, I don’t see padding. But then, none of those links have special hover or active states.
But if I go to the main page of this site, I can see hover states applied to the “Most Recent” links. Even so, they don’t look padded to my eyes. The background blue color ends right at the very edges of the white text (there are a couple pixels at the very top that are padded). On MSIE 6 in WinXP, I am not seeing even the hover state (and the little red counter appears above the FreewayTalk button instead of over it like in Mac browsers).
When I speak of “padding & margin” in this thread, I am talking about making the background “hover” box bigger vertically and horizontally. Otherwise, by not adding padding/margin, any background color you apply to the “hover” state stops at the very edges of the text, top and bottom, and doesn’t look nice.
Here’s a screen shot which compares the “hover” state of links on this site versus the “hover” state on my site:
Note how the background blue on the FWtalk hover does not extend beyond the edges of the white text. But on my site, the background “hover” color extends 3 pixels all around the text (which is what I want). But as I mention above, my links only show this padding in Mac browsers, not in MSIE for Windows.
I just tested actionsforge.com in Safari (Mac), FF (Mac) and MSIE 6 & 7.
The search field looks great in all those browsers, for reasons we have discuss in detail in another thread here.
In MSIE 6, the left side of the main content is truncated. (The “A” in “ActionsForge is a complete…” is totally cut off.)
On text links, I see top and bottom padding but no left/right padding in MSIE 6 or 7. Since the same problem occurs on my page’s links in MSIE, I assume MSIE is brain dead to left/right padding?
