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

D

Disc Magnet

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?
 
D

dorayme

<[email protected]
m>,
Disc Magnet said:
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.
Click to expand...

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.
 
F

freemont

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.
Click to expand...

Bleh, that analogy is OLD already, heard it a million times...
 
D

Disc Magnet

<[email protected]
m>,


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.
Click to expand...

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

dorayme

<[email protected]
,
Click to expand...
Disc Magnet said:
Ok, if we leave apart the text, how to fix the issue for the other
three elements?
Click to expand...

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.
 
P

Paul

Disc Magnet schreef:
Ok, if we leave apart the text, how to fix the issue for the other
three elements?
Click to expand...

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
 
R

richard

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?
Click to expand...

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.
 
B

Beauregard T. Shagnasty

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

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

font-size: 100%;
 
R

richard

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

font-size: 100%;
Click to expand...

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.
 
B

Beauregard T. Shagnasty

richard said:
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?
Click to expand...

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.
Click to expand...

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.
Click to expand...

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
 
R

rf

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

And just why would that help, given that the offending items are *already*
inside "containers"?
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 .
Click to expand...

Absolute Bullshit RtS.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Slideshow not working properly 2
I am trying to detect Which image id="" was clicked ? 22
Buttons lining up 1
Why is the e.target not working here? 1
Having trouble centering contents of td ? 3
Image shifts to the right when export the page to pdf 4
Working on mobile css menu with plenty of frustration! 2
Help with Visual Lightbox: Scripts 2

Members online

No members online now.
Total: 44 (members: 0, guests: 44)
Robots: 321

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,021
Latest member
AkilahJaim

Latest Threads

Top