Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > 15px is not same for image, text, submit, span

Reply
Thread Tools

15px is not same for image, text, submit, span

 
 
Disc Magnet
Guest
Posts: n/a
 
      05-29-2010
I created an image, a text box, a submit button and a text all of
height 15px. But they all appear to be of different heights in Firefox
as well as Chrome, on Linux as well as Windows.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<form action="/">
<div style="border: 1px solid gray">
<img src="http://www1.free-clipart.net/gallery2/icons/Alphabet/a/
38.gif" height="15px" width="15px" style="border: 1px solid yellow"
alt="">
<input type="text" style="height: 15px; border: 1px solid red">
<input type="submit" style="height: 15px; border: 1px solid
green">
<span style="height: 15px; border: 1px solid blue">foo</span>
</div>
</form>
</body>
</html>

Here is an online paste for trial and experimentation (warning: the
following link is not permanent):

http://www.webdevout.net/test?0O

I want all of them to be of the same size and aligned properly. Could
anyone please help me understand the issue here and a way to fix it?
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      05-29-2010
In article
<(E-Mail Removed)
m>,
Disc Magnet <(E-Mail Removed)> wrote:

> I created an image, a text box, a submit button and a text all of
> height 15px. But they all appear to be of different heights in Firefox
> as well as Chrome, on Linux as well as Windows.


Creating text to be 15px high is like trying to creating a volume
size balloon for an atmosphere whose pressure you have no idea
about.

--
dorayme
 
Reply With Quote
 
 
 
 
freemont
Guest
Posts: n/a
 
      05-29-2010
On Sun, 30 May 2010 07:47:07 +1000, dorayme writ:

> Creating text to be 15px high is like trying to creating a volume size
> balloon for an atmosphere whose pressure you have no idea about.


Bleh, that analogy is OLD already, heard it a million times...
--
⁂ "Because all you of Earth are idiots!"
¯`·.¸¸.·´¯`·-> ※freemont※ <-·´¯`·.¸¸.·´¯
 
Reply With Quote
 
Disc Magnet
Guest
Posts: n/a
 
      05-30-2010
On May 30, 2:47*am, dorayme <(E-Mail Removed)> wrote:
> In article
> <(E-Mail Removed)
> m>,
> *Disc Magnet <(E-Mail Removed)> wrote:
>
> > I created an image, a text box, a submit button and a text all of
> > height 15px. But they all appear to be of different heights in Firefox
> > as well as Chrome, on Linux as well as Windows.

>
> Creating text to be 15px high is like trying to creating a volume
> size balloon for an atmosphere whose pressure you have no idea
> about.
>
> --
> dorayme


Ok, if we leave apart the text, how to fix the issue for the other
three elements?
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      05-30-2010
In article
<(E-Mail Removed)
>,

Disc Magnet <(E-Mail Removed)> wrote:

> On May 30, 2:47*am, dorayme <(E-Mail Removed)> wrote:
> > In article
> > <(E-Mail Removed)
> > m>,
> > *Disc Magnet <(E-Mail Removed)> wrote:
> >
> > > I created an image, a text box, a submit button and a text all of
> > > height 15px. But they all appear to be of different heights in Firefox
> > > as well as Chrome, on Linux as well as Windows.

> >
> > Creating text to be 15px high is like trying to creating a volume
> > size balloon for an atmosphere whose pressure you have no idea
> > about.
> >
> > --
> > dorayme

>
> Ok, if we leave apart the text, how to fix the issue for the other
> three elements?


OK, the text will simply be as high as it needs to be for any
particular user text size setting. But remember, we have here
*four* inline elements inside a div: an img and a span and couple
of input elements. Browsers make descender and ascender space
provisions for inline elements so you will see space above all
the content of the div, both above and below them.

<http://dorayme.netweaver.com.au/discM.html>

For a similar reason that it is a bad idea to set a pixel height
on a span that holds the text, it is a bad idea to set a height
on a text box; after all, where is the text to fit if the box
provided for it, be it a span or an input box, is vertically
inadequate. The way to work with these things is to let the text
determine the height, don't try to fight this. And, personally, I
would say to leave the submit button to be the recognisably
styled thing it naturally is, bordering it changes its character

Now, your question: if we do the right thing, what *is* the
question? The four elements above do "line up" as best as they
possibly can. The image top can hardly line up with the top of
the F because it is simply taller and acts like a really big
capital letter.

We can make it shorter by a height adjustment in the img element
but that would be a Pyrrhic victory, soon as a user changes the
font size, the image would then be shorter or taller in
comparison depending on the direction of the change. Or we can
specify its height in em units as in the third of the examples in
the url above. That will get the text and image to sit on the
same base line throughout user text changes in good browsers.

As for the bottoms... well, you cannot expect a y to line up like
a K and if you think of it this way, perhaps you might rethink
quite what you want to do. The submit and text inputs are
particular objects with their own characteristics, they tend to
be like strange capital letters but with a descending bit instead
of the stand tall look of capitals. I can't go into it now as it
is a long story but something happened to submit buttons a long
time ago and they were badly humiliated and so they stand low.

I have taken liberties with the example. Notice how much nicer
and more familiar are the second and third inputs from the first.

--
dorayme
 
Reply With Quote
 
Paul
Guest
Posts: n/a
 
      05-30-2010
Disc Magnet schreef:
> On May 30, 2:47 am, dorayme <(E-Mail Removed)> wrote:
>> In article
>> <(E-Mail Removed)
>> m>,
>> Disc Magnet <(E-Mail Removed)> wrote:
>>
>>> I created an image, a text box, a submit button and a text all of
>>> height 15px. But they all appear to be of different heights in Firefox
>>> as well as Chrome, on Linux as well as Windows.

>> Creating text to be 15px high is like trying to creating a volume
>> size balloon for an atmosphere whose pressure you have no idea
>> about.
>>
>> --
>> dorayme

>
> Ok, if we leave apart the text, how to fix the issue for the other
> three elements?


According to my documentation there is a box with, from outside to inside:
outer edge,
margin,
border,
padding,
inner edge,
and finaly height.

I suppose you have to experiment giving each of these a explicit value.
If you do so, share the results with us!

greetings, Paul
 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      05-30-2010
On Sat, 29 May 2010 13:06:42 -0700 (PDT), Disc Magnet wrote:

> I created an image, a text box, a submit button and a text all of
> height 15px. But they all appear to be of different heights in Firefox
> as well as Chrome, on Linux as well as Windows.
>
> Here is the code:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
> TR/html4/strict.dtd">
> <html lang="en">
> <head>
> <title>Test</title>
> </head>
> <body>
> <form action="/">
> <div style="border: 1px solid gray">
> <img src="http://www1.free-clipart.net/gallery2/icons/Alphabet/a/
> 38.gif" height="15px" width="15px" style="border: 1px solid yellow"
> alt="">
> <input type="text" style="height: 15px; border: 1px solid red">
> <input type="submit" style="height: 15px; border: 1px solid
> green">
> <span style="height: 15px; border: 1px solid blue">foo</span>
> </div>
> </form>
> </body>
> </html>
>
> Here is an online paste for trial and experimentation (warning: the
> following link is not permanent):
>
> http://www.webdevout.net/test?0O
>
> I want all of them to be of the same size and aligned properly. Could
> anyone please help me understand the issue here and a way to fix it?


I might suggest putting each item into a container and setting the
container height as needed.

A pixel is used for sizing images. A font is not necessarily sized by
pixels. You would have to define the height of a font by a "point".
e.g. font-size:10pt .

If you're trying to create a look across any browser, bear in mind, the
user may not have the font you want to use. Or the user may have his
browser set to use a totally different font.




--
I learned my lesson well. You can't please everyone, so you got to please
yourself.
- Ricky Nelson from "Garden Party"
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      05-30-2010
richard wrote:

> You would have to define the height of a font by a "point".
> e.g. font-size:10pt .


No, you wouldn't. Pt (points) are for printing.
Use percentages or ems instead.

font-size: 100%;

--
-bts
-Four wheels carry the body; two wheels move the soul
 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      05-30-2010
On Sun, 30 May 2010 07:21:36 -0400, Beauregard T. Shagnasty wrote:

> richard wrote:
>
>> You would have to define the height of a font by a "point".
>> e.g. font-size:10pt .

>
> No, you wouldn't. Pt (points) are for printing.
> Use percentages or ems instead.
>
> font-size: 100%;


Explain this to me then. When you change your browser's setting to show a
different font and size, do they ask what size em or point do you want to
be in?

As I've said before, the screen before you is virtually the same thing as a
printed piece of paper.

If I wanted to vary the size of a container, then I would use em's. If I
want to change the actual text size, I use points.


--
I learned my lesson well. You can't please everyone, so you got to please
yourself.
- Ricky Nelson from "Garden Party"
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      05-30-2010
richard wrote:

> Beauregard T. Shagnasty wrote:
>> richard wrote:
>>> You would have to define the height of a font by a "point".
>>> e.g. font-size:10pt .

>>
>> No, you wouldn't. Pt (points) are for printing.
>> Use percentages or ems instead.
>>
>> font-size: 100%;

>
> Explain this to me then. When you change your browser's setting to
> show a different font and size, do they ask what size em or point do
> you want to be in?


No, my browsers simply offer a dropdown of nothing but numbers. So what?

> As I've said before, the screen before you is virtually the same thing
> as a printed piece of paper.


I believe sherm has adequately answered that for you. I agree with him.

> If I wanted to vary the size of a container, then I would use em's.
> If I want to change the actual text size, I use points.


Then you would be not operating in the best interests of your visitors.
If you want do write web pages for only yourself, feel free to bung it
up.
http://tekrider.net/html/fontsize.php

--
-bts
-Four wheels carry the body; two wheels move the soul
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1> Stphane Klein Python 2 03-30-2010 12:35 AM
Re: I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1> Stefan Behnel Python 0 03-29-2010 08:14 PM
Can span include span? Fulio Open HTML 5 06-26-2009 10:24 PM
Solid line - need to start 15px in tshad HTML 21 05-22-2005 07:08 PM
DataGrid (body only) contained in <span>...</span> tags Dan Bishop ASP .Net Datagrid Control 2 06-07-2004 04:00 PM



Advertisments