[Solved] Reverse engineer some simple CSS?

[knowledgenotebook]

Hi all,

First of all, let me say that I really appreciate all the help from this great forum.

Ok now back to the topic. My little app uses quite of a bit of js library and associated style sheet files, which are very “heavy”… so, some of the screens I don’t really know which style sheet is being applied to, for instance, the following one, http://69.195.124.99/~knowleo9/dev/icon_CSS_fix.png And yet, it’s problematic.

In this case, height and width for both text link of “Card” and “Wiki” need to be decreased. And for the rest, the input type for B and I etc. width needs to be decreased as well. In the meantime, retain other attributes.

The source code looks like this:

<input type="button" id="MakeBold" accesskey="B" onclick="RichTxt('bold')" style="background-image:url('icons/bold.gif');width:25;height:23;vertical-align:bottom" />

Many thanks.

[Senff]

Problem is likely with this part: width:25; height:23;.

Don’t forget you need to use proper dimensions, so change it to something like width:19px; height:19px; or whatever works for you. You’ll need to try various values until you’re happy with the results.

[wahhabb]

You can either use the Button HTML tag rather than an input tag, or use a class name.

<button type="button" name="Card" style="width:45px;height:25px">Card</button>

or

<input type="button" class="button" name="Card" value="Card" style="width:45px;height:25px">

The first will have problems in IE6, but that’s thankfully not an issue any more.

Another approach is not to use a button at all, but simply to style a link to look and act like a button. Here’s an article that explains how to do it.

Good luck!

[dyr]

CSS to target a button:

input[type="button"] { ... }

and for that matter… any attribute

input[name="something"] { ... } => <input type="" name="something" value="" />

input[value="some value"] { ... } => <input type="" name="" value="some value" />

div[data-foo="bar"] { ... } => <div data-foo="bar"></div>

[Paulie_D]

@knowledgenotebook

Please don’t start new queries at the end of old ones. Just start a new thread. Oh and as always…we can’t diagnose an image.

Give us a Codepen reduced case or a live link.

[Author]

Posts