difference between input/a with same style
Aljosa Mohorovic
when i apply this style:
--------------------
.mytest {
font-size:11px; font-family:arial; line-height:11px; text-
decoration:none;
background-color:#ccc; color:#000; border:0;
margin:0; padding:0; display:inline;
}
--------------------
to:
--------------------
<a href="#" class="mytest">test</a>
<input type="submit" class="mytest" value="test" />
--------------------
i get different results. in firebug INPUT occupies 24x15px space and A
18x13px.
any tips on what i'm missing?
Aljosa Mohorovic
Chris F.A. Johnson
And on someone else's browser, it will be different again.
You have specified a font size that is too small for me to read, so
my browser will use a default (I think it's currently 18px). Since
you have set a line-height of 11 px, whatever I enter will be cut
off and unreadable.
> any tips on what i'm missing?
The fact that you *cannot* specify exactly what a page will look
like in someone else's browser (or even, apparently, in all of your
own browsers).
--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
dorayme
OP might get closer to what is wanted, taking into account what Chris
says, by adding an explicit font-size: 1em; or thereabouts to the above
class's styles.
--
dorayme
Jim Moe
> <a href="#" class="mytest">test</a>
> <input type="submit" class="mytest" value="test" />
>
> 18x13px.
> any tips on what i'm missing?
>
As others have noted, that is a ridiculously small font size and line
height. You actually expect people to read it?
Out of curiosity, why are your using XHTML?
The submit element is a button with the extra decoration; the link
element is only text. The amount of extra decoration depends on the
browser, the browser's current theme (or "skin"), and the OS.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
David Stone
dorayme <dorayme...@optusnet.com.au> wrote:
And setting the line-height to a ratio instead of a pixel value.
(What is this, meme-of-the-week time?)
Aljosa Mohorovic
> Besides an URL to a test case?
updated version at: http://67.23.27.235/buttons/
> As others have noted, that is a ridiculously small font size and line
> height. You actually expect people to read it?
this is example code, not something that i expect people to read.
font-size/line-height can be changed, my goal was to get the same
effect (or the best i can get) across browsers.
> Out of curiosity, why are your using XHTML?
no special reason.
> The submit element is a button with the extra decoration; the link
> element is only text. The amount of extra decoration depends on the
> browser, the browser's current theme (or "skin"), and the OS.
i understand that i can't get pixel-perfect style applied to a/input
tags but i'm sure i can get some advices how to improve my current
style.
Aljosa Mohorovic
Aljosa Mohorovic
> > any tips on what i'm missing?
>
> The fact that you *cannot* specify exactly what a page will look
> like in someone else's browser (or even, apparently, in all of your
> own browsers).
would your advice be for me to find a different newsgroup to ask
stupid questions with users more tolerant to new users or is it just
an impolite way to point that my post could have been better prepared
with more details?
Aljosa Mohorovic
Christian Kirsch
None of the above. Other people are seeing your web page in a browser
that they have configured to *their* liking. They might prevent your
page from using its fonts, insisting on something like a 36 point Times.
To summarize: "you *cannot* specify exactly what a page will look like
in someone else's browser".
Jim Moe
>
>> Out of curiosity, why are your using XHTML?
>
> no special reason.
>
<http://validator.w3.org/>. Why? Read the almost daily explanations in
this newsgroup.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
>> The submit element is a button with the extra decoration; the link
>> element is only text. The amount of extra decoration depends on the
>> browser, the browser's current theme (or "skin"), and the OS.
>
> i understand that i can't get pixel-perfect style applied to a/input
> tags but i'm sure i can get some advices how to improve my current
> style.
>
Your examples show the differences between using a link elements and a
input element. It is not clear why you asked the question. It is possible,
with the extensive use of CSS, to adjust the margins and paddings of each
element until they look the same. On your screen. In your browser.
Basically, though, if you have a form to submit, use a submit button;
that is what its function. Using a link element for submit is senseless.
dorayme
David Stone <no.e...@domain.invalid> wrote:
> > OP might get closer to what is wanted, taking into account what Chris
> > says, by adding an explicit font-size: 1em; or thereabouts to the above
> > class's styles.
>
> And setting the line-height to a ratio instead of a pixel value.
> (What is this, meme-of-the-week time?)
Oops... yes, my fingers didn't know when to stop! I doubt it mattered
much in this case. Note, it is not wrong to use a unit, just a tad
dangerous in situations where, for example, the line height is set on a
container that has descendants with different font sizes.
(Sport is to go meme busting every now and then but I was not meaning to
on this occasion <g>)
--
dorayme