Problems with "In-Line Buttons"

[BigDaddyBS]

I am attempting to make "inline buttons" based on information from
http://wellstyled.com/css-inline-buttons.html.

The CSS is:
/* off-site definitions */
#hmb a.ilb2ed,
#full-page a.ilb2ed
{ _width:7em; width: 7em;
font: bold 60% Verdana,"Comic Sans MS", Arial, sans-serif;
margin: 0 0.2em; padding: 0.1em 0.5em; _padding:0;
border: 1px solid #005500;
white-space:nowrap;
text-decoration: none;
vertical-align:middle;
background-color: #ff0000;
color: #ffffff; } /* white on red */
(I've tried them without the ids on them and it won't work at all.)
Info on "underscore hack" can be found at
http://wellstyled.com/css-underscore-hack.html.

An example HTML is:
<p>They are used to commit
&quot;<a title="The Free Dictionary's definition of
&quot;Cybercrime&quot;"
href=http://www.thefreedictionary.com/cybercrime">cybercrimes</a>"
<a class="ilb2ed" target="_blank"
title="External Definition - Button opens prior link in new
window - The Free Dictionary's definition of &quot;Cybercrime&quot;"
href=http://www.thefreedictionary.com/cybercrime">New&nbsp;Window</a>,
including stealing identities, or disrupting operations of the computer or
server.</p>
(example page at
http://www.orangefrogproductions.com/ofp2s_malware.shtml#what_are_viruses)

Originally, I used a version of the above with other (main site) colors,
then double-classed each button with the above and another class that only
contained color and a background-color. When that didn't appear to work, I
thought of the above, where I'd create a class for each specific button,
with only those colors changing.

They appear to work correctly in FF, but I'm having a problem in IE. Can
anyone explain why, if I use the "http://" prefix on the link of the button,
that the colors defined above are not used? The "buttons" are defined
(borders and font-size), but the colors shown are my "normal" colors,
meaning it appears the background is transparent. When I leave the "http://"
OFF, the buttons display correctly (borders, font-size, colors). What gives?

Now it seems it doesn't want to work at all. My Help page at
http://www.orangefrogproductions.com/ofp2_help.shtml has three different
versions. The External Link is "normal" (one class - the main one), Photo
Album and all the "Future use" ones use the double-class approach (using the
"normal" button, and cascading the colors through the second class), and the
Off-site Defintion button uses the above approach (redefine the "normal"
button for each). Again, it works ok in FF, but doesn't in IE6.

And does anyone know the answer to this one? I use FrontPage to enter my
pages (don't start b-tchin' about THAT!) That's FP 2002 (10.6308.6735) SP3.
The COLORS show correctly in Edit Mode (not the borders or size), but again,
the COLORS don't display correctly in FP Preview Mode, nor in IE6. Anyone
who use FP (THAT could be a laugh, here, in itself!) have any ideas about
this?

I appreciate any help or advice you could give me. Thanks.
BigDaddyBS (Bill)

 

[Andy Dingley]

Now it seems it doesn't want to work at all.

You have <a href="" > with no value for the href attribute. This will
cause problems. Try <a href="#" > instead, while you're testing it.

Owing to the historical use of <a> for both source and target of a link
(e.g. <a name="..." >, many browsers don't recognise <a> as a "link"
unless it has a valid href attribute on it.

 

[BigDaddyBS]

You have <a href="" > with no value for the href attribute. This will
cause problems. Try <a href="#" > instead, while you're testing it.

Owing to the historical use of <a> for both source and target of a link
(e.g. <a name="..." >, many browsers don't recognise <a> as a "link"
unless it has a valid href attribute on it.

Tried it with and without #, but it didn't seem to make any difference.
Thanks, Andy, for the attempt. I'll leave the # in the href for those other
browsers.
BigDaddyBS

 

[Andy Dingley]

Tried it with and without #, but it didn't seem to make any difference.

OK, I give up. That's just too big and ugly a page to try and debug.
Start again with something simpler.

The CSS is _vast_. Far bigger than a page of that complexity deserves.
It's also unreadable -- I can't look at the HTML and get some idea of
the structure you're trying to apply. Why all the multi-class
attributes on small "leaf" elements ? Why all the meaningless class
names like "lib2ed" ? I'm not saying that this isn't right, isn't
valid or that the computers can't work it out, but my poor little brian
certainly can't.

You have a bunch of links which have some common behaviour (they look
like buttons). Are they a logical group? Then group them and stick a
selector on at the group level.

Is each of them subtly different (in colour) ? Then add a per-link
class.

Now use the "behaviour" class to control their behaviour (boxy
buttoness) and the "identity" class to tweak their colours alone. Don't
use the identity to force them into being buttons - you've already done
that. By this simple refactoring you should be able to start reducing
the bulk of your CSS and getting it down to something manageable.

Don't mix selectors with ids from the entire page like #full-page with
classes for mere buttons. Why would you need to do that? Were you
really going to paste the exact button code into a different page and
expect its behaviour to change (you might do, but I suspect not in this
case). If they're "links like buttons", and you want them to behave as
"links like buttons" wherever you put them, then you don't need to
start involving the page's ID in their selectors. Keep it simple. Then
make it even simpler.

Multiple CSS attributes on an element are a powerful tool, but they're
really not needed very often and they can lead to bulky confusing CSS
if you don't keep the CSS neatly structured. Don't duplicate
properties! Don't duplicate chunks of code just because you can, only
duplicate if it's essential to do so. Sooner or later you run into a
situation like this where it might still be correct, but the humans
just can't read it any more.

One trick for simplifying CSS is to validate it with the W3C tool. Then
look at the results tree it gives you, with the equivalent post-cascade
CSS properties that it has extracted from the large pile of source.
Chances are that that's a good basis to start from for a re-worked and
simplified stylesheet.