vetical aignment of the text.

Discussion in 'HTML' started by Mr. X., Sep 22, 2008.

  1. Mr. X.

    Mr. X. Guest

    Hello.
    In CSS, while using the property line-height:46px;
    the related line is vertical-aliged differently on some browser by default
    (Opera has center vertical alignment, and IE 5 and more has the default of
    top-vertical-alignment).

    What is the property that may change the above vertical alignment ?

    Thanks :)
    Mr. X., Sep 22, 2008
    #1
    1. Advertising

  2. Mr. X. wrote:

    > In CSS, while using the property line-height:46px;


    You shouldn't use the px unit for anything related to font size, except
    possibly in a user style sheet.

    > the related line is vertical-aliged differently on some browser by
    > default (Opera has center vertical alignment, and IE 5 and more has
    > the default of top-vertical-alignment).


    What do you mean by that? Have you got a demo URL, and what makes you think
    the alignments are as you described?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Sep 22, 2008
    #2
    1. Advertising

  3. Mr. X.

    Mr. X. Guest

    Sorry ...

    Yes.
    Here is the demo :

    test_nav.css :
    =========
    a {
    text-decoration: none;
    color: #0171AF;
    }

    a:hover {
    text-decoration: none;
    color: #111;
    }

    #nav {
    position:absolute;
    top:120px;
    left:80px;
    width:600px;
    height:60px;
    line-height:46px;
    padding: 5px 0 0 0px;
    }

    #nav ul {
    position:absolute;
    top:0px;
    left:0px;
    }

    #nav li {
    float:left;
    font-weight:700;
    width:100px;
    list-style-type:none;
    }
    #nav a {
    text-decoration:none;
    display:block;
    text-align:center;
    }

    test_nav.html
    =========

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="test_nav.css" />
    </head>
    <body>
    <div id = "nav">
    <ul>
    <li"><a href="#">link A</a></li>
    <li"><a href="#">link B</a></li>
    <li"><a href="#">link C</a></li>
    <li"><a href="#">link D</a></li>
    <li"><a href="#">link E</a></li>
    </ul>
    </div>
    </body>
    </html>

    copy the above, and see that links are not at the same positions, at some
    navigators.
    (for 1024x768 resolution. IE 7.0, and Safari 3.1 - it may be relevant to
    some other navigator, such as the google's new navigator etc ...).

    If there any way to control the <li> position ?

    Thanks :)
    Mr. X., Sep 22, 2008
    #3
  4. Mr. X. wrote:

    > Sorry ...


    For what? Please learn how to post to Usenet. If you don't intend to, please
    keep using the same forged From field; thank you in advance.

    > Here is the demo :


    Please learn what "URL" means.

    > test_nav.css :


    And get the clue that on Usenet, we need absolute URLs.

    > copy the above,


    Why would I do that for you, when you did not bother setting up a demo page
    and posting its URL, even after being asked to.

    Again, please keep using the same forged From field as long as you remain
    clueless. Again, thanks in advance.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Sep 22, 2008
    #4
  5. Mr. X.

    Mr. X. Guest

    Why URL link ? It is not an advertising site ... and not a spammer's
    searcher engine !
    The code I gave is just fine and enough, to understand what's wrong !

    Please, if you know how can I run the code on different browser, so it will
    look the same.

    Thanks :)
    Mr. X., Sep 22, 2008
    #5
  6. Mr. X.

    Mr. X. Guest

    Let it be simple :
    delete the "block" property (it occures only once on the *.css file I have
    givven).

    All are at the same line - but if you run them on IE7, and Safari 3.1, their
    top positions are not the same on that different browser.

    If I could control the <li>'s top positions, it would be enough.

    Thanks :)
    Mr. X., Sep 22, 2008
    #6
  7. Mr. X.

    Ari Heino Guest

    Yucca's point was clear and fair: put your code online, don't expect
    anyone to make your job for you. That's the least you can do to get help.

    --
    Ari
    http://users.utu.fi/athein/
    Ari Heino, Sep 22, 2008
    #7
  8. "Mr. X." <no_spam_please@nospam_please.com> writes:

    > Why URL link?


    Because that's the convention here.

    > The code I gave is just fine and enough, to understand what's wrong!


    If you knew what was "fine and enough" to understand the problem, you
    wouldn't need to ask for help with it.

    That's why the convention of posting a URL came about; far too often,
    the posted code *isn't* enough.

    > Please, if you know how can I run the code on different browser, so
    > it will look the same.


    What code? The message to which I'm replying has no code in it, and no
    URL pointing to code.

    sherm--

    --
    My blog: http://shermspace.blogspot.com
    Cocoa programming in Perl: http://camelbones.sourceforge.net
    Sherm Pendley, Sep 22, 2008
    #8
  9. "Mr. X." <no_spam_please@nospam_please.com> writes:

    > Let it be simple :


    Let *what* be simple?

    Please quote the relevant parts of the message you're replying to. If
    you don't, and that message hasn't yet arrived at my local usenet
    server, then your reply won't make any sense.

    > delete the "block" property (it occures only once on the *.css file I have
    > givven).


    You can't "give" files here, it's not a group that allows attachments.

    sherm--

    --
    My blog: http://shermspace.blogspot.com
    Cocoa programming in Perl: http://camelbones.sourceforge.net
    Sherm Pendley, Sep 22, 2008
    #9
  10. Mr. X.

    Mr. X. Guest

    Who said the convention here are that ???

    It's a public newsgroup, from 50,000 and more newsgroups arround, you can
    see on
    "outlook express", google, and some other sites, and due that, it has no
    such rules, unless the whole 50,000 newsgroups has the same rules,
    and their are not.
    You can look it as an helpdesk, or what ever.
    That's the way internet does it's way, if you like it or not.

    I don't have a link, because the site is not intented to be that one.
    It may be under construction, or top secret.
    I gave enough details.

    And I give some more
    (delete single "block" property on css file).

    The following lines, makes the whole different, and solve the problem
    (Why ? Cann't someone ever answer, because it's very difficult to pick up
    the solution, even googling for days ...)

    /* CSS RESET */
    html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym
    {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub
    {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

    body {font:13px/1.231
    arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
    /* CSS RESET */

    Thanks :)
    Mr. X., Sep 22, 2008
    #10
  11. On 2008-09-22, Mr. X. wrote:
    > Who said the convention here are that ???


    The people who can help you, and who will not do so if you don't
    provide a URL.

    ....
    > I don't have a link, because the site is not intented to be that one.
    > It may be under construction, or top secret.
    > I gave enough details.


    But no URL; therefore not enough.

    If it's top secret, why did you post the code?

    > And I give some more
    > (delete single "block" property on css file).
    >
    > The following lines, makes the whole different, and solve the problem
    > (Why ? Cann't someone ever answer, because it's very difficult to pick up
    > the solution, even googling for days ...)
    >
    > /* CSS RESET */
    > html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym
    > {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub
    > {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}
    >
    > body {font:13px/1.231


    Specifying a font size in px is likely to cause problems.

    > arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
    > /* CSS RESET */



    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Sep 22, 2008
    #11
  12. Mr. X.

    Mr. X. Guest

    O.K.
    I will try adopt this technique of em.
    Now need for recalculating sizes.

    Thanks :)
    Mr. X., Sep 22, 2008
    #12
  13. Mr. X.

    Mr. X. Guest

    We can argue for month about adding a URL or not.
    There are many newsgroup, that simply answer,
    and their are people in this newsgroup, who be glade to answer,
    since the globes has much more then 6 Bilion people (don't argue on that -
    even I may be wrong at that ... It's not an issue).
    (I answer too, if I know, and it is too short unswer).

    And you have cought me - English is not my language ;o)

    I have found the problem.
    It was margin - browsers have their default margins,
    and one of the long marked code (start with /* CSS RESET */)
    has the attributes : {margin:0;padding:0;}

    Cheers

    :eek:)
    Mr. X., Sep 22, 2008
    #13
  14. Mr. X.

    Mr. X. Guest

    For first glance :
    You said the following is O.K :
    font-size:1.25em; line-height:1.5em;

    font-size:1.25em - 1em is the current font-size, so what do you mean of
    1.25em ?
    (1.25 font size of what font size ?)

    Thanks :)
    Mr. X., Sep 22, 2008
    #14
  15. On 2008-09-22, richard wrote:
    > On Mon, 22 Sep 2008 21:06:52 +0300, "Jukka K. Korpela"
    ><> wrote:
    >
    >>Mr. X. wrote:
    >>
    >>> In CSS, while using the property line-height:46px;

    >>
    >>You shouldn't use the px unit for anything related to font size, except
    >>possibly in a user style sheet.

    >
    > Horsehockey!
    > A "pt" in the printing industry has a defined size.


    The web has nothing to do with the printing industry; a web page is
    not a piece of paper; "pt" does not apply.

    > A "px" in the electronics of computers has a defined size.


    No, it doesn't. And if it did, it would be the wrong unit to use.
    You may be able to read text at 12px, many others cannot.

    > An "em" is defined by the person who wrote the browser and could mean
    > just about anything. Is an "em" based on the capital M or the little
    > m?


    Neither. See <http://www.w3.org/TR/CSS21/syndata.html#em-width>:

    The 'em' unit is equal to the computed value of the
    'font-size' property of the element on which it is used.
    The exception is when 'em' occurs in the value of the
    'font-size' property itself, in which case it refers to
    the font size of the parent element.

    > Of the 500 plus fonts available, which font was used to base it
    > on?


    > What if I don't have that font?
    > A "%" is even worse. What exactly is 100%?


    100% of the current size.

    > Inches and millimeters should be recognized by any browser precisely
    > as they are. But who knows?
    >
    > If you're going to give a line-height property in pixels, then define
    > your font size in pixels as well. Do not use both ems and pixels.
    > This will help make sure the two work together if the user changes
    > font sizes.


    Why do you want to make the use change font sizes? Only incompetent
    web coders do that.

    > With that in mind, perhaps em's would be better for common text usage
    > as both font size and line height will change accordingly.
    >
    > font-size:1.25em; line-height:1.5em;


    Don't use units with line-height:

    font-size:1.25em; line-height:1.5;

    > NOT
    > font-size:1.25em; line-height:50px;



    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Sep 22, 2008
    #15
  16. Sherm Pendley, Sep 22, 2008
    #16
  17. Mr. X.

    dorayme Guest

    In article <gb92rh$ru9$>,
    "Mr. X." <no_spam_please@nospam_please.com> wrote:

    > We can argue for month about adding a URL or not.
    > There are many newsgroup, that simply answer,
    > and their are people in this newsgroup, who be glade to answer,


    Everyone who has asked you to supply a URL are correct, it helps a lot
    to see what is going on. It is not always easy to see what is wrong by
    simple inspection of code in a usenet post.

    Best if *you* do all the boring work instead of your helpers having to.
    Boring work? Well, getting all your code and sticking it into an editor,
    making sure the CSS bits go one place and the HTML bits go in another
    place and scratching one's head about whether or not to put in what
    doctype, how many errors in validation to fix that might have something
    to do with the problem etc.

    By making a URL and checking it yourself for validation via free
    validation services for CSS and HTML errors, you will benefit too by
    clearing up many mistakes or at least knowing what mistakes to ask about
    that you do not understand. So this is good for you.

    --
    dorayme
    dorayme, Sep 23, 2008
    #17
  18. Mr. X.

    Roy A. Guest

    On 22 Sep, 23:34, "Mr. X." <no_spam_please@nospam_please.com> wrote:
    > We can argue for month about adding a URL or not.
    > There are many newsgroup, that simply answer,
    > and their are people in this newsgroup, who be glade to answer,
    > since the globes has much more then 6 Bilion people (don't argue on that -


    No, it depends on how you see it.
    http://en.wikipedia.org/wiki/Billion
    Roy A., Sep 23, 2008
    #18
  19. Mr. X.

    richard Guest

    On Mon, 22 Sep 2008 21:38:02 +0000, "Chris F.A. Johnson"
    <> wrote:

    >On 2008-09-22, richard wrote:
    >> On Mon, 22 Sep 2008 21:06:52 +0300, "Jukka K. Korpela"
    >><> wrote:
    >>
    >>>Mr. X. wrote:
    >>>
    >>>> In CSS, while using the property line-height:46px;
    >>>
    >>>You shouldn't use the px unit for anything related to font size, except
    >>>possibly in a user style sheet.

    >>
    >> Horsehockey!
    >> A "pt" in the printing industry has a defined size.

    >
    > The web has nothing to do with the printing industry; a web page is
    > not a piece of paper; "pt" does not apply.



    Actually it is "paper". A type of paper that can be recycled on
    demand.
    A "font" size is measured in points. Not pixels.
    Then why are we given the choice to use "points"?



    >
    >> A "px" in the electronics of computers has a defined size.

    >
    > No, it doesn't. And if it did, it would be the wrong unit to use.
    > You may be able to read text at 12px, many others cannot.


    Oh? Then what does 800x600 resolution refer to? Point size?

    >
    >> An "em" is defined by the person who wrote the browser and could mean
    >> just about anything. Is an "em" based on the capital M or the little
    >> m?

    >
    > Neither. See <http://www.w3.org/TR/CSS21/syndata.html#em-width>:
    >
    > The 'em' unit is equal to the computed value of the
    > 'font-size' property of the element on which it is used.
    > The exception is when 'em' occurs in the value of the
    > 'font-size' property itself, in which case it refers to
    > the font size of the parent element.



    Pure gibberish. It's a roundabout way of saying, "We really don't know
    either".
    If I use, font-size:1.5em; how is this value computed?
    I have been assuming that it is based on the user's choice if not
    defined elsewhere.
    So if the user has selected a 10pt font, oh my, he can't do that
    because a "point" is irrelevant on a screen because a screen is not
    paper, and I say display 1.5 em, then in effect, I have told the user
    to see 15pt.

    But if I say display 15px, then it does not matter what font point the
    user has chosen, he will see the same thing I see.

    Now tell me kind sir, when you select a font to use on your browser,
    how does the browser define how the text will be displayed? In points
    or pixels or....? It has to define it somehow.



    >> Of the 500 plus fonts available, which font was used to base it
    >> on?

    >
    >> What if I don't have that font?
    >> A "%" is even worse. What exactly is 100%?

    >
    > 100% of the current size.


    Ah hah! And what is that size based upon? Points.

    >
    >> Inches and millimeters should be recognized by any browser precisely
    >> as they are. But who knows?
    >>
    >> If you're going to give a line-height property in pixels, then define
    >> your font size in pixels as well. Do not use both ems and pixels.
    >> This will help make sure the two work together if the user changes
    >> font sizes.

    >
    > Why do you want to make the use change font sizes? Only incompetent
    > web coders do that.


    Dude, I constantly have to change text size on most sites.
    I have my browser font size set to like 14pt because I know many sites
    just love small print. Even then, I find some that are way to small.

    >
    >> With that in mind, perhaps em's would be better for common text usage
    >> as both font size and line height will change accordingly.
    >>
    >> font-size:1.25em; line-height:1.5em;

    >
    > Don't use units with line-height:
    >
    >font-size:1.25em; line-height:1.5;


    well whaddaya know, an almost agreement.

    >
    >> NOT
    >> font-size:1.25em; line-height:50px;
    richard, Sep 23, 2008
    #19
  20. richard wrote:

    > Pure gibberish.


    That's what you are writing mostly, so I wonder why people bother responding
    to the garbage you send. Do you perhaps alternate your forged sender
    information to make it more dífficult to ignore you?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Sep 23, 2008
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kelvin
    Replies:
    2
    Views:
    575
    Andrew Balmos (abalmos)
    Nov 9, 2004
  2. Jim Owen
    Replies:
    1
    Views:
    446
    Natty Gur
    Jul 24, 2003
  3. Jeremy Chapman

    Load contents of a text file into a text box

    Jeremy Chapman, Aug 15, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    754
    Tommy
    Aug 15, 2003
  4. acko bogicevic

    Align text in text box

    acko bogicevic, Jan 9, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    60,724
    Michelle Stone
    Jan 9, 2004
  5. leo
    Replies:
    1
    Views:
    272
    Bob Lehmann
    Dec 5, 2005
Loading...

Share This Page