|
15px is not same for image, text, submit, span
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? |
Re: 15px is not same for image, text, submit, span
In article
<2bd8c86c-ae91-4b67-bfdd-612833458d36@h37g2000pra.googlegroups.co m>, Disc Magnet <discmagnet@gmail.com> 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 |
Re: 15px is not same for image, text, submit, span
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※ <-·´¯`·.¸¸.·´¯ |
Re: 15px is not same for image, text, submit, span
On May 30, 2:47*am, dorayme <dora...@optusnet.com.au> wrote:
> In article > <2bd8c86c-ae91-4b67-bfdd-612833458...@h37g2000pra.googlegroups.co > m>, > *Disc Magnet <discmag...@gmail.com> 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? |
Re: 15px is not same for image, text, submit, span
In article
<aaf75aa3-3ef5-4d85-b431-3d5f5110fdd0@y6g2000pra.googlegroups.com >, Disc Magnet <discmagnet@gmail.com> wrote: > On May 30, 2:47*am, dorayme <dora...@optusnet.com.au> wrote: > > In article > > <2bd8c86c-ae91-4b67-bfdd-612833458...@h37g2000pra.googlegroups.co > > m>, > > *Disc Magnet <discmag...@gmail.com> 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 |
Re: 15px is not same for image, text, submit, span
Disc Magnet schreef:
> On May 30, 2:47 am, dorayme <dora...@optusnet.com.au> wrote: >> In article >> <2bd8c86c-ae91-4b67-bfdd-612833458...@h37g2000pra.googlegroups.co >> m>, >> Disc Magnet <discmag...@gmail.com> 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 |
Re: 15px is not same for image, text, submit, span
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" |
Re: 15px is not same for image, text, submit, span
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 |
Re: 15px is not same for image, text, submit, span
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" |
Re: 15px is not same for image, text, submit, span
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 |
| All times are GMT. The time now is 06:56 AM. |
Powered by vBulletin®. Copyright ©2000 - 2013, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.